I'm having issue with jumping scroll bar .I have logic to show Hide section within my form dynamically. But whenever I show sections and scroll down to last section within form and again dynamically hide first two section scroll just jump and again set to field on which I was.
Actually it is working good that setting focus again to same field where I was, but for a moment it feels like scroll jumping and again coming back due hide/show logic.I have used Ext.suspendLayouts() and Ext.resumeLayouts() within my show/hide code, but still I am seeing a small jumping moment of scroll bar. What actually I am missing ?
Add this line after you show the sections.
document.getElementById('ID of section you want to scroll to').scrollIntoView();
Related
I have encountered this strange issue where the dropdown will jump to the top left if scrolling with overflow: scroll or if it's bigger than the body.
I'm trying to "dynamically" change a dropdown button to an input on keypress, and have it share the same dropdown box. The content of the dropdown changes as you type.
I think it's better to illustrate the issue by showing a direct example, (because it's a bit big): https://jsfiddle.net/eno4v9kL/
The issue occurs if you scroll down, and then start typing something. It will then jump to the top left.
I have kind of tried to control the behavior of the dropdown but I don't understand how it should be handled;
dropdown = new bootstrap.Dropdown(elm);
I'm not quite sure how to handle this properly in JavaScript, because bootstrap initializes the dropdown automatically. How does one control this automatic behavior?
I think a possible solution would be to have 2 dropdowns, one for each element instead of sharing the same dropdown, but I would like to only use this one dropdown if possible
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
I have a fixed header which has a button (menu icon) on it. Whenever I scroll down the header will show (as it’s fixed). When I click on the menu button the menu is then also in a fixed position on the right hand side. When I scroll down both header and menu show which is fine. THE PROBLEM is when I initially scroll down half way down the page AND THEN click on the menu button the menu (div) is at the top-when I scroll a bit then it displays. There's a delay in this. Do you know how I can get the menu to display regardless of where I am on the page (in terms of y position)????
Top is set as 100px for the menu in a class (as the headers height is 100px-so i want the menu to show under it) BUT obviously if I’m already half way down the page the menu still takes into account the top: 100px however, I want it to change because I’ve scrolled down so the top position value would be different.
Any help??
Taking a shot in the dark, I think your problem is where your fixed position checks are taking place - I.E, I'm guessing they're within the .scroll event of the window.
Before you scroll down, and you click on the menu button, it is set to display block in its initial position - which is correct, because you haven't scrolled down yet.
However, if you scroll down first, then display the menu - it's still going to display in it's initial position - because the check is in your .scroll event - which you haven't fired while the menu has been open.
Try applying the position check in the button logic too.
I am creating a component that shows a bunch of user photos inside a container with overflow:auto, each photo is surrounded by an <a> tag. There is no space around these images, so if the user ever users the middle click to auto scroll this list of photos it will ALWAYS open the link instead of starting auto scroll. That means auto scroll doesn't work.
Is there a trick that will make a middle click that occurs inside one of these image links to use the auto scroll rather than opening the link in a new tab?
Here is a fiddle that demonstrates the issue :
http://jsfiddle.net/uBrbb/
My original fiddle actually showed the scroll bar - which then allowed the middle click on the scroll bar itself - but in my actual case the scroll bars are hidden with a negative padding so that I can display a custom scroll bar (which I simulated using simple up/down buttons).
There are some complicated things you can do, but if possible, it would be better not to wrap the <img> elements in <a></a> to begin with, and instead handle the navigation by responding to your own click() event. In your click event, only perform navigation under the condition (e.which == 1) (left click), leaving middle click to the default behavior.
I have a page that scrolls across multiple screens using jQuery's animate function. I am using tab indeces set by jQuery for the form. The problem is that when I give focus to the first element of the form using
$('#myforminput1').focus();
the page automatically scrolls to the element that has focus, even though it is on the third screen. I don't want the #myforminput1 to have focus until after it scrolls to page three. What happens when I add it to the code is that the page jumps to the focused element, and then animates to move the amount to page 3 so it overshoots the form. It might work if I could set the focus after the animation stops.
There is a similar problem with IE7 in that when a select box is selected using tabs, the page scrolls so that the select box is on the left part of a page. It seems like this problem might be related.