Loading Pages Using jquery
<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();
topbanner();
sidebanner();
function content() {
$.ajax({
type: "POST",
url: "content.php",
data: "" ,
beforeSend: function() { $("div#content").html('<span class="loading">Loading...</span>'); },
cache: false,
success: function(data){
$("#content").html(data);
}
});
}
function topbanner() {
$.ajax({
type: "POST",
url: "topbanner.php",
data: "" ,
beforeSend: function() { $("div#topbanner").html('<span class="loading">Loading...</span>'); },
cache: false,
success: function(data){
$("#topbanner").html(data);
}
});
}
function sidebanner() {
$.ajax({
type: "POST",
url: "sidebanner.php",
data: "" ,
beforeSend: function() { $("div#sidebanner").html('<span class="loading">Loading...</span>'); },
cache: false,
success: function(data){
$("#sidebanner").html(data);
}
});
}
});
</script>
<style>
body
{
font-family:Arial, Helvetica, sans-serif;
}
#main
{
width:400px; border:solid 2px #dedede; margin-top:30px; height:400px
}
#topbanner
{
height:100px; border-bottom:solid 2px #dedede
}
#content
{
float:left;width:260px; height:400px
}
#sidebanner
{
float:left;width:130px; height:300px;border-left:solid 2px #dedede
}
.loading
{
color:#cc0000;
}
</style>
<div id="main">
<div id="topbanner"></div>
<div id="content"></div>
<div id="sidebanner"></div>
</div>
<?php
//content.php
echo '<h2>Content.</h2> ';
?>
<?php
//topbanner.php
echo 'Top Banner';
?>
<?php
//sidebanner.php
echo 'Side Bar';
?>
