Question
I want to play a loader when any page is loading and it work stop when complete page is loaded. Any idea?
i am new in jquery or javascript.
Just put a DIV on your page immediately with the loading graphic. Put this script anywhere on your page or at the top of an external script file:
$('BODY').append('<div id="loading"><img src="images/loading.gif" /></div>');
Obviously you'll need to style it to position it wherever you want. We do it this way rather than just hard-coding it into the page content so that anyone with JavaScript disabled won't see it.
Then attach to the load event to hide the loading DIV once the page is done. Put this script at the bottom of your page or inside a $(document).ready().
$(window).load(function() {
$('#loading').hide();
});
You need to listen the event onload
window.onload = function() {
// do something
}
or in jquery
$(window).load(function() {
// do something
});
but with jquery a think is better to use :
$(document).ready(function() {
// do something
});
You can use ajaxStart and ajaxStop methods.
Demo:
http://www.balam.in/personal/triponetDemo/pre-loader.html
Click on view source to see the CSS and javascript.
Have a div with id as loading and style the div to show the ajax spinner. Whenever an ajax method is triggered it will show the loading div and when the ajax request is completed, it hides the loading div.
Note that you need to have the loading div in all the pages where ever you want to show it.
Well in case you want to show the ajax spinner on refresh,
check the link below:
http://www.balam.in/personal/triponetDemo/pre-loader-refresh.html
View source to see the implementation
Everytime you refresh it will show the ajax spinner and when the DOM is ready it hides the ajax spinner.
Related
Two questions.
When i'm loading to div file via jQuery .load()
$('.class').click(function(){
$(this).load("file.php");
});
file.php is loading properly, but whenever i click on it (doesn't matter where, just in file.php zone), page is blinking. Something like page refresh on click. Is there a way to prevent that?
Also the position of this page is always relative to div. Why doesn't position: absolute; on body in seperate css file for file.php work for file.php? I want to reset the position of file.php to be on top of website (not z-index). Thanks.
Your code
$('.class').click(function(){
$(this).load("file.php");
});
says any time you click in that div, (re)load the contents.
You may want to use jQuery's one method instead
$('.class').one("click", function(){
$(this).load("file.php");
});
which will only execute the first time you click inside the div.
As to position, we'd need to see code. Possibly one of your parent elements has position: relative?
Easy way.
$('.class').one("click", function(){
$(this).load("file.php");
});
Also is better to use .ajax() for this to have more options and better control.
.load() sometimes can first destroy content and then load new one. If you load bunch amount of data, that can made blink effect.
I'm using the Lightbox2 script and the content of my page is loaded via an AJAX request.
I don't find any function to attach new images or initialize Lightbox2 after an AJAX request, How can I make that in order to use Lightbox2 for images loaded via AJAX ?
Léo
I had to reinitialize lightbox in order to detect new images. I have done that like this:
window.lightbox.init();
I placed this code in my success handler of ajax call after I have added the new content:
contentContainer.empty().html(data);
From the documentation files: http://lokeshdhakar.com/projects/lightbox2/
You do not need to initiate anything, any image link with the data-lightbox attribute like this:
Image #1
will work automagically even if loaded by AJAX as soon as you add it to your DOM.
EDIT: After having taken a look at the lightbox script, you may have to change as well the line #51:
$('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]', function(event) {
into this:
$('body').live('click', 'a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]', function(event) {
I'm building a JQuery mobile site which has an image slider on 2 pages. The sliders are activated using the following JS:
$(function () {
$("#slider").excoloSlider();
});
where '#slider' is the name of the div that gets rendered as the slider.
I have this slider on the 2 pages and have given both the same id, and don't want to insert the above code into both pages. To make things easy I want to be able to make add the above code into a.js file that I'm referencing at the top of both pages.
However, the script only kicks in when one of the pages are the first page to be navigated to. So, I assume this means the code is only being called in the once, and due to the AJAX loading of the subsequent page, it isnt called when this new page loads.
So, how can I run the code to affect any/all pages which feature the slider?
I dont know how many times you have to call .excoloSlider(); function. In case you have to call it each time the page is visited, then you need to use any of these page events, pagecontainershow or pagecontainerbeforeshow.
If you use pagecontainershow, you can run .excoloSlider(); on #slider even if you have the same id in a different page. This way, you specify in which page to look for #slider.
$(document).on("pagecontainershow", function () {
var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
/* check if #slider is within active page */
var slider = activePage.find("#slider").not(".slider");
if(slider) {
slider.excoloSlider();
}
});
Update
I have added .not(".slider") selector to exclude already rendered slider. The function .excoloSlider() will be called on new sliders only.
Demo
Try to use class instead of id since id is unique, then you can change your jQuery code to:
$(function () {
$(".slider").excoloSlider();
});
Use jQuery Mobile API for the navigation system
$(window).on( "navigate", function( event, data ) {
$("#slider").excoloSlider();
});
Edit
Use pageinit
From the jQM docs:
Important: Use $(document).bind('pageinit'), not $(document).ready()
The first thing you learn in jQuery is to call code inside the
$(document).ready() function so everything will execute as soon as the
DOM is loaded. However, in jQuery Mobile, Ajax is used to load the
contents of each page into the DOM as you navigate, and the DOM ready
handler only executes for the first page. To execute code whenever a
new page is loaded and created, you can bind to the pageinit event.
This event is explained in detail at the bottom of this page.
I'm using jquery to load my website content once its fully loaded. That works great.
jquery code
function check() {
$("#content").load('items.html');
}
$(document).ready(function() {
check();
});
html
<div id="content">
</div>
Is there a way without refreshing the whole page to dynamically load html element (div) when user clicks on one of the items which were already loaded('items.html')?. On one click I want to remove already loaded 'items.html' inside #content div and load new div from any.html file.
So basically, I need to show more info for that particular item by dynamically replacing already loaded items.html and adding new div instead.
I managed to load new html page by adding anchor tags on every item, but it would be much better if I could load only one part(div) of a html file and not a whole page, that way I can write all items informations in only one html file, and then add those div's dynamically when user clicks on any item.
function check() {
$("#content").load('items.html #loadable'); // #ID to load
}
$('#loadCont').click(check);
main page example
page 2 example
You might also want to put this somewhere
$.ajaxSetup({ cache: false });
https://api.jquery.com/jquery.ajaxsetup/
As seen from the demo, .load() does already content-replacement, so no need to .empty() or .html('') beforehand.
Simple.Try to call the check() function on clicking of the element
$('element').click(function(){
check();
});
This problem has bugged me for some time.. If I load something in through AJAX, I have to have the javascript inside the AJAX loaded file (or call an external JS).
How can I make AJAX loaded content be controlled by the master or parent page??
I'd like to take control of all links to pass them through javascript (jquery) and do some fun stuff, but I don't really want to make it an external JS and use $.getScript. I just want my main javascript to be able to work with ajax loaded content.
(Here's an example)
$('a').click(function(e){
e.preventDefault();
// Fun stuff
})
Bind your method, using .on(), to the closest parent container that isn't replaced. For example:
$(function(){
$('body').on('click', 'a', function(e){
e.preventDefault();
// Fun stuff
})
});
See: http://api.jquery.com/on/
Can you show your full example? After you load the content you want trough AJAX you can control the content by Javascript after you have appended it to the DOM.
For example:
success: function(data) {
$('#newContent').hide().html(data)
.find('a').click(function(e) {
e.preventDefault();
});
}