jquery percentage preloader won't start

gribbs100 · 01-31-2011, 04:31 PM

Hello Everybody,

I am building a website that has a high resolution background image on the index page and the page also includes some JQuery functions ( divs sliding in, etc) All of the current JQuery functionality worked fine until I tried to add in this preloader. Now nothing works.

What i need to do is include a jquery percentage preloader bar that lays over the page along with a black background). It needs to preload the content of the page before moving on to the next function.

I downloaded the preloader plugin for jquery ( source link below) and added script to my current js function file to call the preloader. I just dont know how to adjust that script so that upon visiting the page, the preloader starts and when the percentage bar/percentage counter reach 100%... it then move on to the next function in the js file.

Below is my html and my js file.

this is where I got the preloader code from but theirs uses a button to trigger but I need mine to auto start

http://digitalbush.com/projects/progress-bar-plugin/

The idea here is to show a loading bar and percentage counter like you see on flash websites but without using flash.

HTML

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>-</title>

<link href="scripts/mycss.css" rel="stylesheet" type="text/css" />

<link href="scripts/progressbar.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>

<script type="text/javascript" src="scripts/myscript.js"></script>

<script type="text/javascript" src="scripts/progressbar.js"></script>

</head>

<body>

<div id="preloader"> 

<div id="progressbar"> </div>

</div>

<div id="blackcurtain"> </div>

<div id="wrapper">

<div id="index_main"> </div>

</div>

<div class="push"> </div>

<div id="grid"></div> 

</div> <!--wrapper close-->

<div class="footer">

<div class="footer_inner">Website By: </div>

</div><!--footer close-->

</body>

</html>

MY JQUERY (myscript.js)

Code:

$(window).load(function() {
$("#preloader").reportprogress(0);
('#wrapper').fadeIn(800,function(){
	$('#blackcurtain').animate({height:'toggle'},400,function(){
		$('#grid').animate({height:'toggle'},350,function() {
			$('#index_main').delay(200).fadeIn(800)
			$('.footer').delay(200).fadeIn(800)
				});	
	            });			   
                });
                });

I'm not sure how to get this thing working. Any help to get this thing working would be greatly appreciated. I'm trying to learn this stuff but this is quite confusing to get working.