PDA

Click to See Complete Forum and Search --> : Expanding image. timing glitch

bol
10-11-2004, 09:33 PM
I have included an expand function in my page, which makes use of the css 'clip' attribute to reveal the title bar image. The script was kindly donated to me by fang I seem to remember.... not very good with names.

It runs fine on local testing but when online the effect is spoiled by a timing glitch.

the script is here, I'll run through what happens at the bottom.

<script type="text/javascript">
<!--
var Imgwidth=-1;
var timeoutID=null;
function makeTheImageWipeAcross() {
Imgwidth++;
document.getElementById('onTop').style.clip="rect(0px, 678px, "+Imgwidth+"px, 0px)";
if(Imgwidth<=147) {
timeoutID=setTimeout("makeTheImageWipeAcross()", 1);
}
else {
clearTimeout(timeoutID);
}
}
//-->
</script>

html....

<body onload="makeTheImageWipeAcross();">
<div id=topImage><img id="onTop" src="images/aboutEn.jpg" height="147" width="678" name="image" align="right">

in testing the image 'wipes' across the layer background, giving the appearance of animation. Online however the image appears fully loaded before the function begins. Obviously this is a timing error caused by the time it takes for the rest of the page to download. What would be the best way of solving this problem so that the image starts off hidden and only appears once it has been downloaded and the JS function is ready to run. I guess what I'm really not sure about is the order in which the browser loads up the script.

Sorry if this explanation is a bit garbled. Thanks in advance.
HaganeNoKokoro
10-12-2004, 01:17 AM
You could put a little script right after you declare the "topImage" div

<script type="text/javascript">
<!--
var Imgwidth=-1;
var timeoutID=null;
function makeTheImageWipeAcross() {
Imgwidth++;
document.getElementById('onTop').style.clip="rect(0px, 678px, "+Imgwidth+"px, 0px)";
if(Imgwidth<=147) {
timeoutID=setTimeout("makeTheImageWipeAcross()", 1);
} else {
clearTimeout(timeoutID);
}
document.getElementById("topImage").style.visibility="visible";
}
//-->
</script>

html....

<body onload="makeTheImageWipeAcross();">
<div id="topImage">
<script type="text/javascript">
document.getElementById("topImage").style.visibility="hidden";
</script>
<img id="onTop" src="images/aboutEn.jpg" height="147" width="678" name="image" align="right">

That way it should hide the div until the whole page has loaded (and then the onload handler gets called, un-hiding the image. I haven't tested this, but it should probably work.
Fang
10-12-2004, 01:40 AM
Pre-load all objects (images).

Try adding this:
function checkPage() {
if (document.readyState=="complete") {
clearTimeout(timeoutID);
makeTheImageWipeAcross();
}
timeoutID=setTimeout("checkPage()", 100);
}

Change the onload to checkPage()
bol
10-12-2004, 02:46 AM
Thanks, I'm kicking myself at the moment.(see below)


that checkpage function seems really useful, have you used it before? and what for? Also I'd like to know are "readyState" and "complete" a built in keyword and value? If so what other values can readyState return?

And now, for something completely different...
(after preloading images)...
<style...>
img#onTop {
position: absolute;
clip: rect(0px 0px 0px 0px);
}
</style>...etc

The above seems to solve the problem... *kicks self* *again* I guess it hides the image until the function runs :)

I can't quite believe that I found an answer that was different to yours, which works....If you can see any problems with it let me know, if theres not a problem then sorry for posting this on the JS board when there was a CSS answer.

Thanks once again
javaNoobie
10-12-2004, 03:18 AM
readyState is a reserved word. I believe it works for IE 4+ browsers only. Read more here (http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/readystate_1.asp)