www.webdeveloper.com
Results 1 to 6 of 6

Thread: [RESOLVED] Make text appear after delay

  1. #1
    Join Date
    Jun 2006
    Posts
    204

    resolved [RESOLVED] Make text appear after delay

    How owuld I make a page come up... and then have the page show some text after say 15 seconds...

    What I mean is I want text to appear on the page after 15 seconds of being on the site...


    Any ideas?

  2. #2
    Join Date
    Apr 2005
    Location
    Essex, United Kingdom
    Posts
    187
    are you referring to the entire content of the page, or just a single block of text?

  3. #3
    Join Date
    Jun 2006
    Posts
    204
    a single block of text

  4. #4
    Join Date
    Apr 2005
    Location
    Essex, United Kingdom
    Posts
    187
    Try this. Put your text within a hidden div called "delayedText" and this should work.

    Code:
    <html>
     
    <head>
    <script>
    window.onload = function(){
      // Change this value to however many seconds you want to delay the text by.
      var theDelay = 5;
      var timer = setTimeout("showText()",theDelay*1000)
    }
    function showText(){
      document.getElementById("delayedText").style.visibility = "visible";
    }
    </script>
    </head>
    <body>
    <div id="delayedText" style="visibility:hidden">
    This is some delayed text
    </div>
    </body>
    </html>

  5. #5
    Join Date
    Oct 2013
    Posts
    2

    Multi scripts like this

    Goodday

    it is my first time I code a website, so I'm not good with it yet.
    I saw this code because I wanted to try something similar, however I wanted to have multi text divs appear with an interval.
    But when I use the code above, only the last div I entered is shown, indeed after the 8 second delay I made.
    This is the code that I'm using. Could anyone be of assistance?
    thanks
    vic



    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>testdoc</title>
    <script>
    window.onload = function(){
    // Change this value to however many seconds you want to delay the text by.
    var theDelay = 3;
    var timer = setTimeout("showText()",theDelay*1000)
    }
    function showText(){
    document.getElementById("delayedText1").style.visibility = "visible";
    }

    window.onload = function(){
    // Change this value to however many seconds you want to delay the text by.
    var theDelay = 5;
    var timer = setTimeout("showText()",theDelay*1000)
    }
    function showText(){
    document.getElementById("delayedText").style.visibility = "visible";
    }

    window.onload = function(){
    // Change this value to however many seconds you want to delay the text by.
    var theDelay = 8;
    var timer = setTimeout("showText()",theDelay*1000)
    }
    function showText(){
    document.getElementById("delayedText3").style.visibility = "visible";
    }
    </script>

    </head>

    <body>
    <div id="delayedText1" style="visibility:hidden">
    this is 3 seconden
    </div>

    <div id="delayedText" style="visibility:hidden">
    this is 5 seconden
    </div>

    <div id="delayedText3" style="visibility:hidden">
    this is 8 seconden
    </div>


    </body>
    </html>

  6. #6
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,656
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>testdoc</title>
    <script>
    function showText(id,delay){
    var elem=document.getElementById(id);
    setTimeout(function(){elem.style.visibility='visible';},delay*1000)
    }
    window.onload=function(){
    showText('delayedText1',3);
    showText('delayedText2',5);
    showText('delayedText3',8);
    }
    </script>
    </head>
    <body>
    <div id="delayedText1" style="visibility:hidden">this is 3 seconden</div>
    <div id="delayedText2" style="visibility:hidden">this is 5 seconden</div>
    <div id="delayedText3" style="visibility:hidden">this is 8 seconden</div>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles