Develop Reference

Load the page at index.html after every refresh

I am using the fullPage.js plugin to scroll page by page. The plugin is using hash urls to do so. On page refresh, the document is always loading on the last hash url it was on. How to make the document load at the top after every refresh? I tried adding the following code but it did not work out:
$(document).ready(function(){
$(document).scrollTop(0);
});
This is the link to the webpage - https://rimildeyjsr.github.io/St.Anthony-Website
jQuery :
$('#fullpage #section1').hide();
$(document).ready(function(){
$('#fullpage #section1').show();
$('#fullpage').fullpage({
anchors:['Page1','Page2','lastpage'],
afterLoad : function(anchorLink,index) {
if (index == 2 || anchorLink == 'Page2'){
$('.school-name').addClass('animated slideInUp').css('visibility','visible');
}
}
});
Link to github repository : https://github.com/rimildeyjsr/St.Anthony-Website

It looks like this on your page causes it to go back to the top.
window.location.hash = '#Page1';
So you could try doing that
$(window).on('load', function() {
window.location.hash = '#Page1';
});
which should happen any time you load the page, including refreshing.

Try This
if(location.href.split('#').length > 0){
location.href = location.href.split('#')[0]
}
Let me know if you face any issue

The proper way would be by using the fullPage.js function moveTo:
$(window).on('load', function() {
$.fn.fullpage.moveTo(1);
});
But the suggested solution by changing the location hash will also do it.

if (location.hash) {
setTimeout(function() {
window.scrollTo(0, 0);
}, 1);
}

jQueryMobile - Scroll to a position onLoad

In jQueryMobile, on the page load, I would like to scroll to a given position. I know how to do it in classic jQuery, but in jQueryMobile there is an auto scroll top on the page load.
I tried to do :
$( document ).ready(function() {
$.mobile.silentScroll(1000);
});
That doesn't work. My page stay blocked to the top of the page.
While if i click on a link with onclick="$.mobile.silentScroll(1000);" that works perfectly !
I just would like to scroll to a yPosition on the page load :) !
=======EDIT============
After suggestions of White Raven and Omar I've tried to do this :
$( document ).delegate("#pagePkmn", "pageinit", function() {
$.mobile.silentScroll(1000);
});
OR this :
$(document).one("pagecontainershow", function () {
$.mobile.silentScroll(1000);
});
But still no effect ...
Thanks for your attention.

Using $(document).ready() is a bad idea:
http://view.jquerymobile.com/1.3.1/dist/demos/faq/dom-ready-not-working.html
It is recommended to use pageinit
=== EDIT ===
You can always use the ghetto way:
setTimeout(function(){$.mobile.silentScroll(1000);}, 1000); // scroll after 1 second

Use pagecontainershow as it triggers after page is shown and JQM performes a default scroll to page's top.
$(document).one("pagecontainershow", function () {
/* scroll */
});

Prevent inline scripts loading until Jquery has been loaded

Ok, I have a Jquery script, its function is to determine the width of the window, onload. If the width is greater than 642px it calls .load() to load an image slider. The reason for this is mobile devices will neither be served the images or js required for the slider.
This worked fine when jquery was loaded in the head. Upon moving to the footer its breaking. The code is included from the index.php. Could this be whats causing it? I would have thought once php built the page jquery parsed the content?
It appears the code is parsed before the jquery is loaded. Can anyone suggest a way to get round this please?
I have thought of creating the code as pure JS or using a delayed load, but I cant seem to figure out how to get it working.
There must be much better solutions? I feel like I’m missing something very obvious..
contents of the included script:
<script type="text/javascript">
$(window).bind("load", function() {
// code here
$(window).width(); // returns width of browser viewport
var width = $(window).width();
if (width >= 642) {
$('.slider-content').load("templates/include/slider.php", function () {
$('.slider-content').show(200);
});
}
else {
//alert('small')
}
});
</script>
Thanks,
Adam

In some environments, you must use jQuery() instead of $(). See this question.
Other than that, your problem might have to do with the document not being complete yet or binding to an event that has already passed. Try this instead:
jQuery(document).ready( function($) {
// Your code goes here. (You can safely use the $() function inside here.)
});

Can someone please tell me why this js function doesn't run on load?

I've:
//Resize tabs - height when window size changes. Don't forget to reset niceScroll
function recalc_tab_height () {
//
var wrapper_h = $(".ui-panel-content-wrap").outerHeight();
var content_h = $(".ui-content").outerHeight();
var current_h = $(".tab1").outerHeight();
var newHeight = (wrapper_h - content_h) + current_h;
//
$(".tab1, .tab2, .tab3").css({"height":newHeight}).getNiceScroll().resize();
}
//Run once onLoad
recalc_tab_height();
That is supposed to resize lyrics section on-load to fit the screen. But it doesn't run at all... any ideas why? it is inside ui.js
http://mac.idev.ge:800/mobile-radio/

try
$(function() {
recalc_tab_height();
});
instead of your last line.
$(...) is a shortcut for $(document).ready(...) and is executed as soon as your page is entirely loaded, so that you can deal with DOM element properties.

Try this : Need to set $(document).ready
$(document).ready(function(){
//Run once onLoad
recalc_tab_height();
});

To load this function either you should use this on body as
<body onload="recalc_tab_height();" >
or by jquery
$(document).ready(function() {
recalc_tab_height();
});

Wrap the function call when the dom is ready.Try like this
$(document).ready(function(){
recalc_tab_height();
});

A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $(document).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside $(window).load(function() { ... }) will run once the entire page (images or iframes), not just the DOM, is ready.
So you have to call your function inside
$(document).ready({...}); or $(window).load(function() { ... });

I changed css() to animate() and it works.

How to run a jQuery Code after loading all the images in my page?

How to run a jQuery Code after loading all the images in my page ?

$(window).load(function(){})

Checking to see that all images have loaded is slightly involved, so unless you have a pressing need to be so precise, it is much easier to check that all image and everything else has loaded:
$(window).load(function() { ... });
This makes use of the jQuery .load() method.
If you do really need to check for specifically only images, then things get a little trickier. I initially wanted to do this:
$("img").load(function() { ... }); \\ THIS IS INCORRECT!!!!!
However the above creates a jQuery object that contains all images, and then it binds function() { ... } to each of these images. So the above will trigger a function as many times as there are images on the page!
To get around this, we should check how many images there are on the page, and only fire the function once after all those images have been loaded:
$(function() {
// To keep track of how many images have loaded
var loaded = 0;
// Let's retrieve how many images there are
var numImages = $("img").length;
// Let's bind a function to the loading of EACH image
$("img").load(function() {
// One more image has loaded
++loaded;
// Only if ALL the images have loaded
if (loaded === numImages) {
// This will be executed ONCE after all images are loaded.
function() { ... }
}
});
});
jsFiddle example

$(function() {
var length = $('img').length ;
var counter = 0;
$('img').each(function() {
$(this).load(function(){
counter++;
if(counter == length) {
Callback(); //do stuff
}
});
});
});

I did something like this recently, but went about it differently.
$('img').on('load', function(){
$('img').off('load'); //detaches from load event, so code below only executes once
// my code to execute
});

Not a direct answer. Still worth referring.
Refer
Run JavaScript Only After Entire Page Has Loaded
jQuery callback on image load (even when the image is cached)
Code
$(window).bind("load", function() {
// code here
});

#Peter Ajtai answer will work except on IE's cached images. To make it work with IE, here's a solution: https://stackoverflow.com/a/3877079 or by using the imagesLoaded plugin.

For anyone using jquery this little snippet does the trick (it ensures that all images are loaded before any script inside it are run)...
$(window).bind("load", function() {
// code goes here here
});