delaying appearance of items on webpage

Discussion in 'HTML & Website Design' started by tsoprano, Feb 2, 2010.

  1. #1
    any one know of javascript that can delay the appearance of a button or table for x seconds into the page loading?

    ie the page all loads, while the optin box appear 10 seconds after.

    i could do it with iframe, ie set an iframe with a redirect in 10 seconds. but there must be a slicker way.

    any help appreciated. thanks
     
    tsoprano, Feb 2, 2010 IP
  2. JeffHood

    JeffHood Peon

    Messages:
    27
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    What you're describing is called a 'time out', and can be implemented using the setTimeout(function, timeout) function.

    I usually recommend jQuery, but in plain JavaScript it would be:
    Just replace ELEMENT with the DOM ID of whatever button you're looking to display after the page loads.
     
    JeffHood, Feb 2, 2010 IP
  3. TimothyJohn

    TimothyJohn Member

    Messages:
    786
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    35
    #3
    You could always make the button using flash and then make it fade in after 10 seconds and when clicked go to a url. Very easily done if you know how to use macromedia flash :p
     
    TimothyJohn, Feb 2, 2010 IP
  4. krsix

    krsix Peon

    Messages:
    435
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #4
    This is not a good idea, for anyone reading. Really, don't do this.
     
    krsix, Feb 2, 2010 IP
  5. WebhostListin

    WebhostListin Peon

    Messages:
    40
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    The javascript code suggested by JeffHood should do it. You need to set the style to display: none in addition to that, of course!
     
    WebhostListin, Feb 2, 2010 IP
  6. tsoprano

    tsoprano Peon

    Messages:
    75
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    thanks i think this will work. Only think is this is an aweber form sitting in a table.

    do i need to put the table in div tags labelled? then call it as above?
     
    tsoprano, Feb 3, 2010 IP
  7. TimothyJohn

    TimothyJohn Member

    Messages:
    786
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    35
    #7
    haha can I ask why? Is it not considered good form to create things with flash anymore? Its just a button, don't think it really matters whether it is flash or created using JavaScript. Nearly everyone has some sort of flash player on their computer...
     
    TimothyJohn, Feb 3, 2010 IP
  8. tsoprano

    tsoprano Peon

    Messages:
    75
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    lol, ok i could do that with an animated gif why would i need flash?

    but thanks for the thought.
     
    tsoprano, Feb 3, 2010 IP
  9. tsoprano

    tsoprano Peon

    Messages:
    75
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    <script type="text/javascript">
    
          setTimeout(function(){document.getElementById("box").display="block";}, 10000);
          </script>
          
          
          
          <div class="box">
            <table>x</table>
          </div>
    
    
    Code (markup):

    thats just displaying it as it was before, ie at once. what do i need to change
     
    tsoprano, Feb 3, 2010 IP
  10. WebhostListin

    WebhostListin Peon

    Messages:
    40
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Change
    to

    <div id="box" style="display: none">
    <table>x</table>
    </div>


    You need not use a div, you can add the id/style code for the table and that too will work.
     
    WebhostListin, Feb 4, 2010 IP
  11. tsoprano

    tsoprano Peon

    Messages:
    75
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    thanks, how do i make it appear, when i change <div id="box" style="display: none"> to <div id="box" style="display: block"> it shows up.

    how to i call the function.
     
    tsoprano, Feb 4, 2010 IP
  12. krsix

    krsix Peon

    Messages:
    435
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #12
    Try:

    Try this:
    
    <script type="text/javascript">
    function showBox(){document.getElementById("box").style.display = 'block';}
    setTimeout(showBox(), 10000);
    </script>
    
    <div id="box" style="display: none">
    x </div> 
    Code (markup):
     
    krsix, Feb 4, 2010 IP
  13. tsoprano

    tsoprano Peon

    Messages:
    75
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #13
    thats not working, giving an error on page "object required" on that line
     
    tsoprano, Feb 4, 2010 IP
  14. WebhostListin

    WebhostListin Peon

    Messages:
    40
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #14
    <body onload='setTimeout("showBox()", 10000);'>
    ...
    </body>

    The first setTimeout argument should be in quotes
     
    WebhostListin, Feb 4, 2010 IP
  15. tsoprano

    tsoprano Peon

    Messages:
    75
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #15
    ok now theres no error, but it still does not "appear". Its hiddon on load up. and stays that way ;( im thinking dhtml maybe an answer, ie use some behaviour on the layer div. like fade, any advice grateful, thanks.

    code thats there now:
     
    tsoprano, Feb 5, 2010 IP
  16. krsix

    krsix Peon

    Messages:
    435
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #16
    function showBox(){document.getElementById("box").style.display = 'block';}
    setTimeout("showBox();", 10000);

    see if that works
     
    krsix, Feb 5, 2010 IP
  17. tsoprano

    tsoprano Peon

    Messages:
    75
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #17
    yes!

    thanks for your help. (rep added to all who helped, even TimonthyJohn.

    thats great. its a really usefull peice of code that should be available to others:

    will make the x appear(infatct anything inside the div) after 10 seconds (10000 miliseconds)
     
    tsoprano, Feb 5, 2010 IP
  18. krsix

    krsix Peon

    Messages:
    435
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #18
    You have two </div>s, the x should be inside the first one.
     
    krsix, Feb 5, 2010 IP
  19. worlddomain

    worlddomain Well-Known Member

    Messages:
    1,138
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    110
    #19
    Hi tsoprano,

    trying to PM you - says you inbox is full... pls PM me once you have it sorted for some graphic work
    cheers
     
    worlddomain, Mar 15, 2010 IP