Page is a not externally linkable
jayvee88 - 3:21 pm on Feb 7, 2013 (gmt 0)
I once used it on my blog, but for other usage.. Well you need to use jquery..
I just found this one..
If you want to use jQuery, then you'll have to download it, then link to it in your document:
<head>
...
<script src="jquery.js" type="text/javascript"></script>
...
</head>
And here's some jQuery which will do what you're after:
Code JavaScript:
$(function(){
// Create overlay and append to body:
$('<div id="overlay"/>').css({
position: 'fixed',
top: 0,
left: 0,
width: '100%',
height: $(window).height() + 'px',
background: 'white url(img/loading.gif) no-repeat center'
}).hide().appendTo('body');
// Assign click function:
$('#ajax-link').click(function(){
// SHOW overlay
$('#overlay').show();
// Retrieve data:
$.ajax({
url: 'path/to/page.html',
type: 'GET',
success: function(data){
// onSuccess fill #ajax-box with response data:
$('#ajax-box').html(data);
// HIDE the overlay:
$('#overlay').hide();
}
});
// Prevent default action of link:
return false;
});
});
In order for this to work you'll need to have the following markup in your document:
<a href="linky.html" id="ajax-link">Linky</a>
<div id="ajax-box">
<!-- This is where the response data will go (from Ajax) -->
</div>