Here is the example page that I'm working with:
https://www.midstory.org/toledos-water-issue-is-an-affordability-issue-too/
I have an iframe with an embedded storymap article on our WordPress site. The storymap article is meant to appear to be seamless with the rest of the website, filling the whole viewport and scrolling as if it were part of the main page. The problem is that, as you can see in the link, there are two scrollbars on the right-hand side. Because below the embedded article we have the comments box and footer for the website, which needs to be able to be scrolled to after the user reaches the bottom of the embedded article.
The current solution "works" but looks pretty cludgy. Is there a way to scroll the iframe article with the main scrollbar and then have it scroll the rest of the main page once reaching the bottom of the embedded article?
One idea I have is to make the embedded window fixed in the viewport and make the main article the height of the embedded one. Then I can scroll the page. But there's two problems:
How do I get the height of the embedded article?
How would I control the scroll position of the embedded article from the main one?
Related
I've integrated a Dash dashboard into a Flask application. Basically I've sticked to this medium and tailored it to my needs. Everything works as expected and the dashboard's content shows up as an iframe element. My problem is that the whole iframe situation feels a little hacky since the website has two scroll bars. The outer one for the main content and the inner one for the iframe. The UX is just not perfect as the iframe content sometimes starts scrolling before it's entirely visible.
There's one obvious solution to this problem that sadly isn't suitable for my dashboard. I could just increase the height of the iframe element until it fits the entire dashboard. That way I would get rid of the scrollbar. However, I have a sticky element in my dashboard that follows the user from a certain element onwards. Getting rid of the iframe's scrollbar would break the sticky element and I would really like to keep it.
Another solution I thought about that I'm just not capable of developing on my own is the following:
Enable main scrollbar and disable iframe scrollbar if the iframe element is not entirely visible. If the iframe element is entirely visible check if the iframe's scrollbar is at its topmost/bottommost position and enable upwards/downwards scrolling while disabling downwards/upwards scrolling.
I guess (hope) it's a lot harder to phrase than to actually code it. So I prepared some top-notch powerpoint visuals for easier understanding.
Blue background: main content
Red bordered rectangle: current view (scrollable)
Yellow rectangle: iframe (scrollabe)
Is there a way to achieve this behavior? I'm not particularly good at js & css so I would really appreciate if you could help me out.
Cheers
I need to make the iframe not take over the main focus of the scrolling withing the page. I need to be able to scroll the page entirely to the bottom even though the cursor hovers over the i frame.
http://gyazo.com/e11d47e10b2d5a8b9769ae64609721e5
I need to make it so that the parent page gets to bottom before the iframe starts scrolling so it won't show only half of the iframe.
I have access to the iframe contents aswell.
http://jsbin.com/rifipezeyi/1/edit?html,css,js,output
I have a jQuery plugin that makes pages dynamic (found here: http://css-tricks.com/dynamic-page-replacing-content/ - Demo here: http://css-tricks.com/examples/DynamicPage)
My nav bar is in the footer (I know this is not generally a good idea but it suits the layout and objective of my website).
When there is not much content on the page, obviously the footer is in view on the window so no action needs to be taken. However, when a longer dynamic page is loaded which requires a scroll bar, the footer is pushed out of the window to make space for the content.
I want the footer to STOP and fix itself to the bottom of the window if the dynamic page creates a scrollbar, essentially so the navigation is always in view.
I've looked at other solutions on this site, but it's all either to permanently stick the footer to the bottom of the window, or only fix to the top when scrolling. I've tried inverting those solution values (i.e. changing top to bottom) but to no avail.
Could anyone help?
wrap in a DIV with overflow auto or scroll
I am having a hard time looking for a modal box that has a similar functionality as the one on Pinterest.
I am currently using simple-modal (jQuery) but the problems are the height is not dynamic (putting height: auto has some problems) and the modal box's position is fixed at the center. Hence, if the content is long, it will just have a scrollbar on its own (inside the modal box) instead of being scrollable using the browser's main scrollbar. When I use the main browser's scrollbar, it's scrolling the content behind the modal (which is the actual web page) which is not what I intend to happen.
Do you have any suggestions on what to use?
If you right click on a object and open it as a new tab/window, you will then see what Pinterest is overlaying on the main page.
That said, you might achieve the same effect by expanding a full viewport iframe with semi-transparent background to see the underlying page.
To be sure, I've not come across any lightbox clones similar to Pinterest's custom jQuery version hidden somewhere in it's .js file.
Status Update:
If your willing to create your own method, I've outlined a process seen in my SO Answer here
I am trying to make a sidebar div sit below a header secion, when you scroll down, it will turn into a fixed div and stay fixed until the bottom of the page, once it reaches a footer section, it will stick to the top of it and allow me to scroll down the footer area without seeing it anymore.
There is a perfect emaxple of what I am trying to describe on this site http://madebymany.com/blog/apples-aesthetic-dichotomy
In the left column, it sticks as you scroll down and then un-sticks at the bottom
I am looking for a good way to do this, hopefully an example or tutorial, I realize it is done with javascript changing the divs properties. I have tried searching but all I could find was old outdated articles over 5-6 years old and they only did half the job. I am not sure even what to call this feature?
That web site is using jQuery Scroll Follow.
Note that according to the jQuery Scoll Follow web site...
The Scroll Follow object will remain inside its immediate container.
... hence why the scrolling stops before the comments on your example web site; the element which is scrolling on the page is constrained inside of its parent <aside> element. You can check out the example.
You basically handle the page's scroll event and move the box around.
Most tutorials require jQuery, so get familiar with it. If you want a tutorial, here's a working one: http://designwoop.com/2011/01/how-to-create-a-jquery-sticky-sidebar/.
Why not dissect the code of that website too?