Scroll down on page load - javascript

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.

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...

My $(window).scroll is not responding (jQuery)

I need my scroll to tell me my scrollTop
So i have code kind of this:
$(document).ready(function(){
console.log('Hi!');
$(window).scroll(function(){
console.log('Scrolling...');
var wScroll = ($(window).scrollTop());
console.log(wScroll);
});
});
but cosnole is silent. She tell me Hi!, but she don't say Scrolling... anyway. I tried a lot. So now i am asking!
Try the below code,
See jQuery.scroll(). Make sure that scrollbar is visible otherwise the scroll event will not fire.
Also try changing your window listener to the div if you want to listen to a specific div scrolling.
$(window).scroll(function() {
console.log('Scrolling...');
var wScroll = ($(window).scrollTop());
console.log(wScroll);
});
body {
height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
The script appears correct. However, I have this feeling that either you're not editing the correct file (it can happen), or you need to clear your cache as the browser is probably using a cached version of the file. Both Firefox and Chrome have an option to disable the cache when the dev tools are open. That way, you don't need to clear every time.

scrollTo event overridden when using jQuery Mobile

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);
});

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')
}
)
});

Conflict between onload loadbar and prototype scrollbar

I'm trying to understand this conflict between
My loadingbarscript that hides my content until the page is loaded (Removed the tags from the top)
function showContent(){
//hide loading status...
document.getElementById("loading").style.display='none';
//show content
document.getElementById("content").style.display='block';
}
window.onload = function() {
showContent(); }
</head>
<body>
<script type="text/javascript">
document.write('<div id="loading"><img src="ajax-loader.gif"></div>');
</script>
<div id="content">
<script type="text/javascript">
//hide content
document.getElementById("content").style.display='none';
</script>
And 2. My livepipe scrollbar using prototype 1.6.1
Where the call is this:
<script type="text/javascript">
document.observe('dom:loaded',function(){
var scrollbar = new Control.ScrollBar('cases_tekst','scrollbar_track');
});
</script>
For some reason either one works or they other depending on the order. I had several other windows.onload functions that work with the prototype scrollbar but not this one.
Hope to understand better what is turning wrong. No errors show up with firebug.
The mistake must have something to do with the onload call because when i resize my browser window the scrollbar works.
Hope someone can explain the cause of the conflict.
Instead of using window.onload to call showContents, use prototype's Event.observe function. Like this:
Event.observe(window, "load", showContent);
For more info on this function: http://www.prototypejs.org/api/event/observe
For more info on why not to use the window.load event model, check out this site: http://www.quirksmode.org/js/introevents.html
In general, quirksmode.org is a great site for understanding this kind of thing and how they behave in various browsers. That's one of the reasons to use libraries such as prototype or jquery as it standardizes much of the browser's behavior.
I just solved a similar problem with the livepipe scrollbar. The scrollbar wouldn't appear until I resized my browser window in all browsers except firefox. It turned out it was caused by the nature of the content in the scrolling div. I had many irregularly sized images in there. When I replaced them with text or squared them all up it worked fine.

Categories