Hi everyone,
I'm a mostly-newbie Javascript'er and I'm trying it on a webpage which, upon pressing a button, pops up a window which shows a cyclic "movie" with the images from the main window. From what I've tried Googling around I can sense I'm pretty close, but something is eluding me.
I know what follows results in two separate questions, which merit two separate posts. But I figure because both are related with the same problem/objective, maybe this belongs in a single (albeit long) post. So I hope the size of it doesn't enfuriate people too much ... ;-)
Anyway, here's a snapshot of what I think is the relevant code:
<html>
<head>
<script language="javascript">
function wait() {}
function anim() {
var timeout; var next;
var popuptitle='Movie';
var main=parent;
var popup=parent.open("","",
"width="+main.document.images[0].width+",height="+(main.document.images[0].height+40)+
"toolbar=no,location=no,directories=no,status=no,"+
"menubar=no,scrollbars=no,copyhistory=no,resizable=no");
popup.document.write('<html><head><title>'+popuptitle+'</title></head><body>'+
'<p align="center"><img name="anim" width="100%" alt=""></p>'+
'<p align="center"><button name="close" onclick="javascript:window.close();">Close</button></p>'+
'</body></html>');
/*while(true)*/
for(i=0; i<main.document.images.length; i++) {
next=main.document.images[i].src;
popup.document.images[0].src=next;
timeout=setTimeout('wait();',500);
}
}
</script>
</head>
<body><h1>Pictures + animation</h1>
<p><button name="exec" onclick="javascript:anim();">Animate (popup)</button></p>
<p><img src="img1.jpg"></p>
....
<p><img src="img16.jpg"></p>
</body>
</html>
I typed/adapted this for relevancy; I hope I didn't make any typos...
I'm working with the Debian Etch's Iceweasel (Firefox 2.x rebrand); I haven't tried this with other browsers. In Iceweasel, what happens is:
- The popup show up as is supposed to, but it seems the cycle goes straight to the last picture. setTimeout seems to have no effect in "pausing" between pictures.
- The last picture is shown, and the popup's status bar shows its progress bar midway, suggesting something is loading.
So my questions are:
- How exactly am I supposed to use the setTimeout call here? I've tried to make it call an "empty" function, so it works as a "pause" in the cycle having the setTimeout(), where the cycle updates the popup single image from the main window's images array.
- I find that, if I load the popup by loading the HTML code from an external file (anim.html), the statusbar seems to show from the "progress bar" that the window keeps expecting a reload. I'm still going to try if it's from somewhere else, but what I want to know if it is important/relevant that I load the HTML page from an external file with the window.open(), versus loading an empty window and doing a writeln to it to "write" the HTML.
- I've commented the "while(true)" in the cycle, because otherwise the browser stops responding and the computer goes to 100%CPU. I could make an "if" in the "for" cycle to set the counter back to zero before the last item, but is there another "elegant" or "more appropriate" way to make this an infinite cycle -- or does the "while(true)" do just fine?
I appretiate your comments in advance, and if possible a pointer to existing bibliography describing similar solutions.