Loading Banner Advertisements with Jquery

Loading Banner Advertisements with Jquery

Javascript Code
Contains javascript code. Using jquery ajax function.

<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
content(); // 1 content block
topbanner(); // 2 top banner
sidebanner(); // 3 side banner

//Content Block

function content() 
{
$.ajax({
type: "POST",
url: "content.php", //Content Page
data: "" , 
beforeSend: function() 
{
$("div#content").html('<span class="loading">Loading...</span>');
},
cache: false,
success: function(data)
{ 
$("#content").html(data);
}
});
}

//Top Banner Block

function topbanner() 
{
$.ajax({
type: "POST",
url: "topbanner.php", //Top banner File
data: "" , 
beforeSend: function() 
{ 
$("div#topbanner").html('<span class="loading">Loading...</span>'); 
},
cache: false,
success: function(data)
{ 
$("#topbanner").html(data);
}
});
}
//Side banner funtion same like topbanner.

});
</script>

//HTML Code

<div id="main">
<div id="topbanner"></div>

<div id="content"></div>

<div id="sidebanner"></div> 
</div>

topbanner.php
Contains PHP and HTML code.

<?php
echo '<a href=""><IMG src="topbanner.png"  /></a>';
?>

CSS Code

#main
{
width:900px; border:solid 2px #dedede; margin-top:30px; height:600px
}
#topbanner
{
height:100px; border-bottom:solid 2px #dedede
}
#content
{
float:left;width:750px; height:498px
}
#sidebanner
{
float:left;width:148px; height:498px;border-left:solid 2px #dedede
}
.loading
{
color:#cc0000;
}