Welcome to WebmasterWorld Guest from 54.162.226.212

Forum Moderators: ocean10000

Message Too Old, No Replies

Classic ASP issue

(ok to post here?)

     
4:40 am on Jun 27, 2012 (gmt 0)

10+ Year Member



Hi

We have a page that's can take a while to load depending on the number of suppliers. Most pages load quickly but some can be slow.

Is there a way in classic ASP to show some sort of Egg Timer effect while the slower pages load? Is is possible to grey out the page while it loads?

I've googled around but cannot find a solution.

Thanks

Mick
4:56 am on Jun 27, 2012 (gmt 0)

10+ Year Member



Sorry. Further googling around found a solution. Thanks. Mick
8:10 pm on Jun 27, 2012 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



Can you tell us what your solution was to help others who find themselves in a similar situation.
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>


 

Featured Threads

Hot Threads This Week

Hot Threads This Month