setTimeout function problem

Discussion in 'Javascript' started by foolsmart2005@gmail.com, Nov 28, 2008.

  1. Guest

    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?
    , Nov 28, 2008
    #1
    1. Advertising

  2. wrote:
    > 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
    --
    var bugRiddenCrashPronePieceOfJunk = (
    navigator.userAgent.indexOf('MSIE 5') != -1
    && navigator.userAgent.indexOf('Mac') != -1
    ) // Plone, register_function.js:16
    Thomas 'PointedEars' Lahn, Nov 28, 2008
    #2
    1. Advertising

  3. Doug Gunnoe Guest

    On Nov 28, 1:17 pm, ""
    <> wrote:
    > 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.
    Doug Gunnoe, Nov 28, 2008
    #3
  4. Doug Gunnoe wrote:
    > 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
    --
    Anyone who slaps a 'this page is best viewed with Browser X' label on
    a Web page appears to be yearning for the bad old days, before the Web,
    when you had very little chance of reading a document written on another
    computer, another word processor, or another network. -- Tim Berners-Lee
    Thomas 'PointedEars' Lahn, Nov 28, 2008
    #4
  5. Jorge Guest

    On Nov 28, 8:17 pm, ""
    <> wrote:
    > 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>

    --
    Jorge.
    Jorge, Nov 28, 2008
    #5
  6. Doug Gunnoe Guest

    On Nov 28, 2:16 pm, Thomas 'PointedEars' Lahn <>
    wrote:
    > Doug Gunnoe wrote:
    > > 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.


    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...
    Doug Gunnoe, Nov 28, 2008
    #6
  7. David Mark Guest

    On Nov 28, 3:32 pm, Jorge <> wrote:
    > On Nov 28, 8:17 pm, ""
    >
    >
    >
    > <> wrote:
    > > 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">


    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]
    David Mark, Nov 28, 2008
    #7
  8. Doug Gunnoe wrote:
    > Thomas 'PointedEars' Lahn wrote:
    >> Doug Gunnoe wrote:
    >>> 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.

    >
    > 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
    --
    Use any version of Microsoft Frontpage to create your site.
    (This won't prevent people from viewing your source, but no one
    will want to steal it.)
    -- from <http://www.vortex-webdesign.com/help/hidesource.htm>
    Thomas 'PointedEars' Lahn, Nov 28, 2008
    #8
  9. Guest

    On Nov 29, 3:43 am, Doug Gunnoe <> wrote:
    > On Nov 28, 1:17 pm, ""
    >
    >
    >
    > <> wrote:
    > > 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/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?
    , Nov 29, 2008
    #9
  10. David Mark Guest

    David Mark, Nov 29, 2008
    #10
  11. SamuelXiao Guest

    On Nov 29, 11:56 am, David Mark <> wrote:
    > On Nov 28, 9:49 pm, ""
    >
    > <> wrote:
    >
    > [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.
    SamuelXiao, Nov 29, 2008
    #11
  12. David Mark Guest

    On Nov 29, 1:59 am, SamuelXiao <> wrote:
    > On Nov 29, 11:56 am, David Mark <> wrote:
    >
    > > On Nov 28, 9:49 pm, ""

    >
    > > <> wrote:

    >
    > > [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?
    David Mark, Nov 29, 2008
    #12
  13. wrote:
    > 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
    --
    Use any version of Microsoft Frontpage to create your site.
    (This won't prevent people from viewing your source, but no one
    will want to steal it.)
    -- from <http://www.vortex-webdesign.com/help/hidesource.htm>
    Thomas 'PointedEars' Lahn, Nov 29, 2008
    #13
  14. wrote:
    > 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>
    --
    Anyone who slaps a 'this page is best viewed with Browser X' label on
    a Web page appears to be yearning for the bad old days, before the Web,
    when you had very little chance of reading a document written on another
    computer, another word processor, or another network. -- Tim Berners-Lee
    Thomas 'PointedEars' Lahn, Nov 29, 2008
    #14
  15. Jorge Guest

    On Nov 28, 10:59 pm, David Mark <> wrote:
    >
    > 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.
    Jorge, Nov 29, 2008
    #15
  16. Jorge Guest

    On Nov 29, 11:00 am, Jorge <> wrote:
    > On Nov 28, 10:59 pm, David Mark <> wrote:
    >
    >
    >
    > > Why loose?, No type?, Why wrap this?, Why set this on load?, This code is pretty illegible., At the very least, lose the "$"., Qualify that (window.setTimeout at least.), Now this part could have used a function., Why notuse setInterval?

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

    --
    Jorge.
    Jorge, Nov 29, 2008
    #16
  17. SAM Guest

    Le 11/28/08 8:17 PM, 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>
    SAM, Nov 29, 2008
    #17
  18. Doug Gunnoe Guest

    On Nov 28, 4:38 pm, Thomas 'PointedEars' Lahn <>
    wrote:

    > 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.
    Doug Gunnoe, Nov 29, 2008
    #18
  19. SamuelXiao Guest

    On Nov 29, 8:38 pm, SAM <>
    wrote:
    > Le 11/28/08 8:17 PM, 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, Nov 29, 2008
    #19
  20. SamuelXiao Guest

    On Nov 29, 6:00 pm, Jorge <> wrote:
    > On Nov 28, 10:59 pm, David Mark <> wrote:
    >
    >
    >
    > > Why loose?, No type?, Why wrap this?, Why set this on load?, This code is pretty illegible., At the very least, lose the "$"., Qualify that (window.setTimeout at least.), Now this part could have used a function., Why notuse 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="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>
    >
    > --
    > Jorge.


    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...).
    SamuelXiao, Nov 29, 2008
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    3
    Views:
    4,709
    Diez B. Roggisch
    Jun 12, 2006
  2. qasim

    how to use setTimeout function

    qasim, Feb 25, 2009, in forum: ASP .Net
    Replies:
    2
    Views:
    282
    George
    Feb 25, 2009
  3. Test
    Replies:
    0
    Views:
    79
  4. Ken
    Replies:
    4
    Views:
    106
    Michael Winter
    Oct 7, 2004
  5. Noggon
    Replies:
    1
    Views:
    116
    Noggon
    Jun 24, 2006
Loading...

Share This Page