Jquery ajax content with animate effect

I was working on a project and find myself in need of loading a content through ajax without PHP verification.

So after I finished I thought that will be cool to make a tutorial because it will be helpful for some of us.

Basically what this tutorial is all about?

Here is the stand alone example:


Let’s just say you have a slider or a box, and you need over it to add another box that has content.
And you need to take that content dynamically but you don’t want to keep that content in the same page or to create a MySql query in that page.
That’s why we will take the content using jquery ajax plus we will make a jquery validation to see if the content is empty.

First let’s create the HTML:

<div class="wrapper">
  <div style="position:absolute; z-index:5; width:600px;">	
   <div class="ajax_content"></div>
   <div class="right mag_right_big content_slider">
     <a href="javascript:;" class="slider_link">Load Content</a>
    </div>
   </div>
<div>
<div style="padding:20px;">
 Lorem Ipsum is simply dummy text of the printing and typesetting industry.
 Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
 unknown printer took a galley of type and scrambled it to make a type specimen book. It
 has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
 It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
 with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
/div>	
</div>

We have the main “wrapper” who holds the content.
Furthermore we have the box that has the position:absolut proprety.
This is the box that will have the dynamic content plus the trigger button.

As you can see there is an empty div tag in this box:

<div class="ajax_content"></div>

In this div we’ll call the ajax content.

Secondly the CSS:

html, body {
 padding:0;
 margin:0;
 font-size:14px;
 font-family:Arial,sans-serif;
 line-height:20px;
}
.wrapper {
 margin:0 auto;
 width:600px;
 border:1px solid #ccc;
 margin-top:20px;
 border-radius:7px;
 background:#FCFCFC;
 position:relative;
}
.right {
 float:right;
}
.clear {
 clear:both;
} 
.content_slider {
 background:#f90;
 color:#fff;
 padding:10px;
 cursor:pointer;
 border-radius:6px;
}
.offers_content {
 display:none;
}
.ajax_content {
 border:1px solid #ccc;
 border-radius:7px;
 display:none;
 margin:-1px;
 background-color:#ffc;
 padding:20px;
}

If we brake this CSS into pieces there’s not much to say:

We have the #wrapper who holds all the content.
What is important is the class .ajax_content and .content_slider.

Thirdly the JavaScript

function content_load(){
 $.ajax({
   url 	: "content_page.html",
   type : 'get',
   success : function (data) {
    if(data != ''){
     $('.slider_link').click(function(ev){
	ev.preventDefault();
	$(".ajax_content").animate({
	  height : 'toggle',
	  top : '+=50'
	}, 100).html(data);
       return false;
     })
    }else{
        $(".content_slider, .ajax_content").remove();
    }
  }			
 })
}
$(document).ready(function(){
 content_load();
})

I created a function called content_load(). What it does it loads the content from the specify page through ajax then inserts it into the ajax_content div tag.

$.ajax({
 url 	: "content_page.html",
 type : 'get',

In the first lines we tell the ajax where is the link and what method to use (jquery ajax by default use get method).

 success : function (data) {
    if(data != ''){
     $('.slider_link').click(function(ev){
	ev.preventDefault();
	$(".ajax_content").animate({
	  height : 'toggle',
	  top : '+=50'
	}, 100).html(data);
       return false;
     })
    }else{
        $(".content_slider, .ajax_content").remove();
    }

Furthermore we check if it was success and did found our URL then we can move forward.

The if statement:

  if(data != '')

We check if our page has content or is empty. If it has content then we can go further. And if it doesn’t have any content then we remove the button and the container where the content should enter.

$('.slider_link').click(function(ev){
ev.preventDefault();
  $(".ajax_content").animate({
   height : 'toggle',
   top : '+=50'
 }, 100).html(data);
   return false;
})

If you click the button then we do the animate function. So what this animate do?
Basically it toggles from top to bottom and the “100” represents the speed.

After he does the toggle animate we insert the content that we received through “data” into ajax_content div.
Here we have to specify “html(the content received thorugh ajax)”.

Finally we call our function on DOM ready:

$(document).ready(function(){
 content_load();
})

Well that’s it. Let me know what you think.

Here is the stand alone example:

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.