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).
Related
I'm creating an keyboard navigation extension which need to focus an scrollable element to scroll it for Google Chrome. Because this is just an extension, so I want not to edit existing DOMs like another similar question.
I want to focus an element like "mouse click to a scrollable element". Mouse click to an scrollable element, and then you can scroll the element by arrow keys. This has the following feature:
No focus visual effect
"tabindex hack" change the element like a focused textarea border.
No change document.activeElement
No change attributes
I read some similar OSS sources like vinium, but these are scrolling by javascript, or do nothing for scrollable elements. So I think there seems to be no way.
I am using JQuery animation ,I am facing issue on chrome.
As per requirement I need to animate the div on click of a link.
when cursor moved hover link, link should be underlined and cursor should show as pointer but even after clicking on link even after animation if user not moved mouse mouse pointer not get changed and link also shows underlined. if users moves mouse it works fine.
fiddle :https://jsfiddle.net/pratiknvyas/wsaqfcxj/
Where on other browsers it works fine.
You can add .hide().show(0) for animate element for compensate Chrome bug.
Please, take a look at feedle.
Related:
How can I force WebKit to redraw/repaint to propagate style changes?
Force DOM redraw/refresh on Chrome/Mac
Google Chrome version 29.0.1547.62 m.
I have some DIV elements hidden from the view via their parent's CSS attribute overflow set to hidden and those DIV elements are re-positioned using CSS attribute transform.
When I open find (ctrl + F), type in word that is found in DIV, the DIV is moved by browser.
How to prevent Chrome from re-positioning my DIV elements while using search function?
Unfortunately, there is nothing you can do. overflow:hidden doesn't prevent the overflowing content from scrolling into view, it just doesn't show scrollbars for it. Selecting the element that is partially or entirely out of the parent's bounds will scroll the content until the element is entirely or as much as possible in view. As you've probably guessed, that is the feature of chrome's search that gives you problems.
Element with overflow:hidden;, triggers the onscroll event. You can listen on it and scroll again manually.
Tested on Chrome 41 / OSX.
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 creating a popup for elements in the DOM, much like Qtip. I know there are alot of done plugins for this but I wanted to create one myself.
Basicly what the code does:
Hover element, take that elements offset and alter a little bit so that the popup is over the element.
Show the popup element and then change its position according to the element that was hovered.
But it seems like I've failed. It doesn't work in IE7.
When I hover an element in IE7 my popup shows in the right location BUT the element that was hovered changes position.
JSfiddle: http://jsfiddle.net/egj46/
I can't say what exactly is causing that, it can be solved by moving the popup div "pHolder" to after the content.