when i click on navigation(home etc) its working perfectly but only 2 or three times.when i click again on he navigation the image i stop loading(not displaying). thanks for your answers.
JS
$(document).ready(function(){
$(document).ajaxStart(function(){
$("#loading").show();
});
$(document).ajaxComplete(function(){
$("#loading").fadeOut();
});
$("ul li a").click(function(e){
e.preventDefault();
abc=$(this).attr("href");
$(".right-content").load(abc);
}); //`enter code here`
});
HTML
<div id="nav">
<ul>
<li><a href="abc.php">Home</a></li>
<li><a href="abc.php">About Us</a></li>
<li><a href="form.php">Add Page</a></li>
<li><a href="abc.php">Contact-Us</a></li>
<li><a href="new_index.php">Login</a></li>
<li><a href="signup.php">Sign-Up</a></li>
<li><a id="log" href="logout.php">
</ul>
</div>
IMG
<div id="loading" style="display:none;width:69px;height:89px;border:1px solid black;position:absolute;top:50%;left:50%;padding:2px;">
<img src='loading.gif' width="64" height="64" /><br>Loading..</div>
You haven't closed your tag properly at logout anchor. That might be causing problem;
Replace
<li><a id="log" href="logout.php">
with
<li><a id="log" href="logout.php">Logout</a></li>
See working demo: http://jsfiddle.net/bLUZM/