scrollTo event overridden when using jQuery Mobile - javascript

After loading, I want a section of the page to be display on the top, so the page scroll will be in that particular place. without the user see scrolling, I want him see immediately the right place on the page.
I load the JQuery mobile script and this override the document ready and load events.
If I remove the JQuery mobile Script It works perfect. But I cant remove It.
I tried:
$(window).load(function() {
window.scrollTo($("#selector").offset().top, 0);
});
As mention in - Stackoverflow question I tried:
$(window).load(function() {
setTimeout(function() { $.mobile.silentScroll($("#selector").offset().top); }, 100);
}
});
But It didn't work for me.
only in chrome the scroll is in the right place, but in IE, Firefox It didn't.
If I increase the timer to 1000 the IE work but the user see the top of page and after the scroll go to the right position. and this is not good.
I tried:
$(document).on("pagebeforeshow", '#selector', function() {
$.mobile.silentScroll(500);
setTimeout(function() {
$.mobile.silentScroll(500);
}, 100);
});
And it didn't work too.
What Do I need to do to, for scroll the page to the right place in all the browsers, Immediately after page had been loaded.
Thanks for helping.

I wrote sample code in this jsfiddle, it works in Chrome and Firefox
Here is code that I used:
$($("html,body").animate({scrollTop: 500}, 1000));
Hope this help
EDIT: if you want scroll to be in particular place immediately after page had been loaded then use this code (see plunker sample)
$(document).ready(function()
{
$("html,body").scrollTop(400);
});

Related

jQuery stops working after page reload on Firefox

I recently published a website with a simple SVG animation of a Panda on a rocket. As soon as the user scrolls down, the image changes to another SVG with an animation of the panda going up and away from the screen.
The website: https://www.jonnyekholm.fi
I'm using this simple script to make it happen:
<div style="left:10%;" id="rocket" >
<img width="30%" height="auto" src="https://www.aaltowave.com/img/RocketPanda.svg" />
</div>
<script>
jQuery(window).scroll(function() {
jQuery( "img[src='https://www.aaltowave.com/img/RocketPanda.svg']" ).attr("src","https://www.aaltowave.com/img/RocketPanda2.svg");
});
</script>
This works fine on Chrome.
This also works on Firefox, at first. But if you reload the page and scroll down again then the panda just disappears. Same thing happens in Safari.
Im also using this script on the same page, to make the panda move across the screen at a later point:
<div id="trigger"></div>
<img src="https://www.aaltowave.com/img/still2.svg"/>
<script>
jQuery(function() {
var $window = jQuery(window);
var endpoint = jQuery("#trigger").offset().top - $window.height();
$window.on('scroll', function() {
if ( (endpoint) < $window.scrollTop() ) {
jQuery( "img[src='https://www.aaltowave.com/img/still2.svg']" ).attr("src","https://www.aaltowave.com/img/movement22.svg");} });});</script>
This works fine on Chrome.
On Safari this doesn't execute on reload, just like with the previous animation.
On Firefox however, the animation doesn't occur at all except for one or two occasions. This tells me that the script does in fact work on firefox, but it executes on a weirdly basis.
How can I make the panda animations show up on Firefox?
I would appreciate it very much if anybody could help me with solving this problem. Thank you in advance!
Based upon happymacarts suggestions, this is most likely a cache issue. On reload the animation is loaded, but at the last frame where it is already off the screen. One must force an image reload for this to succeed.
To be able to reload the image and bypass the caching I added a unique query parameter to the URL and put the scripts together:
jQuery(window).scroll(function() {
jQuery( "img[src='https://www.aaltowave.com/img/RocketPanda.svg']" ).attr("src","https://www.aaltowave.com/img/RocketPanda2.svg?t=" + new Date().getTime());
jQuery( "img[src='https://www.aaltowave.com/img/still2.svg']" ).attr("src","https://www.aaltowave.com/img/movement22.svg?t=" + new Date().getTime());
});
Chrome: Works like charm
Safari: Works like charm
Firefox: This solves the issue for the first animation, but the second one only shows up if the user has scrolled down to the location and then reloads the page. Not in any other occasion. Still working on a solution for the second animation...

Auto scroll function in jquery mobile

Hi I am trying to implement a autoscroll function on my webapp. After page load the page should scroll automatically to the bottom without an animation. I need it for a little chat application where after page loading the latest list items should become displayed. I created a fiddle.
// this version wont work:
myscroll = $('#chatOutput');
myscroll.scrollTop(myscroll.get(0).scrollHeight);
//this wont work too:
$(document).scrollTop($(document).height());
What am I doing wrong?
Please try this
$(window).load(function() {
setTimeout(function(){
$(document).scrollTop($('.chatPost:last-child').offset().top);
}, 1000);
});

jQuery .scrollTop not scrolling properly

So I've got the following code:
$(document).ready(function(){
if(window.location.hash) {
$('body,html').animate({
scrollTop: $(window.location.hash).offset().top
}, 1000);
}
})
Which I've built with the help of code taken from StackOverflow.
I call the page at url#destination so actually it should scroll to the element whose ID is the page Hash. The element exists and the page scrolls down, but not to the exact element offset, but a bit more above. It could be just fine but I want it to work as I expected.
So I now show you the console results:
>>>$("body").scrollTop()
>1155
>>>$("#aboutus").offset().top
>1672.890625
Could someone explain this to me? Because I cannot understand anything here.
Hmmm... It works fine for me. Maybe the problem is, as a user pointed in the comments, the elements haven't loaded yet so you should use $(window).load(). But if you use that, your code won't work fine since the browsers have the built-in method that when a hash exists in the url, it goes directly wherever the element whose id is the hash is. This happens because this action is triggered before the .load event detection in your javascript code. So, if you want to make sure the code works, replace the targeting of the element with other attribute like:
$(window).on("load", function(){
if(window.location.hash) {
setTimeout(function(){
$('body,html').animate({
scrollTop: $('*[idt="'+(window.location.hash).replace("#", "")+'"]').offset().top
}, 1000);
}, 130)
}
})
This should make fully sure the animation works properly, since there's no element that has got such a hash, and the js code manages the same way.
The reason it doesn't scroll to the very bottom is because your last element hasn't been added to the DOM at the time of scrollTop execution.
Make scrollTop asynchronous to wait until the DOM has completely rendered:
setTimeout(() => {
element.scrollTop = element.scrollHeight;
}, 0);

Scroll down on page load

I need to scroll down about 50px when the page is loaded. This is what I'm using:
$(window).load(function(){
$("html,body").scrollTop(55);
});
I've also tried:
scrollTo(0,55)
This works fine in Firefox and IE, however in Chrome, Safari and Opera it scrolls down to the proper position and then jumps back up to the top(or the last scroll position).
I've also tried using an element id to scroll down, but the browser still overwrites it. I tried like this:
htttp://website.com#element
I think your problem is that you are using $(window).load and some browsers are having problem as things havnt fully rendered yet. Try swapping to
$(document).ready(function(){
$("html,body").scrollTop(55);
});
Seems to work fine in all browsers here http://jsfiddle.net/7jwRk/1/
Info
$(document).ready
executes when HTML-Document is loaded and DOM is ready
$(window).load
executes when complete page is fully loaded, including all frames, objects and images
<script type="text/javascript">
$(document).ready(function(){
var divLoc = $('#123').offset();
$('html, body').animate({scrollTop: divLoc.top}, "slow");
});
</script>
Add id="123" to any <div> it will automatically scroll it down when page loads.
Here's an another script if the previous one wont work !
<script>
window.setInterval(function() {
var elem = document.getElementById('fixed');
elem.scrollTop = elem.scrollHeight; }, 3000);
</script>
Add id="fixed" to any <div> it will automatically scroll it down when page loads.
You can use the scrollIntoView() function. This is supported accross most browsers (even IE6).
document.getElementById('header').scrollIntoView()
After messing with scrollIntoView(), and observing it scroll correctly at page paint time, then snap to the top for no reason, I went with this:
http://website.com/#target
and
<a name="target">
Then the browser understands exactly what I need and does it. But I can only do this because we control the URI, so it naturally also won't work in all situations.
Alternatively, just fire this at the end of your body:
...
<script type="text/javascript">
$("html,body").scrollTop(55);
</script>
</body>
</html>
If you are using 2 monitors, be sure that when you open the window of your browser with the page for which the script is implemented, you don't move that window to the other monitor, with a different screen resolution. Shortly: don't cross the windows of the browser to a different monitor, just open a new window of the browser for each monitor/ screen resolution.

Jump to iframe once it loads

Im looking for my webpage to jump to an iframe when someone click. I've found one solution which works pretty well which is this: http://jsfiddle.net/RGjCL/4/
<ul>
<li>
Class Name
</li>
</ul>
<script type="text/javascript">
function IFrameScroll(link){
window.myIframe.location=link;
window.location.hash='myIframe'
}
</script>
<IFRAME id = "myframe" onload = "setIframeHeight( this.id )" name="myIframe">
I've tried on my web and it partially works except for the fact it scrolls to the iframe before it loads so it doesn't goes that far to the bottom because once the iframe its loaded the page fully extends.
The web in question is the following: http://www.clavederock.com.ar -
The links are under the tabs "Quienes Somos" "Programacion" and "Archivo".
I hope i made myself clear so you can help me. Thanks in advance!
Try moving window.location.hash='myIframe' from the function IFrameScroll() to setIFrameHeight(), so you'll change the hash once the iframe have the desired size.
EDIT #3:
Since you need to wait until iframe is loaded in order to resize it and window.location.hash doesn't works the second time in chrome, you can try this:
<script type="text/javascript">
function IFrameScroll(link){
window.myIframe.onload = function() {
// this will ensure that the height will be updated after load
setIframeHeight('myIframe');
// This works on FF and IE, and let users to bookmark
window.location.hash='myIframe';
// and this will allow it to scroll the second time for chrome
document.getElementById('myIframe').scrollIntoView(true);
}
window.myIframe.location=link;
}
</script>
I really hope this solve your problem :)
Instead of jumping to the iframe, you could make a smooth scroll. This would give a little more time for the iframe to load after the link has been clicked.
Alternatively and probably more effectively, you could load the iframe with the rest of the page but make it invisible. Then you just need to show it when the user clicks the link
//load the page with the iframe hidden
//in css
#myIframe { visibility: hidden; }
//use jquery to make it visible when the user clicks the link
//you could do this with javascript if you don't want to import jQuery, but I find jQuery easier
$(document).ready(function() {
$('#myAnchorTagId').click(
function() {
$('myIframe').css('visibiliy', 'visible')
}
)
});

Categories