Home/ Questions/Q 157801
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T10:34:07+00:00

I’m a mostly-newbie Javascript’er and I’m trying it on a webpage which, upon pressing

  • 0

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:

  1. 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.
  2. The last picture is shown, and the popup’s status bar shows its progress bar midway, suggesting something is loading.

So my questions are:

  1. 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.
  2. 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.
  3. 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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. I do not think this means what you think it means:

    timeout=setTimeout('wait();',500);

    Apparently, you’re trying to sleep() with this. That’s not how the JS timeouts work – this happens onclick in your code: you loop through the images array, immediately switch images from 0th to 1st … to last; also, on every switch, you say ‘run the wait() function, 500 ms from now’.

    window.setTimeout(foo,bar,baz) does this: it sets a timer for bar milliseconds and returns. Code execution continues with the next statement. After bar milliseconds, function foo(baz) is automagically called. The 3rd and following arguments for setTimeout are optional and will be passed to the function in 1st argument.

    What you could do:

    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>');    // *changed below*   // start the animation with the 0th image   next_image(0,main.document.images,popup.document.images[0]); }  function next_image(index,source_image_array,target_image) {     // if not at end of array     if (source_image_array.length < index) {          next=source_image_array[index].src;         target_image.src=next;          // do this again in 500 ms with next image         window.setTimeout(next_image,500, index+1 ,                             source_image_array,target_image);     } }

    This way, at the end of your anim() function, you call next_image(0), which sets the image to the 0th in array and sets a timer to call next_image(1) in 500 ms; when that happens, the image will be set to the 1st and a timer will be set to call next_image(2) in another 500 ms, and so on, until there are no more images in the array.

    • 0