irt.org Home Articles FAQs XREF Games Software Instant Books BBS About FOLDOC RFCs Feedback Sitemap
irt

Q908 Is it possible to set up some kind of sliding bar relative to the number/size of pictures or total downloading time, so that my visitors would know how long to wait?

You are here: irt.org | FAQ | DHTML | Q908 [ previous next ]

The following demonstrates the use of layer clipping - which gives the impression of a sliding layer.

<span id="sphere" style="position:absolute; width:500; height:50;">
<img src="dot.gif" width="500" height="50">
</span>

<script type="text/javascript" language="JavaScript"><!--
function changeit() {
    if (document.all)
        document.all('sphere').style.clip = 'rect(' + t + ' ' + r + ' ' + b + ' ' + l + ')';
    else if (document.layers) {
        document.layers['sphere'].clip.top = t;
        document.layers['sphere'].clip.right = r;
        document.layers['sphere'].clip.bottom = b;
        document.layers['sphere'].clip.left = l;
    }
}

var t=0, r=0, b=100, l=0;

function slide(x) {
    if (r<500) {
        r += x;
        changeit();
        setTimeout('slide(x)',500);
    }
}

changeit();
slide(20);
//--></script>

It can be adapted to trigger on each image load:

<img src="image.gif onLoad="slide(50)">

In which case you need to remove the two seTimeouts from the above script.

©2013 Martin Webb

ArticlesFAQsGamesFeedback

FOLDOCRFCsInstant JavaScriptSoftwareBooksJavaScript Programmer's ReferenceAboutTop