I have a form within a loop on our site and when someone submits the form then a query string is added to the url something like "?updated=111". Then my JQuery script checks the url for the number and scrolls to that div once the form is submitted and page reloads.
This script is working fine in Firefox but doesn't work as well in Chrome or Safari. For example, say on my page I have 25 posts, and each posts has its form. Lets say I submit the form on post number 25 (the last one) then when the page reloads on chrome the window scrolls but not all the way to #div25 sometimes it works ( for like 1 -5) other times it will only scroll to half the window.
Is there a fail safe way to make sure the window will scroll to that div after the page refreshes? Again, the below does work in Firefox but only partially works in Chrome and Safari.
<script>
jQuery(document).ready(function($) {
if(window.location.href.indexOf("?updated=") > -1) {
var postID = window.location.href.match(/\d+$/);
$('html, body').animate({
scrollTop: $('#post-'+postID).offset().top
}, 'fast');
}
});
</script>
Also side note, not sure if this helps but once the form is submitted if I hit refresh on the page then it scrolls to the correct location.. Not sure if I should add a delay or speed up the animation to make this work cross browser like it does in FF?
Try putting the ".animate()" method inside a timeout of 2seconds. Does the problem go away? If it does, then its timing issue. Most likely thats because the browser is not ready to scroll to the location that you ask it to scroll to.
In this situation, you'd rather go with a timeout of 0 than a 2 sec. A 0 timeout just schedules the scroll for next cycle whenever the browser is free.
HTH!
Related
I added some page transitions to my site. Now whenever someone clicks on the browser back button, that redirects him to his previous site, his scroll position on that page gets restored automatically. If the user has scrolled down on the previous page, this behavior leads to an ugly page jump in the current window less than a second before it fades out.
1) Am I able to delay this default browser behavior?
2) If 1 is not possible, am I able to disable the default behavior and store & restore scroll positions manually instead?
Although it is experimental, you can try adjusting the History scrollRestoration from "auto" to "manual".
There are a few polyfills out there to help with cross-browser compatability too.
if ('scrollRestoration' in history) {
// Back off, browser, I got this...
history.scrollRestoration = 'manual';
}
I've been working on getting a "float then fix" navigation bar working on most browsers without any JavaScript libraries (like JQuery).
It works on Chrome but I have a small problem in FF and it seems to be due to FF firing onscroll multiple times when you do a "scroll action" - PdDn, PdUp, up and down arrow keys, up and down arrows on scroll bar, clicking scroll bar, etc.
Chrome fires only once but FF first multiple times, how many tines depends upon the length of the web page and your current position.
Is there any way to get FF to fire only once like Chrome?
I'll put up a test page which lets you look at how many times onscroll fires by logging "scroll" to the console. It should be up in about 10 minutes. I will put a link back to this question on the page.
There will be some comments at the top of the page explaining how to use it.
Does anyone have any ideas as to getting just one onscroll event when you peform a "scrolling action?"
You can do something like this:
var timer = null;
function action(){
// do stuff on scroll
}
function onscroll(e){
clearTimeout(timer);
timer = setTimeout(action.bind(this, e), 100);
}
This way, it only fires scroll events after 100ms of idle time, which may or may not be what you need. You may need to tweak the timeout delay to get the best result.
I use:
var el = document.getElementById("centd");
el.scrollIntoView(true);
to scroll to specific position. In every browser it works fine, but in Chrome when the page is loaded it scrolls to that point, but after a second or two (when the page is finished loading) it scrolls back to start.
Make sure all your JavaScript code is run after your page completes loading:
document.addEventListener('DOMContentLoaded', function() {
// your code here
}, false);
Or if you're using jQuery:
$(document).ready(function(){
// your code
});
This will make sure that your code runs the way you intend.
I feel like it's supposed to be a feature and not a bug (but cannot find evidence to support this theory): it works fine the first time the page loads / in a new tab, but as soon as the user scrolled, that scroll-position overrides any scrollTo or scrollIntoView commands (in this briefly flashing fashion you described, and that I am currently trying to make sense of) – even if you wait for the document to be ready.
Other browsers don't share this behavior, in my experience.
I have a smooth scroll effect:
jQuery('html,body').animate({scrollTop:scrollTarget}, 1000, "swing");
It works fine, but when multiple items are pressed, sometimes it flashes the content of the page for one second...You can try on this link: http://teothemes.com/wp/vptest/, click on Services and after that click 10x times on Contact...while you're locked on the contact section, try clicking on Services and you'll see how the Services area shows up for one second, that's not good and I wnat to get rid of that.
Ideally, I'd like the effects to somehow delay in execution..I now have a condition
if(parseInt(scrollTarget) !== parseInt(jQuery(window).scrollTop())) {
to prevent scrolling to the same area, but if you'll click 5 times on Contact when you're in the Services, ideally it should go to Contact first time and the 2nd time it should fetch the correct scrolltop and scrolltarget after the first execution and not the one when it was clicked.
Any idea is highly appreciated.
The jQuery preventDefault() method does the trick!
I've tried using both scrollTo(y,x) and scrollTop(x-pos), values in the parenthesis being the offset.top values of individual DOM elements. These seem to work in all browsers initially, however when refreshing Chrome to resend the form submission, the page jumps to where it should be for a split second then jumps back to the top. This occurs when I scroll back to the top of the page prior to refreshing the page. Does Chrome save some sort of session variable or track the page position on refresh such that when refresh is clicked, the page focuses on the portion of the screen last viewed? And if so, is there a way to prevent such a reaction from Chrome? I've tried adding a setTimeout in the hopes that my scrolltop or scrollto (As stated, I tried both) wait until Chrome has reacted to the page load, but with no change to the result.
if ($('.register_box').length > 0) {
if ($('.register_box').find('.error').length > 0) {
var regbox = $('.register_box').offset();
$('body').scrollTop(regbox.top);
}
}
I've tried 'body', 'html', a selector wrapper, window, screen, and a combination of these - no change. I've also alerted the value for regbox.top and consistently get the value of 699, so I know it's passing the correct value. Do I need to stop propagation or prevent default, and if so, where? Firefox and IE both respond correctly. Chrome, on both Mac and PC, do not.
Try $('html, body'). See jsfiddle here.