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
Related
I have some drag-and-drop elements on a page whose ondragstart function causes a child section to collapse, which is changing the height of the page, forcing an auto-scroll if the user is far enough down the page, which cancels the dragging, so the user has to try again. And worse, if the user happens to scroll back to the bottom and try dragging again, the whole process happens again.
Is there something I can put into my ondragstart (or maybe onmousedown?) function that prevents body resizing until onmouseup or something?
I suppose if this isn't possible, I'll have to figure out a way to have the draggable element's parent not resize...
I have a scrollable element (overflow-y: auto;) in my HTML.
However, when you put mouse over it and start to use mousewheel it's not scrolling unless you click inside of it.
The only workaround I found was to add tabindex="-1" attribute to make the element focusable and then call $element.focus() when mousewheel events occur. This works to a some degree. However, when element is focused already, the focus() will not do anything and the element become unscrollable until you click outside of it and then click inside of it again. Also, I don't like this workaround because it will draw a focus border around the element.
What actually controls what element on the page receives the scrolling? The weird thing is that I can see that my element actually receives the mousewheel events, but it's not scrolling for some reason.
SO, how do I make sure that element is scrollable by mousewheel when mouse pointer is over it?
I'm testig it in Google Chrome.
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?
i have a div that is overlays an iframe. I am using the div as a handle for the user to drag the iframe around with. The iframe may contain cross domain content, so i cant get rid of it.
If a user clicks on text underneath the div it highlights the text in IE9. This is preventing my onmousedown event from firing. If i click anywhere else on the div that does not have iframe text underneath it, the event is fired, and everything works as it should. Is there a way to get around this?
both FF and Chrome behave as expected, without issue.
To solve the problem in IE9 you can try the following workaround: add a background-color (e.g. #fff) to the div that overlaps the iframe and set the opacity of the div to 0 (opacity is only supported by IE9, not IE8). I have setup a quick jsfiddle to demonstrate this solution. Note that the overlapping div is clickable and not the iframe contents (links and text).
I have a div which is set to overflow:scroll;. I get scrollbars which is what I want. However when scrolling the div with the mousewheel it scrolls the rest of the page when it reaches the top or bottom of the div's content.
How can I scroll only the div or the entire page based on what's hovered ?
First I don't think you can override the scroll event. So here is what I would do. I don't know jquery but here is some straight javascript.
document.getElementById('scrollDiv').onmouseover=function(){
document.getElementByTagName('body')[0].style.overflow='hidden';
}
document.getElementById('scrollDiv').onmouseout=function(){
document.getElementByTagName('body')[0].style.overflow='';
}
Obviously you could tweak this a little, but this is the basic idea. Also, if you need to you could do other test cases. Like if the div has focus then do the same thing. Depends on your setup.
You could test the mouse position and cancel the scroll events for the document if the mouse is within the bounds of the div.
In this case, I think you'll have to override the default onscroll event for the body. In your handler, you'll need to manually scroll the div's contents.