Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Page Debug: setTimeout

Posted on 1998-02-10
4
Medium Priority
?
381 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 1600 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

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
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…
Suggested Courses

927 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