Solved

Page Debug: setTimeout

Posted on 1998-02-10
4
366 Views
Last Modified: 2012-05-04
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
0
Comment
Question by:cath
  • 2
4 Comments
 
LVL 5

Expert Comment

by:julio011597
ID: 1278186
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
 
LVL 1

Accepted Solution

by:
twexperts earned 400 total points
ID: 1278187
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
 

Author Comment

by:cath
ID: 1278188
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
 
LVL 1

Expert Comment

by:twexperts
ID: 1278189
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

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now