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.
Related
I am experiencing problem with white-space which appears after I double click on some of my website elements when I am using IPhone.
Soulika here you can try it on your own if you access from IPhone and zoom with double click you will have white-space which follows you along with further movements.
Mostly happends when I am zooming footer part, but actually might happen everywhere.
I were able to find the problem and soultion.
Problem:
I have hidded html tag scrollbar and moved it to one of my inner containers inside DefaultLayout;
This work complitely fine before we start to talk about IPhone cross-browser compatability.
Once I try to zoom my content inside content container it propagetes zoom event to parent component, but from some reason instead of stoping at the point of my DefaultLayout wrapper - element which has overflow activated and height defined in px( mandatory in order to configure overlow ) it propagetes up to window and zooms window itself.
Solution: I have changed the approach and moved the overflow back to html which is now pretty much content element and window is a wrapper with predifined height. Now everything works complitely fine as zooming accessing my content and do not propagets to parent.
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 have a panel that is "collapsed" by setting the wrapper div's width to be a lot smaller than the width of the content. However, when I use ctrl f to search for words, my collapsed panel gets scrolled, ie. the scrollLeft attribute of the wrapper div of the collapsed panel is no longer 0. This is a problem because I don't want it to be scrolled as it messes up the UI.
Is there a way to prevent search from automatically scrolling stuff in my collapsed panel? Some sort of event I can latch on to (focus?) so that I can reset scrollLeft to 0 whenever the browser's search is activating, or CSS I can set?
I am not using jQuery so anything jQuery related is not an option.
This is default functionality of any browser and functionality that users expect, removing this or preventing it would give developers the ability to seriously alter user experience and is generally not possible, nor a good idea.
That being said, the first suggestions I have are the following
1) set the CSS display of the object or its contents to None after fully collapsed.
2) remove the content when collapsed and store it in memory to inject back in upon opening of collapsed content.
3) upon the open of a collapsed element, set the scrollLeft to 0.
Have you tried overflow:hidden on the div?
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'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