I'm trying to do a loader animation while page loads.
I have an index page that as a link/button to the page that I want to have the loader. When I click the link the page opens and runs the loader, but the loader never go away only when I refresh the page. After this everything works fine, the loader always disappears when I open the page.
Can anyone suggest a solution for this?
Javascript:
<script type="text/javascript">
$(window).load(function() {
$(".preloader").fadeOut("slow");
});
</script>
HTML:
<div class="preloader"></div>
Try the same with document ready:
$(document).ready(function() {
$(".preloader").fadeOut("slow");
});
An assumption here is, your loader is already there in the HTML and is visible by default.
Related
I am trying to attempt a page loading only for the first loading screen. This means when I load the page, I could have a preloading screen, but not on every page load or reload (not on the inside pages).
How could I use
window.onload
function to achieve this?
Could anyone suggest?
Thanks and regards
You can use
<script>
if (!localStorage['done']) {
localStorage['done'] = 'yes';
myFunction();
}
</script>
If you set your loading design to cover the page and then simply using Jquery you can hide it. If your loading the new pages 'inline' without refreshing the window then you will only see your loading page when you open the site originally
document.onreadystatechange=function() {
if(document.readyState=="complete") {
$(".loading").hide();
}};
I have a page which contains heavy traffic . It is fetching data from multiple servers and showing in the page . It takes usually 3-4 minutes for the page to complete the loading . Please take a look at some of the partial page data
All i need is a spinning gif or a loader to get over the page so that user can't click any link unless the page gets loaded completely .
I have tried the following code
<script language="JavaScript" type="text/javascript" src="JavaScript/jquery-1.3.2.js"></script>
<script>
hideLoading = function() {
$('.loading').fadeOut(20000, function() {
$(".content").fadeIn(10000);
});
};
hideLoading();
</script>
HTML:
<body>
<div class="loading">Loading...</div>
<div class="content">
The problem is when user reloads the page the browser loader spins but the content in the page doesn't get my loader to get over the content .
It only happens until the DOM gets loaded .
All I want is to get the loader to work as soon as user clicks the reload icon or hits enter or F5 or ctrl+f5 for page reload . Hope i made myself clear.
Place your jquery code in document.ready function and make some delay on that function like following :-
Add this jquery code at bottom of page.
$(document).ready(function(){
hideLoading = function() {
$('.loading').fadeOut(20000, function() {
$(".content").fadeIn(10000);
});
};
setTimeout(function(){
hideLoading();
}, 1000);
});
May be it will help you.
I use the tabber script shown on http://www.barelyfitz.com/projects/tabber/ to provide a tabbed page. Generally it works well, and my only complaint is that the tabs don't show until the content has fully loaded, and then there is a jump as the screen writes itself properly. (See www.littlehotels.co.uk/spain/noves.php for an example of what I mean.)
I thought the solution would be to hide the div containing all the tabbed content like this
<div class="tabber" id="tabber" style="display:none">
and then reveal it with a small javascript function which is called by
<body onLoad="ShowTabber()">
The javascript itself is
<script type="text/javascript">
function ShowTabber() {
document.getElementById('tabber').style.display = "block";
}
</script>
My little function appears to stop the external javascript (tabber.js) from working because the page displays the content of all the tabs in line, without the the tabs themselves at the top. This is the same result as if I delete the reference to the external script from the of the page.
What am I doing wrong?
More explanation:
When the tabber.js file is missing, the page displays the content of all the tabs one after the other(as you would expect). Running the script as explained above has exactly the same effect; hence I am concluding that the script blocks the main javascript from running.
'onLoad': function(argsObj) {
/* Display an alert only after tab */
if (argsObj.tabber.id == 'tab') {
alert('Finished loading tab!');
}
}
By default select a tab.Then after completion loading that tab it will show a message.
see here
Well, I solved the problem (sort of) with jQuery, but it has now raised another problem.
In response to PSR, I looked more deeply into jQuery. It would have been too complicated to change over to .tabs(), but I did use jQuery to hide and show some divs at the appropriate moments.
I placed a simple little line in fron of the tabber div to show a "Loading" message.
<div id="loading" align="center" style="position:relative;top:70px"><h6>Loading ...</h6></div>
Then I put this script in the head, under the jQuery line.
<script type="text/javascript">
$(document).ready(function(){
$("#tabber").hide();
$("#loading").hide();
$("#loading").fadeIn(1000);
});
$(window).load(function(){
$("#loading").hide();
$("#tabber").fadeIn(300);
});
function checkResize(id){
var win=document.getElementById(id).contentWindow.document.body.scrollHeight;
alert(win);
}
</script>
That works fine, but a couple of the tabs have iframes for their content, and this script breaks autoResize script I use on those iframes. I'll open a new question to see if anyone has an answer to that.
Some background;
By default when you click a link to a separate HTML page JQM loads the first data-role="page" on that page and attaches it to the DOM of the first page, the thing is JQM only loads that page div and not any scripts etc. that are outside that container.
I have a jQuery mobile app with 5 pages "login.html" "menu.html" "account.html" "settings.html" ..etc
I change pages with like;
$.mobile.changepage("account.html")
Also I put all my page load logic to my first page login.html like this;
<script>
$(document).on('pageinit', '#loginpage', function() {
//do some stuff run some ajax scripts and add some html to its body
});
$(document).on('pageinit', '#accountpage', function() {
//do some stuff run some ajax scripts and add some html to its body
});
$(document).on('pageinit', '#settingspage', function() {
//do some stuff run some ajax scripts and add some html to its body
});
</script>
While this app works well, Problem is I find it very fragile and hard to survive from unexpected errors. for example;
Since how every page's body html will load is defined in login.html, this means if any moment user manually refreshs any of these pages, the page will load without running those scripts and load an empty page a without a body. In that moment since the correct DOM is deleted from memory, user is stuck in an app with full of empty pages, only way is he is smart enough to go and type "login.html" to address bar and only then all process can start smoothly.
I think we cant %100 hide address bar, it is visible again after scroll down.
SO this is one problem I come up with, some other weird things can happen and if somehow the DOM gets corrupted only way to use app again is typing login.html address bar, which users probably will not thing about it.
How can I make this app more robust like detecting any DOM corruption or refresh and forward the user to login.html, so he does not stuck in an app with empty pages.
One way to alleviate some pain is to put your page-specific scripts inside data-role="page" element in the appropriate html files and keep scripts that are the same for every page outside that element (at the and of the body and/or head).
That way even if the user refreshes the page all necessary scripts will still be executed.
One problem though, before binding any handlers you need to unbind them first. Otherwise you'll end up having multiple handlers attached.
To illustrate this:
in login.html (updated):
<div data-role="page" id="loginpage">
<script>
$(document).off('pageinit', '#loginpage').on('pageinit', '#loginpage', function() {
$(document).off('click', '#btnaccount').on('click', '#btnaccount', function(){
$.mobile.changePage("jqmaccount.html", {reloadPage: true});
});
console.log("paginit in loginpage");
});
$(document).off('pageshow', '#loginpage').on('pageshow', '#loginpage', function() {
console.log("pageshow in loginpage");
});
</script>
<div data-role="content">
<a id="btnaccount" href="#" data-role="button">Account</a>
</div>
</div>
in account.html (updated):
<div data-role="page" id="accountpage">
<script>
$(document).off('pageinit', '#accountpage').on('pageinit', '#accountpage', function() {
$(document).off('click', '#btnlogout').on('click', '#btnlogout', function(){
$.mobile.changePage("jqmlogin.html", {reloadPage: true});
});
console.log("pageinit in accountpage");
});
$(document).off('pageshow', '#accountpage').on('pageshow', '#accountpage', function() {
console.log("pageshow in accountpage");
});
</script>
<div data-role="content">
<a id="btnlogout" href="#" data-role="button">Logout</a>
</div>
</div>
In this setup if the user refreshes account.html the Logout button on that page will still work.
I have 2 page:
page 1 like this
In page 2. I want after click button it show in current page like this:
some code of page 2
<script type="text/javascript">
$(document).ready(function(){
$("my_button").click(function(){
//I want show page in page 2 like here images.
})
})
</script>
if the tool is a page rendered server side
(ex /uploadtool.php)
load the content of that page in an iframe inside a dialog
example :http://clarkupdike.blogspot.com/2009/03/basic-example-of-jquerys-uidialog.html
Look into dialogs. jQuery would be your best option here.
<div class="your-upload-div" style="display:none;">
Your upload window page markup?
</div>
<script>
$(document).ready(function() {
$('.my_button').live("click", function () {
$('.your-upload-div').show()
$('.close-btn').hide()
});
});
</script>
Then position it with css.
Pretty sure dialogs would be a good idea here though, I typically use http://fancybox.net/