Don't know why I can't remove one div at a time

Discussion in 'Javascript' started by Terry, Sep 20, 2007.

  1. Terry

    Terry Guest

    Hi again.

    I am calling setTimeout like this:

    function callLater(paramA)
    {
    return (function() {
    paramA.style.display= "none";

    });
    }

    function displaymenu(mealtype)
    {
    var i;
    if(mealtype)
    {
    if (previous != "")
    {
    i =
    document.getElementById(previous).getElementsByTagName('div').length-1;
    while (i>=0)
    {
    var functRef =
    callLater(document.getElementById(previous).getElementsByTagName('div')
    );
    setTimeout(functRef,i--,5000);



    }

    }
    number =
    document.getElementById(mealtype).getElementsByTagName('div').length;

    for (i=0; i < number;i++)
    document.getElementById(mealtype).getElementsByTagName('div')
    .style.display= "block";
    previous=mealtype;
    }
    }

    Unfortunately, I do not see the divs being removed one at a time.
    Instead they are removed all at the same time.

    The url is http://restaurant.atwebpages.com/menu.htm

    Thanks in advance,
    Terry
    Terry, Sep 20, 2007
    #1
    1. Advertising

  2. On Sep 20, 7:55 am, Terry <> wrote:
    > Hi again.
    >
    > I am calling setTimeout like this:
    >
    > function callLater(paramA)
    > {
    > return (function() {
    > paramA.style.display= "none";
    >
    > });
    >
    > }
    >
    > function displaymenu(mealtype)
    > {
    > var i;
    > if(mealtype)
    > {
    > if (previous != "")

    Where does this come from? I suspect you don't need to use a global
    variable here, either.

    > {
    > i =
    > document.getElementById(previous).getElementsByTagName('div').length-1;
    > while (i>=0)
    > {
    > var functRef =
    > callLater(document.getElementById(previous).getElementsByTagName('div')
    > );
    > setTimeout(functRef,i--,5000);


    Same timeout interval: 5000. It should be something like 200*i.

    >
    > }
    >
    > }
    > number =


    You should declare this variable with "var", or else you get an
    implicit global.

    > document.getElementById(mealtype).getElementsByTagName('div').length;
    >
    > for (i=0; i < number;i++)
    > document.getElementById(mealtype).getElementsByTagName('div')
    > .style.display= "block";


    Here you really ought to cache this NodeList collection in a variable
    outside the loop:

    var divs =
    document.getElementById(mealtype).getElementsByTagName('div');

    Instead you call this same DOM operation in 4 separate places, all
    without modifying the DOM. Call it once and be done with it!

    > Unfortunately, I do not see the divs being removed one at a time.
    > Instead they are removed all at the same time.


    That is expected behavior. You're setting them all to be hidden in
    5000 milliseconds, so they all get removed at the same time. If you
    really want this effect, you should be incrementing the timeout
    interval accordingly for each successive div.

    -David
    David Golightly, Sep 20, 2007
    #2
    1. Advertising

  3. Terry

    Terry Guest

    On Sep 20, 1:10 pm, David Golightly <> wrote:
    > > setTimeout(functRef,i--,5000);

    >
    > Same timeout interval: 5000. It should be something like 200*i.


    I thought that by doing it the way that I was doing it that functref
    is called every 5 seconds (that is, 5 seconds between iterations)


    --
    Thanks,
    Terry
    Terry, Sep 20, 2007
    #3
  4. Terry

    Jake Barnes Guest

    On Sep 20, 1:30 pm, Terry <> wrote:
    > On Sep 20, 1:10 pm, David Golightly <> wrote:
    >
    > > > setTimeout(functRef,i--,5000);

    >
    > > Same timeout interval: 5000. It should be something like 200*i.

    >
    > I thought that by doing it the way that I was doing it that functref
    > is called every 5 seconds (that is, 5 seconds between iterations)


    Seems like you should be using setInterval, not setTimeout.
    Jake Barnes, Sep 20, 2007
    #4
  5. Terry

    Terry Guest

    On Sep 20, 1:51 pm, Jake Barnes <> wrote:
    > Seems like you should be using setInterval, not setTimeout.

    What I am trying to do is have each div's display property set to
    none. I would like the last div set to none after 1 second, and then
    the next to last div set to none one second after that and so on. So I
    think using setTimeout is fine.

    Terry
    Terry, Sep 20, 2007
    #5
  6. Terry

    Jake Barnes Guest

    On Sep 20, 10:55 am, Terry <> wrote:
    > while (i>=0)
    > {
    > var functRef =
    > callLater(document.getElementById(previous).getElementsByTagName('div')
    > );
    > setTimeout(functRef,i--,5000);
    >
    > }
    >
    > }



    I don't think you understand what this while loop is doing. It is
    looping through every div, all at once, and saying they should all
    disappear in 5 seconds. So, yes, they all disappear at once, because
    that is what your code says they should do.

    What you want is a function that removes one div every 5 seconds. For
    that you should use setInterval. Create a closure with the id (or
    reference to) of the div you want to have disappear, and give that,
    one at a time, to setInterval.

    Another way to do it would be to keep the loop you have now, but
    multiply i by 5000 and give that as the value to setTimeout. Thus you
    would set the timeout of every div, but the value would go up as i
    went up. You'd get the effect you want, if the effect you want is
    purely visual.
    Jake Barnes, Sep 21, 2007
    #6
  7. Jake Barnes wrote:
    > On Sep 20, 10:55 am, Terry <> wrote:
    >> while (i>=0)
    >> {
    >> var functRef =
    >> callLater(document.getElementById(previous).
    >> getElementsByTagName('div'));
    >> setTimeout(functRef,i--,5000);
    >>
    >> }
    >>
    >> }

    >
    >
    > I don't think you understand what this while loop is doing.
    > It is looping through every div, all at once, and saying
    > they should all disappear in 5 seconds.


    The second argument to the - setTimeout - function is the one that
    provides the millisecond interval. Here that interval is not 5 seconds
    but is instead - i-- -, which is going to be a variable value that gets
    smaller as the loop goes on, but probably is never that large a value.

    > So, yes, they all disappear at once,


    Or at least in such rapid succession that the result appears to be 'at
    once'.

    > because
    > that is what your code says they should do.
    >
    > What you want is a function that removes one div every 5
    > seconds. For that you should use setInterval. Create a
    > closure with the id (or reference to) of the div you want
    > to have disappear, and give that, one at a time, to
    > setInterval.

    <snip>

    If the closure has a reference to a single DIV element won't the result
    of using it with - setInterval - be hiding the same element at 5 second
    intervals?

    Richard.
    Richard Cornford, Sep 21, 2007
    #7
  8. Terry

    Terry Guest

    On Sep 21, 2:29 am, Jake Barnes <> wrote:
    >
    > I don't think you understand what this while loop is doing. It is
    > looping through every div, all at once, and saying they should all
    > disappear in 5 seconds. So, yes, they all disappear at once, because
    > that is what your code says they should do.
    >
    > What you want is a function that removes one div every 5 seconds. For
    > that you should use setInterval. Create a closure with the id (or
    > reference to) of the div you want to have disappear, and give that,
    > one at a time, to setInterval.
    >
    > Another way to do it would be to keep the loop you have now, but
    > multiply i by 5000 and give that as the value to setTimeout. Thus you
    > would set the timeout of every div, but the value would go up as i
    > went up. You'd get the effect you want, if the effect you want is
    > purely visual.


    Okay thanks, I changed

    setTimeout(functRef,i--,4500)

    to

    setTimeout(functRef,500*i--);

    and it worked.

    I was surprised though to see that the link that I was clicking on
    have its divs appear right away.

    I guess I did not know how setTimeout would work either. I thought
    that it would suspend everything until the functions that are called
    within it were done their execution.

    I was able to create the effect that I wanted suspending action on the
    clicked link till the currently displayed links collapsing execution
    has ceased by waiting for the same amount of time that it took for
    that link's divs to collapse.

    Thanks,
    Terry
    Terry, Sep 21, 2007
    #8
  9. Terry

    Jake Barnes Guest

    On Sep 21, 4:21 am, "Richard Cornford" <>
    wrote:
    > Jake Barnes wrote:
    > > On Sep 20, 10:55 am, Terry <> wrote:
    > >> while (i>=0)
    > >> {
    > >> var functRef =
    > >> callLater(document.getElementById(previous).
    > >> getElementsByTagName('div'));
    > >> setTimeout(functRef,i--,5000);

    >
    > >> }

    >
    > >> }

    >
    > > I don't think you understand what this while loop is doing.
    > > It is looping through every div, all at once, and saying
    > > they should all disappear in 5 seconds.

    >
    > > What you want is a function that removes one div every 5
    > > seconds. For that you should use setInterval. Create a
    > > closure with the id (or reference to) of the div you want
    > > to have disappear, and give that, one at a time, to
    > > setInterval.

    >
    > <snip>
    >
    > If the closure has a reference to a single DIV element won't the result
    > of using it with - setInterval - be hiding the same element at 5 second
    > intervals?


    Yes, true, unless you use a naming convention like:

    var idOfDivToDisappear = "divToDisappear" +
    variableThatGetsIncremented;

    The variableThatGetsIncremented would have to be inside the enclosure.
    It might initially have the value of i, but after that it would have
    to increment itself. I mean, the code inside the enclosure would have
    to increment it each time setInterval triggers the code in the
    enclosure.

    But, I now see that multiplying i by 5000 and giving that to
    setTimeout is probably the simpler solution.
    Jake Barnes, Sep 22, 2007
    #9
  10. In comp.lang.javascript message <
    glegroups.com>, Thu, 20 Sep 2007 23:29:38, Jake Barnes
    <> posted:

    >Another way to do it would be to keep the loop you have now, but
    >multiply i by 5000 and give that as the value to setTimeout. Thus you
    >would set the timeout of every div, but the value would go up as i
    >went up. You'd get the effect you want, if the effect you want is
    >purely visual.


    That creates multiple timers.

    A more economical way is to set a timeout to call a function to close
    the first div and set a timeout for the second div to ...

    Untested code, to show idea :-

    function ShutOne(N) { if (N<0) return
    ShutDiv(N)
    setTimeout("ShutOne(" + (N-1) + ")", 5000) }

    setTimeout("ShutOne(6)", 5000)

    It's a good idea to read the newsgroup c.l.j and its FAQ. See below.

    --
    (c) John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v6.05 IE 6
    news:comp.lang.javascript FAQ <URL:http://www.jibbering.com/faq/index.html>.
    <URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
    <URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
    Dr J R Stockton, Sep 22, 2007
    #10
    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. DP
    Replies:
    0
    Views:
    1,141
  2. Mr. SweatyFinger
    Replies:
    2
    Views:
    1,840
    Smokey Grindel
    Dec 2, 2006
  3. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    743
  4. Andries

    I know, I know, I don't know

    Andries, Apr 23, 2004, in forum: Perl Misc
    Replies:
    3
    Views:
    228
    Gregory Toomey
    Apr 23, 2004
  5. mscir
    Replies:
    3
    Views:
    306
    Martin Honnen
    Jun 26, 2005
Loading...

Share This Page