setTimeout function problem

[foolsmart2005]

I am now writing a function that when a page is loaded, at intervals
of a certain seconds(e.g. 5 seconds), first row of a column will be
displayed, then after the second intervals, the second row of the
column will be displayed and so on. I think I need to use setTimeout
to do this. But I want to ask as the column is in div form, how can I
make it into javascript? for example.
<--code here-->
<div id="col">
<div id="row1">
<div id="row_image1"><img src="image path" alt=""/></div>
<div id="text1"><h1><a href="Media.html">title</a></h1>
<p>content</p>
</div>
</div>

<div id="row2">
<div id="row_image2"><img src="../image/mp3_icon2.png" alt=""/></
div>
<div id="text2"><h1><a href="Media.html">title</a></h1>
<p>content</p>
</div>
</div>
</div>

how to make it into javascript? can I do something var row1 =
document.write("<img src="..."")...etc?

 

[Thomas 'PointedEars' Lahn]

I am now writing a function that when a page is loaded, at intervals
of a certain seconds(e.g. 5 seconds), first row of a column will be
displayed, then after the second intervals, the second row of the
column will be displayed and so on.

Don't make tickers, the plague of the Web. It is a pull medium, not a push
medium. Users want to decide what they see and when they see it, and they
want to see only this, only then.

how to make it into javascript? can I do something var row1 =
document.write("<img src="..."")...etc?

No. Read the FAQ, and then please find another problem to solve with scripting.

<http://jibbering.com/faq/>


PointedEars

 

[Doug Gunnoe]

I am now writing a function that when a page is loaded, at intervals
of a certain seconds(e.g. 5 seconds), first row of a column will be
displayed, then after the second intervals, the second row of the
column will be displayed and so on.  I think  I need to use setTimeout
to do this.  But I want to ask as the column is in div form, how can I
make it into javascript?  for example.
<--code here-->
<div id="col">
        <div id="row1">
                <div id="row_image1"><img src="image path" alt=""/></div>
                <div id="text1"><h1><a href="Media.html">title</a></h1>
                <p>content</p>
                </div>
        </div>

        <div id="row2">
                <div id="row_image2"><img src="../image/mp3_icon2.png" alt=""/></
div>
                <div id="text2"><h1><a href="Media.html">title</a></h1>
                <p>content</p>
                </div>
        </div>
</div>

how to make it into javascript?  can I do something var row1 =
document.write("<img src="..."")...etc?

Yes you can do it in JavaScript. And you can use the setTimeout to
accomplish part of it, but...

Are you providing dynamic content in the div's, content that has
changed since the page has loaded? Like Thomas mentioned a 'ticker',
or do you know all the text you want to include when the page is
loaded and this is just some kind of 'effect'?

If this is an 'effect', you can set the css style to your div's
initially with display:none and every five seconds change one to
display:block

http://www.w3schools.com/htmldom/met_win_settimeout.asp
http://www.w3schools.com/css/pr_class_display.asp

???

But, I'm not sure if this is what you are wanting to do.

 

[Thomas 'PointedEars' Lahn]

If this is an 'effect', you can set the css style to your div's
initially with display:none and every five seconds change one to
display:block

http://www.w3schools.com/htmldom/met_win_settimeout.asp
http://www.w3schools.com/css/pr_class_display.asp

The quality of information provided by this Web site ranges from obsolete
to misleading to incomplete to factually incorrect. *Do not use* it as
reference material.

In this case (proven once again):

1. There are no pointers in ECMAScript implementations, there are object
references.

2. window.setTimeout() does not cause the script engine to wait before
executing the code or calling the referenced function. It has the UA
plan execution at a later time instead, then immediately continues
with evaluating the next statement.

3. window.setTimeout() does not have a third argument to specify the
scripting language in JavaScript or the Gecko DOM, only in the MSHTML
DOM. In JavaScript and the Gecko DOM, the third argument and further
arguments are used instead as arguments to the function call when you
pass a Function object reference for the first argument, and either are
ignored or throw an exception if you pass a string for the first
argument.

<https://developer.mozilla.org/en/DOM/window.setTimeout>

4. setTimeout() is defined a method of Window objects, not the ECMAScript
Global Object. It should not be called in a way that assumes a fitting
object is in the scope chain, but in a way that reduces the likelihood
to target the wrong object -- window.setTimeout(...) -- preferably
only after a feature test made sure that this object exists and that
object provides the method.

5. MSHTML-based UAs like Internet Explorer won't accept any `display'
values except `none', `inline', and `block'.

And probably I have overlooked other errors there.


PointedEars

 

[Jorge]

I am now writing a function that when a page is loaded, at intervals
of a certain seconds(e.g. 5 seconds), first row of a column will be
displayed, then after the second intervals, the second row of the
column will be displayed and so on.  I think  I need to use setTimeout
to do this.  But I want to ask as the column is in div form, how can I
make it into javascript?  for example.
<--code here-->
<div id="col">
        <div id="row1">
                <div id="row_image1"><img src="image path" alt=""/></div>
                <div id="text1"><h1><a href="Media.html">title</a></h1>
                <p>content</p>
                </div>
        </div>

        <div id="row2">
                <div id="row_image2"><img src="../image/mp3_icon2.png" alt=""/></
div>
                <div id="text2"><h1><a href="Media.html">title</a></h1>
                <p>content</p>
                </div>
        </div>
</div>

how to make it into javascript?  can I do something var row1 =
document.write("<img src="..."")...etc?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="jorge">
<!-- Date: 2008-11-28 -->

<script>
window.onload= function () {
function $ (p) { return document.getElementById(p); }
var div1S, div2S, ms= 5000;

(div1S= ($('row1').style)).display= "";
(div2S= ($('row2').style)).display= "none";

setTimeout(function f () {
div1S.display = div1S.display ? '' : 'none';
div2S.display = div2S.display ? '' : 'none';
setTimeout(f, ms);
}, ms);
};
</script>

</head>
<body>

<div id="col">

<div id="row1">
<div id="row_image1">
<img src="1.jpg" alt=""/>
</div>
<div id="text1">
<h1>
<a href="Media.html">ROW 1</a>
</h1>
<p>content</p>
</div>
</div>

<div id="row2">
<div id="row_image2">
<img src="2.jpg" alt=""/>
</div>
<div id="text2">
<h1>
<a href="Media.html">ROW 2</a>
</h1>
<p>content</p>
</div>
</div>

</div>

</body>
</html>

 

[Doug Gunnoe]

The quality of information provided by this Web site ranges from obsolete
to misleading to incomplete to factually incorrect.  *Do not use* it as
reference material.

You're not the boos of me.

I'm sure w3schools has plenty of blunders and gaffes. It doesn't
concern me. It is well organized and easy to find what you're looking
for, especially when you're only really needing a function prototype
or a reminder of a property name and so forth...

 

[David Mark]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

Why loose?

<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>untitled</title>
  <meta name="generator" content="TextMatehttp://macromates.com/">
  <meta name="author" content="jorge">
  <!-- Date: 2008-11-28 -->

  <script>

No type?

  window.onload= function () {
    function $ (p) { return document.getElementById(p); }

Why wrap this?

    var div1S, div2S, ms= 5000;

    (div1S= ($('row1').style)).display= "";

Why set this on load?

    (div2S= ($('row2').style)).display= "none";

This code is pretty illegible. At the very least, lose the "$".

    setTimeout(function f () {

Qualify that (window.setTimeout at least.)

      div1S.display = div1S.display ? '' : 'none';
      div2S.display = div2S.display ? '' : 'none';

Now this part could have used a function.

      setTimeout(f, ms);

Why not use setInterval?

[snip]

 

[Thomas 'PointedEars' Lahn]

You're not the boos of me.

Probably you meant to say *boss*. Of course I am not; I am a fellow
software developer, and what I said was meant as a strong and
well-intentioned recommendation.

I'm sure w3schools has plenty of blunders and gaffes. It doesn't
concern me.

Why do you insist to use bad information as reference when there are better
alternatives?

It is well organized

Maybe so, but what good is good organization for if the organized content is
false?

and easy to find what you're looking for,

There is other, better reference material that has this property as well.

especially when you're only really needing a function prototype

You don't know what you are talking about.

or a reminder of a property name and so forth...

You may ignore my recommendation at your own peril. Referring to inadequate
material here and thereby implicitly recommending it to others as reference
material is a different thing, though, for this newsgroup is not supposed to
be the place where blind are leading the blind -- on the contrary.


PointedEars

 

[foolsmart2005]

Yes you can do it in JavaScript. And you can use the setTimeout to
accomplish part of it, but...

Are you providing dynamic content in the div's, content that has
changed since the page has loaded? Like Thomas mentioned a 'ticker',
or do you know all the text you want to include when the page is
loaded and this is just some kind of 'effect'?

If this is an 'effect', you can set the css style to your div's
initially with display:none and every five seconds change one to
display:block

http://www.w3schools.com/htmldom/me...://www.w3schools.com/css/pr_class_display.asp

???

But, I'm not sure if this is what you are wanting to do.

Actually, this is an 'effect', but I am required to write by using
javascript. But the way, I changed a bit about the code Jorge post
but it's still not work.

<script type="text/javascript">
window.onload= function () {
<!--function (p) { return document.getElementById(p); }-->
var div1S, div2S, ms= 5000;

div1S= document.getElementById('row1').style.display= "";
div2S= document.getElementById('row2').style.display= "none";

setTimeout(function f () {
div1S.display = div1S.display ? '' : 'none';
div2S.display = div2S.display ? '' : 'none';
setTimeout(f, ms);
}, ms);
};
</script>

what is wrong with this code?

 

[David Mark]

On Nov 28, 9:49 pm, "(e-mail address removed)"

[snip]

Actually, this is an 'effect', but I am required to write by using
javascript.  But the way, I changed a bit about the code Jorge post
but it's still not work.

http://www.jibbering.com/faq/faq_notes/clj_posts.html#ps1DontWork

[snip]

 

[SamuelXiao]

On Nov 28, 9:49 pm, "(e-mail address removed)"


[snip]

Actually, this is an 'effect', but I am required to write by using
javascript.  But the way, I changed a bit about the code Jorge post
but it's still not work.

http://www.jibbering.com/faq/faq_notes/clj_posts.html#ps1DontWork

[snip]

Ok, I hope make it display rows step by step. First, I want to
display 1st row of the column, then after 5 seconds, the 2nd row will
be displayed, then additional 5 seconds, the 3rd row will be
displayed. And this will be a cycle to display these rows. My code
doesn't do in this way. How can I make it? Any help would be
appreciated.

 

[David Mark]

On Nov 28, 9:49 pm, "(e-mail address removed)"

[snip]

Actually, this is an 'effect', but I am required to write by using
javascript.  But the way, I changed a bit about the code Jorge post
but it's still not work.

http://www.jibbering.com/faq/faq_notes/clj_posts.html#ps1DontWork

[snip]

Ok, I hope make it display rows step by step.  First, I want to
display 1st row of the column, then after 5 seconds, the 2nd row will
be displayed, then additional 5 seconds, the 3rd row will be
displayed.  And this will be a cycle to display these rows.  My code
doesn't do in this way.
http://www.jibbering.com/faq/faq_notes/clj_posts.html#ps1DontWork


How can I make it?  Any help would be
appreciated.

You have stated twice that it doesn't work. How so?

And why is there an HTML comment in the middle of your sample?

 

[Thomas 'PointedEars' Lahn]

Actually, this is an 'effect', but I am required to write by using
javascript.

You could not use another family of programming languages to begin with, as
ECMAScript implementations are the only compatible languages to script Web
documents. Whether what you want to achieve makes sense is another matter.

But the way, I changed a bit about the code Jorge post
but it's still not work.

<script type="text/javascript">
window.onload= function () {

That's unwise because potentially incompatible. Use the `onload' attribute
of the `body' element instead.

<!--function (p) { return document.getElementById(p); }-->

^^^^
That's a plain syntax error if it is a HTML `SCRIPT' element (and unwise if
it is an XHTML `script' element). While there may be script engines to
support that comment syntax, it is non-standard, therefore unreliable.
Single-line comments in ECMAScript scripts begin with `//', multi-line
comments begin with `/*' and end with `*/'. RTFM.

var div1S, div2S, ms= 5000;

div1S= document.getElementById('row1').style.display= "";
div2S= document.getElementById('row2').style.display= "none";

One wonders why you initialize `ms' in the declaration but not `div1S' and
`div2S'.

There are probably other errors in your code. You should follow David's
advice and read the FAQ on writing proper code, detecting errors and
debugging code.


PointedEars

 

[Thomas 'PointedEars' Lahn]

var div1S, div2S, ms= 5000;

div1S= document.getElementById('row1').style.display= "";

^^^^^^ ^^

div2S= document.getElementById('row2').style.display= "none";

^^^^^^ ^^^^^^

setTimeout(function f () {
div1S.display = div1S.display ? '' : 'none';
div2S.display = div2S.display ? '' : 'none';
setTimeout(f, ms);
}, ms);
};
[...]

what is wrong with this code?

`div1S' and `div2S' hold *primitive string values* here. Strings objects do
not have or inherit a `display' property, and `undefined' type-converts to
`false'. Since you augment String objects with a property through the
assignment in the function called with setTimeout(), there is no error but
also no change in the display of the document.

Should be at least

var div1S = document.getElementById('row1').style;
div1S.display = "";

var div2S = document.getElementById('row2').style;
div2S.display = "none";

instead. However, for compatibility I recommend to use a wrapper method
instead of plain document.getElementById(...) [1], and to refer to the DOM
object, not the `style' property value, with div1Sx. (IIRC earlier Opera
DOM versions had a [[Get]] method that returned a string value instead of an
object reference for the `style' property.)


PointedEars
___________
[1] e.g. getElemById() in <http://PointedEars.de/scripts/dhtml.js>

 

[Jorge]

Why loose?, No type?, Why wrap this?, Why set this on load?, This code ispretty illegible., At the very least, lose the "$"., Qualify that (window.setTimeout at least.), Now this part could have used a function., Why not use setInterval?

This time, David Mark's style

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="jorge">
<!-- Date: 2008-11-29 -->

<script type="text/javascript">
self.window.onload= function () {

function toggleDisplay (p) {
p.style.display= p.style.display ? '' : 'none';
}

window.window.document.getElementById('row2').style.display=
"none";

window.window.window.setInterval(function () {
toggleDisplay(self.window.self.document.getElementById
('row1'));
toggleDisplay(window.self.window.document.getElementById
('row2'));
}, 5000);
};
</script>
</head>

<body>

<div id="col">
<div id="row1">
<div id="row_image1">
<a href="http://validator.w3.org/check?uri=referer">
<img src="http://www.w3.org/Icons/valid-html401"
alt="Valid HTML 4.01 Strict" height="31"
width="88">
</a>
</div>
<div id="text1">
<h1>
<a href="Media.html">ROW 1</a>
</h1>
<p>content</p>
</div>
</div>

<div id="row2">
<div id="row_image2">
<a href="http://validator.w3.org/check?uri=referer">
<img src="http://www.w3.org/Icons/valid-html401-blue"
alt="Valid HTML 4.01 Strict" height="31"
width="88">
</a>
</div>
<div id="text2">
<h1>
<a href="Media.html">ROW 2</a>
</h1>
<p>content</p>
</div>
</div>
</div>

</body>
</html>

 

[Jorge]

This time, David Mark's style

Better still:

<script type="text/javascript">
(function () { return this; })().onload= function () {

function window () { return this; };

function toggleDisplay (p) {
p.style.display= p.style.display ? '' : 'none';
}

window().document.getElementById('row2').style.display= "none";

window().window.window.setInterval(function () {
toggleDisplay(window().document.getElementById('row1'));
toggleDisplay(window().document.getElementById('row2'));
}, 5000);
};
</script>

 

[SAM]

Le 11/28/08 8:17 PM, (e-mail address removed) a écrit :

I am now writing a function that when a page is loaded, at intervals
of a certain seconds(e.g. 5 seconds), first row of a column will be
displayed, then after the second intervals, the second row of the
column will be displayed and so on. I think I need to use setTimeout
to do this. But I want to ask as the column is in div form, how can I
make it into javascript? for example.
<--code here-->
<div id="col">
<div id="row1">

certainly you don't need all this divs ... ? !


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta name="License"
content="http://creativecommons.org/licenses/by-nc-sa/3.0/deed.fr">
<meta name="author-email"
content="http://stephane.moriaux.pagesperso-orange.fr/contact">
<title>temporised divs</title>
<style type="text/css">
div div { border: 1px solid; margin: 20px; text-align: center }
div div.row { display: none; }
</style>
<script type="text/javascript">

var num = 0, show = false;

function reveal() {
var d = document.getElementById('col1').getElementsByTagName('DIV');
if(num>=d.length) clearInterval(show);
else
d[num].className = '';
num++;
}
window.onload = function() {
show = setInterval('reveal()', 2000);
}

</script>
</head>
<body>
<h1>succesive divs</h1>
<div id="col1">
<div class="row">
<img src="asm1.gif" alt="">
<h1>
<a href="Media1.html">ROW 1</a>
</h1>
<p>content 1</p>
</div>
<div class="row">
<img src="asm2.gif" alt="">
<h1>
<a href="Media2.html">ROW 2</a>
</h1>
<p>content 2</p>
</div>
<div class="row">
<img src="asm3.gif" alt="">
<h1>
<a href="Media3.html">ROW 3</a>
</h1>
<p>content 3</p>
</div>
</div>

</body>
</html>

 

[Doug Gunnoe]

Probably you meant to say *boss*. Of course I am not; I am a fellow
software developer, and what I said was meant as a strong and
well-intentioned recommendation.

I meant what I said. Said what I meant. An elephant is faithful 100%.

Why do you insist to use bad information as reference when there are better
alternatives?

Better? Shit, there is always something better. Sometimes good enough
is good enough.

Maybe so, but what good is good organization for if the organized content is
false?

The majority of the content is accurate.

You don't know what you are talking about.

I know exactly what I'm taking about. I know so much of what I am
talking about that I knew you were going to quibble over my use of the
term 'function prototype'.

You may ignore my recommendation at your own peril. Referring to inadequate
material here and thereby implicitly recommending it to others as reference
material is a different thing, though, for this newsgroup is not supposed to
be the place where blind are leading the blind -- on the contrary.

I ignore your recommendations at not peril whatsoever.

 

[SamuelXiao]

Le 11/28/08 8:17 PM, (e-mail address removed) a écrit :

I am now writing a function that when a page is loaded, at intervals
of a certain seconds(e.g. 5 seconds), first row of a column will be
displayed, then after the second intervals, the second row of the
column will be displayed and so on.  I think  I need to use setTimeout
to do this.  But I want to ask as the column is in div form, how can I
make it into javascript?  for example.
<--code here-->
<div id="col">
   <div id="row1">

certainly you don't need all this divs ... ? !

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
         "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
        <meta name="License"
content="http://creativecommons.org/licenses/by-nc-sa/3.0/deed.fr">
        <meta name="author-email"
content="http://stephane.moriaux.pagesperso-orange.fr/contact">
        <title>temporised divs</title>
<style type="text/css">
div div { border: 1px solid; margin: 20px; text-align: center }
div div.row { display: none; }
</style>
<script type="text/javascript">

var num = 0, show = false;

function reveal() {
  var d = document.getElementById('col1').getElementsByTagName('DIV');
  if(num>=d.length) clearInterval(show);
  else
  d[num].className = '';
  num++;
  }
window.onload = function() {
   show = setInterval('reveal()', 2000);
   }

</script>
</head>
<body>
   <h1>succesive divs</h1>
   <div id="col1">
     <div class="row">
       <img src="asm1.gif" alt="">
         <h1>
           <a href="Media1.html">ROW 1</a>
         </h1>
         <p>content 1</p>
     </div>
     <div class="row">
         <img src="asm2.gif" alt="">
         <h1>
           <a href="Media2.html">ROW 2</a>
         </h1>
         <p>content 2</p>
     </div>
     <div class="row">
         <img src="asm3.gif" alt="">
         <h1>
           <a href="Media3.html">ROW 3</a>
         </h1>
         <p>content 3</p>
     </div>
   </div>

</body>
</html>

Thanks, your code is exactly what I want to make. I am now trying to
make it fit my page. And thanks for all other's help!

 

[SamuelXiao]

This time, David Mark's style

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>untitled</title>
  <meta name="generator" content="TextMatehttp://macromates.com/">
  <meta name="author" content="jorge">
  <!-- Date: 2008-11-29 -->

  <script type="text/javascript">
    self.window.onload= function () {

      function toggleDisplay (p) {
        p.style.display= p.style.display ? '' : 'none';
      }

      window.window.document.getElementById('row2').style.display=
"none";

      window.window.window.setInterval(function () {
        toggleDisplay(self.window.self.document.getElementById
('row1'));
        toggleDisplay(window.self.window.document.getElementById
('row2'));
      }, 5000);
    };
  </script>
</head>

<body>

  <div id="col">
    <div id="row1">
      <div id="row_image1">
        <a href="http://validator.w3.org/check?uri=referer">
          <img src="http://www.w3.org/Icons/valid-html401"
          alt="Valid HTML 4.01 Strict" height="31"
          width="88">
        </a>
      </div>
      <div id="text1">
        <h1>
          <a href="Media.html">ROW 1</a>
        </h1>
        <p>content</p>
      </div>
    </div>

    <div id="row2">
      <div id="row_image2">
        <a href="http://validator.w3.org/check?uri=referer">
          <img src="http://www.w3.org/Icons/valid-html401-blue"
          alt="Valid HTML 4.01 Strict" height="31"
          width="88">
        </a>
      </div>
      <div id="text2">
        <h1>
          <a href="Media.html">ROW 2</a>
        </h1>
        <p>content</p>
      </div>
    </div>
  </div>

</body>
</html>

Thanks for your help, but what I want is:
1st, it shows "row1", then after 5 seconds, row2 which is below row1
will be shown, then next 5 seconds, row 3 will be shown under row2,
then this process will continue and it's a cycle (which means shows
row1 first again, then row2 , then row3...).