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?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
twexpertsCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.