I've got an iframe embedded somewhere halfway down my page that's 100% of the width and height of the screen.
In mobile Safari I can scroll down the page to where the iframe is in regular fashion (finger swipe up). However, as soon as the iframe fills the screen I can no longer scroll. This is of course because all the pointer events are being captured by the iframe.
Is there any way around this? I know events can't bubble up from iframes to their container divs and that there's no way to interact with iframe css cross-domain.
Importantly, the iframe has interactive content so I still need click events to work on it. In other words, putting a transparent div over the iframe won't work either.
Any thoughts?
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 want to display an <iframe> in my site, but I want the site that I am displaying to only be scrollable. All other events should be disabled.
So that the container of the <iframe>, the <iframe> has a width and height of 100%, behaves as if it has nothing inside it.
Almost like it is a scrollable screenshot of the site. So on hover and on click inside the <iframe> don't work.
The reason I am doing this is that the container of the <iframe> needs to be draggable, but can't be dragged as all events on the <iframe> are being registered within the <iframe>.
How can I do this in javascript and / or jQuery?
Can I apply a .preventDefault() to everything except scrolling?
You could overlay a div with opacity: 0 (meaning it's fully transparent). That div will intercept most events, such as onclick.
You can then add a mousedown listener to that div which will initiate the 'drag'. The iframe then moves with the transparent div.
This will also disable scrolling though, but maybe you can mirror a scroll event from the div to the iframe .. will be tricky.
Set up a clear div on top of it, if you can use CSS, set the opacity to zero, and set the z-index to 1 on the div, and to -1 on the iframe. Doing that should make the div receive the mousedown events. You could also do document.getElementById("id").onclick=function(){} and make nothing happen on them
I'm in the middle of building a not scrollable, fixed layout website, but as usual, non conventional websites tend to have shortages. There is a scrollable news element in the page, which scrolls a div container's div childs up and down by the mousewheel. The problem arises, when someone tries to search in the page, pressing CTRL+F and the content is out of the viewport (not scrolled into view). Is there any common event, which handles the find/search inside browsers?
Im not completely certain about this, but I dont think DOM has any events that fire when a uses searches and that it a browser function that you can not hook on.
http://en.wikipedia.org/wiki/DOM_events
I have a dynamic page where clicking a link triggers some javascript that sets some page elements to display:none, and thus changes the height of the page. The typical browser behavior for this is that the scroll position from the top of the page is retained. I want to retain the scroll position from the bottom instead, because the link is near the bottom of the page and I would like the user's cursor to remain over the link after it is clicked.
The code I have to do this is:
var scrollBottom=getDocHeight()-getScrollTop();
//do stuff to change height
window.scrollTo(0,getDocHeight()-scrollBottom);
(using cross-browser functions I found to obtain document height and scroll position).
This works fine in chrome and internet explorer, but in firefox, there is a small delay between the page height changing and the scroll position changing. As a result there is a flicker as the page quickly realigns itself, which is bothering me a great deal.
Can anyone suggest a fix or a more natural way to remember the scroll position from the bottom of the page instead of the top?
Thank you.