I have a long scrolling page, so i want to load contents of the page in sequence.
<div id="one">one.php</div> <div id="two">two.php</div> <div id="three">three.php</div> on page load, i want to load content of only DIV id ONE, after that DIV id TWO then DIV id THREE.. and so on..
How do i achieve that? I created 3 files (one.php, two.php, three.php) tried .load() but i am not able to make a sequence. Please help!
Try using, jQuery.load();,
$("#one").load("../content1.php", function() { $("#two").load("../content2.php", function() { // likewise }); }); You need to use ajax. This method allows you to specify what will happen on success. So once you will load first div's contents, in success handler load second div's contents and so on. Something like this:
<div id="div1"></div> <div id="div2"></div> <div id="div3"></div> $.ajax({ url: 'div1.html', type: "GET", dataType: "html", success: function (response) { $("#div1").html(response); $.ajax({ url: 'div2.html', type: "GET", dataType: "html", success: function (response) { $("#div2").html(response); $.ajax({ url: 'div3.html', type: "GET", dataType: "html", success: function (response) { $("#div3").html(response); } }); } }); } }); But remember - it will not work with local files - you need to set up some web server, as at least Chrome doesn't want to load local resources via ajax. Of course there is a way to change Chrome options but I wouldn't play with it.
You can do this :
$('#one').load("one.php", function() { // first div loaded $('#two').load("two.php", function() { // second div loaded $('#three').load("three.php", function() { // third div loaded }); }); }); If you mean you are using jQuery.load to load content to your divs, the .load function has a callback function parameter (that is, a function to call after the contents have completed loading). With this you can assure that you can load them in the order you need (see http://api.jquery.com/load/)
For example:
$("#one").load(url, function(response, status, xhr) { $("#two").load( ... etc ) }); 2 ways:
1) use a timer to load the page content every 2000 ms etc. 2) an event should be fired to tell JS that next part should be loaded [example is the feed in fb, once you scroll down it starts to load the latter part]
loading can be simply done by $('#one').load("one.html");
Option 1
Use setTimeout
setTimeout(function() { $("#one").show(); }, 1000); setTimeout(function() { $("#two").show(); }, 2000); setTimeout(function() { $("#three").show(); }, 3000); Option 2
Function 2 Function Transition.
$(document).ready(function() { $("#one").show(); showTwo() }); function showTwo() { $("#two").show(); showThree() } function showThree() { $("#Three").show(); } NOTE: For both, you need to first hide them onload. To do this, use the below function
$(document).ready(function() { $("#one").hide(); $("#two").hide(); $("#three").hide(); }); 