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?
Related
I've tried to accomplish this, (since I am a noob at coding...) with a concept I found online... it didn't work out very well, and offline the scroll padding and "Sign In' button appears for a second than disappears...
To view web:
Click Here
if someone can please send me a simple code including: Html, (Css,) JavaScript, (no Jquery) of how to accomplish the same idea (of the button) on that site...
Thank You!
You want to listen for window scroll events and check to see if the main button is visible. You can do this by checking it's position inside the window using Element.getBoundingClientRect();
The bottom property tells you how many pixels the bottom of the element is from the top of the screen. If the number is below zero, it means the bottom of the element is off the top of the screen.
At that point, just toggle the hidden button into view. In my demo, I did this by adding a CSS class to that button.
If the user scrolls up and the main button is visible again, you can hide the side button by removing the class you previously added to it.
JS Fiddle Demo Here
Using scroll event with getBoundingClientRect may decrease performance
You can use intersection observer for checking an element enter in viewport
https://developers.google.com/web/updates/2016/04/intersectionobserver
I have a navigation bar which becomes hidden when the user scrolls down and is shown when the user scrolls up. Similar behavior is implemented in the Headroom.js library. The logic of hiding and showing is called on the scroll event.
I also have a large table where I prepend some rows from time to time. I want this table to keep the user's view position even when the new rows are added. This is implemented as proposed in this answer.
The problem is that when I prepend some rows, scroll position changes (It is changed via setting scrollTop property to keep scrolling position unchanged) and the navigation bar is hidden. I want to hide the navigation bar only if scrolling is initiated by the user, not by the software.
Can I prevent firing scroll event when changing scrollTop property? How can I combine this two techniques - adaptive navigation bar and table which holds its viewport unchanged when the data is added?
If there is no easy way of controlling the default scroll functionality. Then You can apply condition using custom flag, when to trigger scrolling event and when to prevent it.
Check this thread for further understanding. https://stackoverflow.com/a/12763950/10664244
Sorry the FPS is a little rough, but basically I have created a side panel for some of my web app's settings
I open and close it by setting the width of a container element
document.getElementById("theSidePanel").style.width = "50vw";
and
document.getElementById("theSidePanel").style.width = "0";
If you look closely, when the panel closes, some of the controls on the panel stay visible for a second, and then disappear, after the side panel has already closed
I'm hoping that this has something to do with closing the panel by setting the width, is there a better way to do this?
Otherwise it'll be a bug somewhere else in code, which would be significantly more difficult to troubleshoot (If anybody has ideas, I'm all ears)
As the browser is reducing the width to 1 (which I presume has a CSS transition on it), it will be repeatedly re-drawing and re-rendering the interior of the div as it shrinks and shrinks, which is probably causing the bug.
If the div is absolute or fixed-positioned, why not instead try keeping the width constant, and modifying the left property to negative the width of the div, and adding a transition to left to animate it? That will replicate the desired effect, but will not force the browser to continually re-render the div's contents.
i have a question about automatically resizing childcontrols of a panel if the panel change the width or the height. I use Asp.net (vb.net). Is there an extender or a property of the panel which allows this?
Or is there another panel which has the possiblity to auto resize their controls?
Or a javascript (jquery) plugin which allows resizing. I know the jquery.ui resiziable plugin, but i don't know if the plugin allows me to resize the childrencontrols when i change the size of the main panel with textboxes for example.
So i want to set the width for my button to 100px and add it to my panel like
main_panel.controls.add(btn)
On my testpage i have two textboxes which allows me to resize the panel, the main panel with the button as his childrencontrol and another button for submiting the panelresizing.
i hope anyone understand me, my english is waste(:
There multiple solutions to your problem depending on your knowledge/requirements.
you can set a fixed size in when you add the controls to the panel
(with .NET)
you can set up flexible rules with css which automatically make the controls inside the div or even set them all the same fixed size the div will scale
you can do this with script as well, target all the elements and make them the same size
Depending on your need (eg does the user do the resizing? or is it window resizing?) I find it the easiest to set up solution 2 and then add an event listener when needed. For instance when the project requires re-sizing when the user sizes his browser window.
Just be careful though the window resize event is very "heavy" and gets triggered a lot so use it only when absolutely needed
English is not my native tongue as well so I hope I understood your question; if not just shoot :)
(try to avoid option 1, it is the least flexible and scalable)
I have a web page that has content which extends past the right edge of the browser window. I set overflow-x: hidden on <body> to turn off the bottom scrollbar, but I can still scroll horizontally with the trackpad, which is not what I want.
Is there any way to prevent the browser from scrolling horizontally?
As a side note: Safari 4.0.4 only scrolls horizontally sometimes, and the scrolling feels "sticky" and "jumpy," whereas Firefox always smoothly scrolls horizontally.
you could try to set in CSS:
html{
overflow-x: hidden;
}
instead of use body selector.
I tried that and works in firefox.
I think the real question is, why do you have your content overflowing out of the intended size of the page? Is this content that you don't want users to actually see? In that case, put it in a div somewhere and set it's display to none. That would avoid the overflow issue entirely.
If there is a legit reason you want it to overflow the container, then set the size of the container explicitly, then the overflow-x to hidden. I haven't tested it, but that should prevent the current behavior. If not, try using a div, rather than the body tag. The browsers may be acting strangely because it's working on the body tag itself.
I would go into Chrome and open the developer tools on a desktop. Remove the overflow-x property. Then proceed to delete each parent element on your page. When you see that the horizontal scroll bar disappears, you know you have found your problem. Then dive into that element. My bet is you have a width of 100% and than a margin put onto it. Remove the margin if that is the case.
If all else fails, you could use Javascript to constantly force the browser to scroll to the left using window.scrollTo(xpos, ypos). For xpos you'll want to use 0 and ypos you'll want to get the user's current scroll position assuming you want to allow vertical scrolling.
You could put your function call either in the window.onscroll event handler, or in a javascript interval that runs every 100 ms or so. Up to you. If you need code examples just ask.
This would be better to understand if you had an example.
is this a long url or something with no whitespaces? Do you have white-space:nowrap; set on the element?
If you have a container with a defined size (one that fits in the viewport), the text should adhere correctly, (unless it's a long line with no spaces)
Old discussion, but it could be of use to people looking for the right answer !
Set "overflow:hidden" on the parent div of the element that is wider than the browser window (not html or body as you would normaly do), that will stop the scroll with de pad or the arrows pad...