Page Debug: setTimeout

Help - I need a whole page debugged! (That's why the points are so high...)

What I want is for three moving objects on the page to appear at different time: element 1 slides in from the left, then element 2 becomes visible, then element 3 becomes visible and slides in from the right.

The movement is working, but not the visibility: I think I need a TimeOut object (?).

I didn't write most of this, but cobbled it together from several sources - can anyone get it to work (for 400 points)?

<HTML>
<HEAD>
<!---
<META HTTP-EQUIV="Refresh" CONTENT="2;URL=http://www.online-fashion.com/cv2/ie/clients.html">
--->

<TITLE></TITLE>

<LINK REL=STYLESHEET HREF="interst2.css" TYPE="text/css">
<SCRIPT LANGUAGE="JavaScript">
<!--
if (document.layers) {n=1;ie=0}
if (document.all) {n=0;ie=1}

function show(showobj1) {
      if (n) blockDiv.showobj.visibility = "show"
      if (ie) blockDiv.showobj.visibility = "visible"

}

function show(showobj2) {
      if (n) vertDiv.showobj.visibility = "show"
      if (ie) vertDiv.showobj.visibility = "visible"
}

function move() {

      if (n) vert = document.vertDiv
      if (ie) vert = vertDiv.style
      vert.ypos = parseInt(vert.top)


      if (n) block = document.blockDiv
      if (ie) block = blockDiv.style
      block.xpos = parseInt(block.left)
      
      if (n) right = document.rightDiv
      if (ie) right = rightDiv.style
      right.xpos = parseInt(right.left)



      if (block.xpos < 220) {
            block.xpos += 5
            block.left = block.xpos
            setTimeout("move()",60)
      }
      if (right.xpos > 400) {
            right.xpos -= 5
            right.left = right.xpos
            setTimeout("move()",60)
      }

}

function rightmove() {

      
      if (n) right = document.rightDiv
      if (ie) right = rightDiv.style
      right.xpos = parseInt(right.left)



      if (right.xpos > 400) {
            right.xpos -= 5
            right.left = right.xpos
            setTimeout("move()",60)
      }

}

//-->
</SCRIPT>
</HEAD>

<BODY onLoad="move()" BGCOLOR="#FFFFFF">

<SCRIPT LANGUAGE="JavaScript">
timeoutID = window.setTimeout("showobj1()"), 0;
timeoutID = window.setTimeout("showobj2()"), 5000;
timeoutID = window.setTimeout("rightmove()"), 10000;
</SCRIPT>

<DIV ID="blockDiv" STYLE="position:absolute; left:0; top:100; width:200">
<H3>The site</H3>
</DIV>


<DIV ID="vertDiv" STYLE="position:absolute; left:312; top:100; width:50">
<H1><I>IS</I></H1>
</DIV>

<DIV ID="rightDiv" STYLE="position:absolute; left:600; top:180; width:200">
<h3>the CV...</h3>
</DIV>

</BODY>
</HTML>

Thanks.

Ian
cathAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
twexpertsConnect With a Mentor Commented:
Here's the solution, I've only tested it in IE4, I'll try it in NN4 later this evening, but this should do for now....
If it is anything it probably will need a 'document.' put before each of the vertDiv,blockDiv, and rightDiv for the (n) cases.
 
Email me at robin@twexperts.com for any further help that you might need with this page....
It looks great, I must say....

Robin.
Page:::::::

<HTML>
<HEAD>
<!---
<META HTTP-EQUIV="Refresh" CONTENT="2;URL=http://www.online-fashion.com/cv2/ie/clients.html">
--->
<TITLE></TITLE>
<LINK REL=STYLESHEET HREF="interst2.css" TYPE="text/css">
<SCRIPT LANGUAGE="JavaScript">
<!--
if (document.layers) {n=1;ie=0}
if (document.all) {n=0;ie=1}
mvright=0;
function showobj1() {
if (n) blockDiv.visibility = "show"
if (ie) blockDiv.visibility = "visible"
}
function showobj2() {
if (n) vertDiv.visibility = "show"
if (ie) vertDiv.style.visibility="visible"
}
function showobj3() {
if (n) rightDiv.visibility = "show"
if (ie) rightDiv.style.visibility = "visible"
}
function move() {
  if (n) vert = document.vertDiv
  if (ie) vert = vertDiv.style
  vert.ypos = parseInt(vert.top)
  if (n) block = document.blockDiv
  if (ie) block = blockDiv.style
  block.xpos = parseInt(block.left)
  if (n) right = document.rightDiv
  if (ie) right = rightDiv.style
  right.xpos = parseInt(right.left)
  if (block.xpos < 220) {
    block.xpos += 5
    block.left = block.xpos
    setTimeout("move()",60)
  } else if(mvright==0) {
        showobj2()
    setTimeout("setright()",300)
  }
  if (right.xpos > 400) {
    if(mvright==1) {
      right.xpos -= 5
      right.left = right.xpos
      setTimeout("move()",60)
    }
  }
}
function setright() {
      mvright=1;
  showobj3();
  move();
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="move()" BGCOLOR="#FFFFFF">
<SCRIPT LANGUAGE="JavaScript">
timeoutID = window.setTimeout("showobj1()"), 0;
</SCRIPT>
<DIV ID="blockDiv" STYLE="position:absolute; left:0; top:100; width:200">
<H3>The site</H3>
</DIV>
<DIV ID="vertDiv" STYLE="position:absolute; visibility:hidden; left:312; top:100; width:50; "> 
<H1><I>IS</I></H1>
</DIV>
<DIV ID="rightDiv" STYLE="position:absolute; visibility:hidden; left:600; top:180; width:200">
<h3>the CV...</h3>
</DIV>
</BODY>
</HTML>
0
 
julio011597Commented:
To debug your code, you should make all the html and ccs pages available online.

Anyway, just to begin with:

timeoutID = window.setTimeout("showobj1()"), 0;

should be:

window.setTimeout("showobj1()", 0);

So the following two lines.

And, showobj1() and showobj2() are not defined; did you mean the show() function? (BTW, show is a reserved word, so you should rename it)

-julio
0
 
cathAuthor Commented:
Thanks to Julio for his comments - don't really know what I meant. I don't really know what I'm doing - just cobbling bits together and playing with it rather than a clear idea. I thought of the design first and then tried to implement it.

Twexpert's answer does exactly what I want it to, and the idea works beautifully. I'm happy to grade an A and award the points. If the script works in NN too (not essential, but desirable), so much the better.
0
 
twexpertsCommented:
Ok, here's the function slightly modified to work with NN4, it still works 100% same in IE4.... And looks and works the same in NC4.

Thanks for the points...


FILE:::::::::

<HTML>
<HEAD>
<!---
<META HTTP-EQUIV="Refresh" CONTENT="2;URL=http://www.online-fashion.com/cv2/ie/clients.html">
--->
<TITLE></TITLE>
<LINK REL=STYLESHEET HREF="interst2.css" TYPE="text/css">
<SCRIPT LANGUAGE="JavaScript">
<!--
if (document.layers) {n=1;ie=0}
if (document.all) {n=0;ie=1}
mvright=0;
function showobj1() {
if (n) document.blockDiv.visibility = "show"
if (ie) blockDiv.visibility = "visible"
}
function showobj2() {
if (n) document.vertDiv.visibility = "show"
if (ie) vertDiv.style.visibility="visible"
}
function showobj3() {
if (n) document.rightDiv.visibility = "show"
if (ie) rightDiv.style.visibility = "visible"
}
function move() {

if (n) vert = document.vertDiv
if (ie) vert = vertDiv.style
vert.ypos = parseInt(vert.top)

if (n) block = document.blockDiv
if (ie) block = blockDiv.style
block.xpos = parseInt(block.left)
if (n) right = document.rightDiv
if (ie) right = rightDiv.style
right.xpos = parseInt(right.left)
if (block.xpos < 220) {
 block.xpos += 5
 block.left = block.xpos
 setTimeout("move()",60)
} else if(mvright==0) {
showobj2()
 setTimeout("setright()",300)
}
if (right.xpos > 400) {
 if(mvright==1) {
 right.xpos -= 5
 right.left = right.xpos
 setTimeout("move()",60)
 }
}
}
function setright() {
mvright=1;
showobj3();
move();
}
function start() {
  showobj1();
  move();
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="start()" BGCOLOR="#FFFFFF">
<SCRIPT LANGUAGE="JavaScript">
</SCRIPT>
<DIV ID="blockDiv" STYLE="position:absolute; left:0; top:100; width:200">
<H3>The site</H3>
</DIV>
<DIV ID="vertDiv" STYLE="position:absolute; visibility:hidden; left:312; top:100; width:50; "> 
<H1><I>IS</I></H1>
</DIV>
<DIV ID="rightDiv" STYLE="position:absolute; visibility:hidden; left:600; top:180; width:200">
<h3>the CV...</h3>
</DIV>
</BODY>
</HTML>

0
All Courses

From novice to tech pro — start learning today.