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.
Related
When I use scrollIntoView() normally to scroll to a selected element on the page, it works great.
But what I want to do, is click a button that opens a collapsible (thus making the page taller), and then scrollIntoView() to the top of that collapsible element.
When I try adding that piece of functionality, upon the first click the scrolling just "jerks" or flickers a bit, and on the second click it scrolls to the middle of the collapsible.
How can I get around this?
I've tried performing scrollIntoView() after a delay of 10 seconds, same bad behavior occurs.
Sorry, can't share the code because it doesn't belong to me.
I have some code using jQuery's scrollTop(0) method which is not working correctly on Chrome (Version 56.0.2924.87).
My code sets a 2 second timeout which does the following:
Scrolls to the top of the screen.
Un-hides a div which has 100% width and height and requests the user to complete some action.
Appends a class to the html tag which sets overflow: hidden.
Once users completes the action it will remove the class and hide the div so they can continue scrolling.
This is working relibaly on Firefox.
On Chrome, if the 2 second timeout executes while the user is not scrolling, then it works as expected. However, if the 2 second timeout is called while the user is in the middle of scrolling, it seems to freeze.
I have created this Plunker containing all the code. The issue does not occur if you test within the in-line demo window, you need to click on the Preview in a Separate Window (blue button top right inside the code demo).
In my demo, this is what happens if the timeout runs while I am not actively scrolling:
And this is what happens if the timeout is executed while I am scrolling down (mid-scroll):
How can I make this work reliably on Chrome even if the user is currently scrolling on the page?
Why you can not see the div when is display. When the event is called in the middle of the scrolling the scroll bar hidden and the div apper at the top of your page, but your viewport is not at the top position. If you set the div CSS position property to fixed it will work, css position. the fixed value of the position property is relative to the viewport.
So the problem is not on your jquery code.
code here
plunker
And check this:
Scrolls to the top of the screen.
Once users complete the action it will remove the class and hide the div so they can continue scrolling.
I think it will be best if they can continue at the position the wear before.
What about if you add stop(). before the .scrollTop(0)?
$('html,body,document').stop().scrollTop(0);
I am not an expert, but may be worth a shot.
Hope it helps.
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();
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 am working with iScroll for an iPad web-app. When a user touches the next button (on top of the keyboard) focus jumps to a form element on another slide it breaks the scroller.
I have tried putting each slide in a separate form tag so it would grey out "next" when the end of the form is reached. This yielded no results and the button still jumps across slides.
How can I remove the Prev/Next buttons or at least define boundaries for it?
I've been trying to come up with an answer myself for a few days now. It seems the next/back buttons traverse all input elements visible on the page (they don't even have to be in the same / any form).
The best solution I've been able to come up with is to disable the input elements you don't want traversed.