SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict
    Join Date
    May 2006
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript replace question.

    Hello, just need some insight on this please.

    For instance there are two dividers. One is set up something like this.
    <div id="1">something in here</div>
    the other like this:
    <div id="2">something else in here</div>

    Is there a way to show whats in divider 1 after so many seconds and then close it and then show whats in divider 2 for the next seconds and close it. Then to start over? Is this even possible with javascript? If so, know any links I can read up on this with? Thank you very much.

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,187
    Mentioned
    191 Post(s)
    Tagged
    2 Thread(s)

    div toggling

    and I had thought "div" stood for "division" all this time.
    You can easily use javascript to toggle the div's styles eg.
    var div1 = document.getElementById('1');
    function toggle(){
    div1.style.visibility = 'hidden';
    ....
    settimeout('toggle', 1000);

    Except I don't think you should use numbers for id's (AFAIK only works in IE)

    I think if you for - javascript settimeout visibility - you should find something. Most likely example code rather than a tutorial type of thing.

  3. #3
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, no- div is short for five hundred and four.

  4. #4
    SitePoint Addict
    Join Date
    May 2006
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you serious? Does it mean division? LOL. I 'm trying the code, thanks.

  5. #5
    SitePoint Addict
    Join Date
    May 2006
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok now you both really have me confused, lmao. Are you messing with me? I'm probably being very gullable. Does Div used in web pages mean divider??

    Here's the code I'm trying just to see if it hides the div first but it doesn't. Anyone know why? Thanks.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
      <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
      <title>startertemplate</title>
      <style type="text/css">
    .main { border: 5px solid rgb(0, 0, 0);
    margin: auto;
    width: 600px;
    }
    .body { margin: auto;
    display: block;
    width: 100&#37;;
    height: 100px;
    }
      </style>
    <script>
    var divone = document.getElementById('one');
    function toggle(){
    divone.style.visibility = 'hidden';
    }
    </script>
    
    </head>
    <body>
    <div class="main" style="border: 5px solid rgb(0, 0, 0);">
    <div class="body">
    <div id="one">test
    </div>
    </div>
    </div>
    </body>
    </html>
    Last edited by 1Jen; Apr 10, 2007 at 23:32.

  6. #6
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,187
    Mentioned
    191 Post(s)
    Tagged
    2 Thread(s)

    toggle divs

    According to the w3schools site:
    The <div> tag defines a division/section in a document.
    Actually, I would consider an <hr /> tag more of a divider, but I'm too pragmatic to split hairs.
    Anyway, the code I posted wasn't the entire function you need, only enough to give you an idea of what to look for. You'll also need some way of determining the present visibilty "state" to toggle the 2 divs. Either by using a flag or getting the current style value.
    I did a for - javascript settimeout visibility toggle - and found these:
    http://codingforums.com/archive/index.php?t-73687.html
    http://ilovethecode.com/Javascript/J...vascript.shtml
    http://www.webmasterworld.com/forum91/442.htm
    http://trace.wisc.edu/wcag_wiki/inde...&printable=yes
    If you wanted to you could find more examples, but it would probably be best to experiment with a simpler one and work up to something more complex.

  7. #7
    SitePoint Addict
    Join Date
    May 2006
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, I'll give up and look it up and see what it means. I got this to hide the text after googling like you said. It seems to be hiding the text which is a good sign, now I just have to see if I can make it appear again.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
      <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
      <title>startertemplate</title>
      <style type="text/css">
    .main { border: 5px solid rgb(0, 0, 0);
    margin: auto;
    width: 600px;
    }
    .body2 { margin: auto;
    display: block;
    width: 100&#37;;
    height: 100px;
    }
      </style>
    <script type="text/javascript">
    function change()
      {
      document.getElementById("div1").style.visibility="hidden";
      }
    </script>
    </head>
    <body>
    <div class="main" style="border: 5px solid rgb(0, 0, 0);">
    <div class="body2">
    <div id="div1"><BODY onload="change();">
    Hide and seek.</div>
    </div>
    </div>
    </body>
    </html>

  8. #8
    SitePoint Addict
    Join Date
    May 2006
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK so I tried to add this to the just above working code.

    Read between my brackets in function switch() in the below javascript on what I still need and am having trouble with. Hope someone can help, thanks!
    HTML Code:
    <html>
    <head>
    <style type="text/css">
    .main { border: 5px solid rgb(0, 0, 0);
    margin: auto;
    width: 600px;
    }
    .body2 { margin: auto;
    display: block;
    width: 100%;
    height: 100px;
    }
    </style>
    <script type="text/javascript">
    function change()
      {document.getElementById("div1").style.visibility="hidden";}
    function change2()
      {document.getElementById("div1").style.visibility="visible";}
    
    function switch(){I need some code in here to switch between functions
    change() and change2() in a setTimeout or something. Can you 
    put two functions into a setTimeout?}
    
    </script>
    </head>
    <body>
    <div class="main" style="border: 5px solid rgb(0, 0, 0);">
    <div class="body2">
    <div id="div1"><BODY onload="switch();">
    This is some text.</div>
    </div>
    </div>
    </body>
    </html>

  9. #9
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,187
    Mentioned
    191 Post(s)
    Tagged
    2 Thread(s)

    extra body

    I wouldn't use another body tag. Often times a body tag onload is used so a functon will run when the page loads without needing user input. But a page should really only have one of them. Better to have something like
    HTML Code:
    <input type="button" value="toggle" onclick="change()" />
    for testing purposes.
    document.getElementById("div1").style.visibility="hidden";
    is OK as far as it goes, but the function needs a conditional test. eg. using a "flag"
    HTML Code:
    .....
    if(divone == "visible"){
    document.getElementById("div1").style.visibility="hidden";
    divone = "hidden";
    } else {
    document.getElementById("div1").style.visibility="visible";
    divone = "visible";
    }
    or by getting it's style value eg.
    HTML Code:
    .....
    if(document.getElementById("div1").style.visibility == "visible"){
    document.getElementById("div1").style.visibility="hidden";
    } else {
    document.getElementById("div1").style.visibility="visible";
    }

  10. #10
    SitePoint Addict
    Join Date
    May 2006
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, you're so smart, I see where your going with this, I'll try it! Regarding the body onload, its working in the above frame with the smiley. I can't use buttons or a hrefs although I know that would be easier. I need the actual text. Thanks a bunch.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •