jQuery Slider with Ajax



HTML:

Use the same two interlaced <div>-elements like in "Overflow hidden animated"-tutorial and add a navigationBar and one slider below.


<table id="navigationBar"> 
    <tr> 
        <td><a onclick="left()">«</a></td> 
        <td><a onclick="ajax('Test1')" >click 1</td> 
        <td><a onclick="ajax('Test2')" >click 2</td>
        <td><a onclick="ajax('Test3')" >click 3</td> 
        <td><a onclick="ajax('Test4')" >click 4</td> 
        <td><a onclick="right()">»</td> 
    </tr>
</table> 
<div id="slider"> </div>

CSS:

Set the navigationBar to position:absolute above the slider.


#navigationBar
{ 
    position:absolute; 
}

jQuery:

Use the += operator for the margin-left slider animation.


$("#slider").animate({ 
    marginLeft:"+=55px", 
},700); 

Demo: Increment or decrement the margin position for the slider with special arithmetic operators (+= and -=).

jQuery:

Use the .load() function for AJAX-interaction, which load data from the servere, depending on what was returned from the requesting test.html.


$('<div>').load(
    "test.html", function(data){ alert("Data Loaded: " + data);
});

jQuery:

Initialize the old and new content befor jQuery.animate()-function is called.

Initialize the old and new content for sliding from left to right:


$("#oldContent").css("float","right"); 
$("#newContent").css("margin-left","-600px");

... and initialize the content for sliding from right to left:


$("#oldContent").css("float","left"); 
$("#newContent").css("margin-left","600px");

jQuery:

Remove the old content and jQuery.queue() the operation till the jQuery.animtion- and jQuery.remove-functions were finished, afterwards jQuery.dequeue() gives the queue free, do the next operation in queue and for a clean coding.


$("#old").remove().queue(function(){ 
    ready=true;
    $(this).dequeue();
});

Demo:

 
1.) Zeit für Dich, Deinen Körper, Deine Seele, das ist heute unser Motto, Gönne Dir daher diese Stunden, entspanne und genieße Yoga, Meditation, gegenseitige Massage, das Gespräch mit anderen bei ayurvedischem Tee und frischem Obst und eine Entspannung mit Phantasiereise.

download:
Slider_with_Ajax-jQuery_1.7.1.zip
dependencies: jQuery +1.7.1
Slider_with_Ajax-jQuery_1.6.1.zip
fixes: Use .load() instead of $.get()
dependencies: jQuery +1.6.1
Slider_with_Ajax-jQuery_1.4.4.zip
dependencies: jQuery +1.4.4

© Kometschuh.de | Impressum | GitHub | Facebook |