ericinho
05-28-2003, 02:18 AM
Hello,
I was looking for a script that would load a page (big image - it's a popup window displaying portfolio work) and show a progress bar while doing it. Then when finished the preload layer would unveil the loaded page/image.
And hoorah, I found that at this place:
http://www.dhtmlcentral.com/script/script.asp?id=17
The problem is that I cannot get it to work. That is, I can get the 'test version' to work, but when I remove the lines (as indicated in the comments the author placed in the script), the script simply doesn't work. No preloader shows and the image to be loaded appears immediately in the topright corner, even though it is not fully loaded.
The script after I altered it, looks like this:
<html>
<head>
<title>DHTMLCentral.com - Free Dynamic HTML Scripts - LoadingBar Demo</title>
<meta name="Author" content="Thomas Brattli (webmaster@dhtmlcentral.com)">
<META NAME="Generator" CONTENT="Designer:Thomas Brattli (www.bratta.com)">
<meta name="KeyWords" content="DHTML, HTML, Dynamic HTML, Javascript, Cascading Style Sheets, Cross-browser, Cross browser, Javascripts, DOM, Scripts, Free Scripts,loading,bar,loadingbar,images,load,hide,wait,">
<meta name="Description" content="Dynamic HTML Central - The ultimate place to find DHTML scripts, demos, tutorials and help.">
<style type="text/css">
#divLoadCont {position:absolute; z-index:500; left:0px; top:0px; width:100%; height:100%; clip:rect(0px 100% 100% 0px); background-color:#FFFFFF; layer-background-color:#FFFFFF;}
#divLoad1 {position:absolute; layer-background-color:#000000; background-color:#000000;}
#divLoad2 {position:absolute; left:0px; top:0px; layer-background-color:#FF0A85; background-color:#FF0A85;}
#divLoadText {position:absolute; background-color:transparent; font-family:arial,helvetica,sans-serif; color:navy; font-size:14px;}
.borders { border-right-color: #F0F7F1; border-left-color: #A2B0A5;
border-top-color: #B9C8BB; border-bottom-color: #F0F7F1;
border-left-style: solid; border-right-style: solid;
border-top-style: solid; border-bottom-style: solid;
border-right-width: 1px; border-left-width: 1px;
border-top-width: 1px; border-bottom-width: 1px;
padding-right: 0px; padding-left: 0px;
}
</style>
<script language="JavaScript" type="text/javascript">
/**********************************************************************************
LoadingBar
* Copyright (C) 2001 <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli</a>
* This script was released at DHTMLCentral.com
* Visit for more great scripts!
* This may be used and changed freely as long as this msg is intact!
* We will also appreciate any links you could give us.
*
* Made by <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli</a>
*********************************************************************************/
function lib_bwcheck(){ //Browsercheck (needed)
this.ver=navigator.appVersion
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.opera5=this.agent.indexOf("Opera 5")>-1
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf("Mac")>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
return this
}
var bw=new lib_bwcheck()
/*VARIABLES TO SET START: */
numImages = 1 //How many images you have in your page
loaderWidth = 200 //The width of the loadbar
/*
All other settings, like colors fonts and stuff like that you
have to change in the STYLE section.
IMPORTANT:
To make this actually show the correct results
you have to place THIS code in all images:
onload="loadIt(1)"
Which means that your image should look
something like this:
<img src="whatever.gif" width="10" border="0" height="10" onload="loadIt(1)">
VARIABLES TO SET END: */
// A unit of measure that will be added when setting the position of a layer.
var px = bw.ns4||window.opera?"":"px";
currentImg = 0
//Document size object ********
function lib_doc_size(){
this.x=0;this.x2=bw.ie && document.body.offsetWidth-20||innerWidth||0;
this.y=0;this.y2=bw.ie && document.body.offsetHeight-5||innerHeight||0;
if(!this.x2||!this.y2) return message('Document has no width or height')
this.x50=this.x2/2;this.y50=this.y2/2;
return this;
}
//Lib objects ********************
function lib_obj(obj,nest){
nest=(!nest) ? "":'document.'+nest+'.'
this.evnt=bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+"document.layers." +obj):0;
this.css=bw.dom||bw.ie4?this.evnt.style:this.evnt;
this.ref=this.css
this.w=this.evnt.offsetWidth||this.css.clip.width||
this.ref.width||this.css.pixelWidth||0;
return this
}
//Moving object to **************
lib_obj.prototype.moveIt = function(x,y){
this.x=x; this.y=y; this.css.left=x+px; this.css.top=y+px;
}
//Clipping object to ******
lib_obj.prototype.clipTo = function(t,r,b,l,setwidth){
this.ct=t; this.cr=r; this.cb=b; this.cl=l
if(bw.ns4){
this.css.clip.top=t;this.css.clip.right=r
this.css.clip.bottom=b;this.css.clip.left=l
}else{
if(t<0)t=0;if(r<0)r=0;if(b<0)b=0;if(b<0)b=0
this.css.clip="rect("+t+"px "+r+"px "+b+"px "+l+"px)";
if (setwidth){
this.css.pixelWidth = r;
this.css.pixelHeight = b;
this.css.width = r+px;
this.css.height = b+px;
}
}
}
var oLoad2
function startLoading(){
page = new lib_doc_size()
oLoadCont = new lib_obj('divLoadCont')
oLoad = new lib_obj('divLoad1','divLoadCont')
oLoad2 = new lib_obj('divLoad2','divLoadCont.document.divLoad1')
oLoadText = new lib_obj('divLoadText','divLoadCont.document.divLoad1')
oLoad.moveIt(page.x50-loaderWidth/2,page.y50-20)
oLoadText.moveIt(loaderWidth/2 - oLoadText.w/2,10)
oLoad.clipTo(0,loaderWidth,10,0,1)
oLoad2.per = loaderWidth/numImages
}
function loadIt(ok){
currentImg ++
if (oLoad2) oLoad2.clipTo(0,oLoad2.per*currentImg,10,0,1)
if (!ok){
oLoadCont.css.visibility = "hidden"
oLoadCont = null;
oLoad1 = null;
oLoad2 = null;
}
}
</script>
</head>
<body marginleft="0" marginheight="0" bgcolor="#FFFFFF">
<div style="position:absolute; left:0; top:0"><a href="#" onclick="self.close(); return false"><img src="testimg.jpg" width="265" height="254" alt="" border="0" alt="Click to close window" onload="loadIt(1)"></a></div>
<br><br><br>
<!-- ALWAYS HAVE THIS RIGHT AFTER THE BODY START TAG -->
<div id="divLoadCont">
<div class="borders" id="divLoad1">
<div id="divLoad2"></div><br>
<div id="divLoadText">Loading...</div>
</div>
</div>
<script>
startLoading()
onload=loadIt; //- LEAVE THIS LINE WHILE TESTING. UNCOMMENT WHEN READY
</script>
<br><br><br>
CONTENT
<br><br>
</body>
</html>
what am I doing wrong and why the script isn't working?
Your help is much appreciated!
I was looking for a script that would load a page (big image - it's a popup window displaying portfolio work) and show a progress bar while doing it. Then when finished the preload layer would unveil the loaded page/image.
And hoorah, I found that at this place:
http://www.dhtmlcentral.com/script/script.asp?id=17
The problem is that I cannot get it to work. That is, I can get the 'test version' to work, but when I remove the lines (as indicated in the comments the author placed in the script), the script simply doesn't work. No preloader shows and the image to be loaded appears immediately in the topright corner, even though it is not fully loaded.
The script after I altered it, looks like this:
<html>
<head>
<title>DHTMLCentral.com - Free Dynamic HTML Scripts - LoadingBar Demo</title>
<meta name="Author" content="Thomas Brattli (webmaster@dhtmlcentral.com)">
<META NAME="Generator" CONTENT="Designer:Thomas Brattli (www.bratta.com)">
<meta name="KeyWords" content="DHTML, HTML, Dynamic HTML, Javascript, Cascading Style Sheets, Cross-browser, Cross browser, Javascripts, DOM, Scripts, Free Scripts,loading,bar,loadingbar,images,load,hide,wait,">
<meta name="Description" content="Dynamic HTML Central - The ultimate place to find DHTML scripts, demos, tutorials and help.">
<style type="text/css">
#divLoadCont {position:absolute; z-index:500; left:0px; top:0px; width:100%; height:100%; clip:rect(0px 100% 100% 0px); background-color:#FFFFFF; layer-background-color:#FFFFFF;}
#divLoad1 {position:absolute; layer-background-color:#000000; background-color:#000000;}
#divLoad2 {position:absolute; left:0px; top:0px; layer-background-color:#FF0A85; background-color:#FF0A85;}
#divLoadText {position:absolute; background-color:transparent; font-family:arial,helvetica,sans-serif; color:navy; font-size:14px;}
.borders { border-right-color: #F0F7F1; border-left-color: #A2B0A5;
border-top-color: #B9C8BB; border-bottom-color: #F0F7F1;
border-left-style: solid; border-right-style: solid;
border-top-style: solid; border-bottom-style: solid;
border-right-width: 1px; border-left-width: 1px;
border-top-width: 1px; border-bottom-width: 1px;
padding-right: 0px; padding-left: 0px;
}
</style>
<script language="JavaScript" type="text/javascript">
/**********************************************************************************
LoadingBar
* Copyright (C) 2001 <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli</a>
* This script was released at DHTMLCentral.com
* Visit for more great scripts!
* This may be used and changed freely as long as this msg is intact!
* We will also appreciate any links you could give us.
*
* Made by <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli</a>
*********************************************************************************/
function lib_bwcheck(){ //Browsercheck (needed)
this.ver=navigator.appVersion
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.opera5=this.agent.indexOf("Opera 5")>-1
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf("Mac")>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
return this
}
var bw=new lib_bwcheck()
/*VARIABLES TO SET START: */
numImages = 1 //How many images you have in your page
loaderWidth = 200 //The width of the loadbar
/*
All other settings, like colors fonts and stuff like that you
have to change in the STYLE section.
IMPORTANT:
To make this actually show the correct results
you have to place THIS code in all images:
onload="loadIt(1)"
Which means that your image should look
something like this:
<img src="whatever.gif" width="10" border="0" height="10" onload="loadIt(1)">
VARIABLES TO SET END: */
// A unit of measure that will be added when setting the position of a layer.
var px = bw.ns4||window.opera?"":"px";
currentImg = 0
//Document size object ********
function lib_doc_size(){
this.x=0;this.x2=bw.ie && document.body.offsetWidth-20||innerWidth||0;
this.y=0;this.y2=bw.ie && document.body.offsetHeight-5||innerHeight||0;
if(!this.x2||!this.y2) return message('Document has no width or height')
this.x50=this.x2/2;this.y50=this.y2/2;
return this;
}
//Lib objects ********************
function lib_obj(obj,nest){
nest=(!nest) ? "":'document.'+nest+'.'
this.evnt=bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+"document.layers." +obj):0;
this.css=bw.dom||bw.ie4?this.evnt.style:this.evnt;
this.ref=this.css
this.w=this.evnt.offsetWidth||this.css.clip.width||
this.ref.width||this.css.pixelWidth||0;
return this
}
//Moving object to **************
lib_obj.prototype.moveIt = function(x,y){
this.x=x; this.y=y; this.css.left=x+px; this.css.top=y+px;
}
//Clipping object to ******
lib_obj.prototype.clipTo = function(t,r,b,l,setwidth){
this.ct=t; this.cr=r; this.cb=b; this.cl=l
if(bw.ns4){
this.css.clip.top=t;this.css.clip.right=r
this.css.clip.bottom=b;this.css.clip.left=l
}else{
if(t<0)t=0;if(r<0)r=0;if(b<0)b=0;if(b<0)b=0
this.css.clip="rect("+t+"px "+r+"px "+b+"px "+l+"px)";
if (setwidth){
this.css.pixelWidth = r;
this.css.pixelHeight = b;
this.css.width = r+px;
this.css.height = b+px;
}
}
}
var oLoad2
function startLoading(){
page = new lib_doc_size()
oLoadCont = new lib_obj('divLoadCont')
oLoad = new lib_obj('divLoad1','divLoadCont')
oLoad2 = new lib_obj('divLoad2','divLoadCont.document.divLoad1')
oLoadText = new lib_obj('divLoadText','divLoadCont.document.divLoad1')
oLoad.moveIt(page.x50-loaderWidth/2,page.y50-20)
oLoadText.moveIt(loaderWidth/2 - oLoadText.w/2,10)
oLoad.clipTo(0,loaderWidth,10,0,1)
oLoad2.per = loaderWidth/numImages
}
function loadIt(ok){
currentImg ++
if (oLoad2) oLoad2.clipTo(0,oLoad2.per*currentImg,10,0,1)
if (!ok){
oLoadCont.css.visibility = "hidden"
oLoadCont = null;
oLoad1 = null;
oLoad2 = null;
}
}
</script>
</head>
<body marginleft="0" marginheight="0" bgcolor="#FFFFFF">
<div style="position:absolute; left:0; top:0"><a href="#" onclick="self.close(); return false"><img src="testimg.jpg" width="265" height="254" alt="" border="0" alt="Click to close window" onload="loadIt(1)"></a></div>
<br><br><br>
<!-- ALWAYS HAVE THIS RIGHT AFTER THE BODY START TAG -->
<div id="divLoadCont">
<div class="borders" id="divLoad1">
<div id="divLoad2"></div><br>
<div id="divLoadText">Loading...</div>
</div>
</div>
<script>
startLoading()
onload=loadIt; //- LEAVE THIS LINE WHILE TESTING. UNCOMMENT WHEN READY
</script>
<br><br><br>
CONTENT
<br><br>
</body>
</html>
what am I doing wrong and why the script isn't working?
Your help is much appreciated!