CODEWITHSUNDEEP
javascripthtml
Aubtin Samai
Aubtin Samai

Reputation: 1361

HTML Text with Time Limit

I am wondering how I would be able to have some text show up for a few seconds in html? I want to have a loading sign in my website to show up for 10 seconds, then go away. How could I go about doing that? I don't use HTML that often.

Code I want to add Loading and flash to. 

<head>
<meta http-equiv="Content-Language" content="en-us">
<title>Catalog</title>

</head>

<body>

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="590" id="AutoNumber1" height="32">
    <tr>
        <td width="320" height="77" bgcolor="#FFFFFF">
        <p align="center">      <img border="0" src="images/logoblue.gif" width="307" height="61"></td>
<td width="380" height="77">
        <p align="center"><b><font size="5">PRODUCTS, INC.<br>
</font></b><font size="4"></font></td>
    </tr>
    <tr>
        <td width="590" height="10" bgcolor="#FFFFFF" colspan="2">
        <img border="0" src="images/divid1.gif" width="700" height="10"></td>
    </tr>
</table>
<p>&nbsp;</p>
<p>
<object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="obj1" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="842" height="539">
    <param name="movie" value="catalog.swf">
    <param name="quality" value="High">
    <embed src="catalog.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="842" height="539"></object>
</p>

</body></html>

Updated code with Virendra's changes:

<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<title>Catalog</title>
 <style type='text/css'>
    #swf_file{display:none;}
  </style>
  <script type='text/javascript'>
var timePeriodInMs = 20000;

setTimeout(function() 
{ 
    document.getElementById("texttohide").style.display = "none"; 
    document.getElementById("swf_file").style.display = "block"; 
}, 
timePeriodInMs);
</script>
</head>

<body>

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="590" id="AutoNumber1" height="32">
    <tr>
        <td width="320" height="77" bgcolor="#FFFFFF">
        <p align="center">      <img border="0" src="images/logoblue.gif" width="307" height="61"></td>
<td width="380" height="77">
        <p align="center"><b><font size="5">PRODUCTS, INC.<br>
</font></b><font size="4"></font></td>
    </tr>
    <tr>
        <td width="590" height="10" bgcolor="#FFFFFF" colspan="2">
        <img border="0" src="images/divid1.gif" width="700" height="10"></td>
    </tr>
</table>

<div id="texttohide">
    <img border="0" src="loading.gif" width="144" height="138"></div> 
<div id="swf_file"><object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="obj1" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="842" height="539">
    <param name="movie" value="catalog.swf">
    <param name="quality" value="High">
    <embed src="catalog.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="842" height="539"></object>
</div>

<p>
</p>

</body></html>

Update of an Update

<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<title>Catalog</title>
 <style type='text/css'>
    #swf_file{display:none;}
    #swf_file{height:1px; width:1px;}
  </style>
  <script type='text/javascript'>
var timePeriodInMs = 10000;

setTimeout(function() 
{ 
    document.getElementById("texttohide").style.display = "none"; 
    document.getElementById("swf_file").style.height = "138px"; 
    document.getElementById("swf_file").style.width = "144px"; }, 
timePeriodInMs);
</script>
</head>

<body>

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="590" id="AutoNumber1" height="32">
    <tr>
        <td width="320" height="77" bgcolor="#FFFFFF">
        <p align="center">      <img border="0" src="images/logoblue.gif" width="307" height="61"></td>
<td width="380" height="77">
        <p align="center"><b><font size="5">PRODUCTS, INC.<br>
</font></b><font size="4"></font></td>
    </tr>
    <tr>
        <td width="590" height="10" bgcolor="#FFFFFF" colspan="2">
        <img border="0" src="images/divid1.gif" width="700" height="10"></td>
    </tr>
</table> 

<div id="texttohide">
    <b><font size="5">Loading for a few seconds...</font></b></div> 
<div id="swf_file">
    <object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="obj1" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="879" height="564">
    <param name="movie" value="catalog.swf">
    <param name="quality" value="High">
    <embed src="catalog.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="879" height="564"></object>
</div>

<p>
</p>

</body></html>

Upvotes: 2

Views: 7173

Answers (3)

ThinkingStiff
ThinkingStiff

Reputation: 65351

You can do this without Javascript using CSS3 animation and @keyframes. position: absolute; will prevent the splash from affecting any layout and the height: 0 animation gets it out of the way when finished.

Demo: http://jsfiddle.net/ThinkingStiff/SwV9m/

CSS:

#splash {
    animation:             splash 3s linear; /* 3s for 3 seconds */
        -moz-animation:    splash 3s linear; 
        -webkit-animation: splash 3s linear; 
            -ms-animation: splash 3s linear; 
    border: 1px solid black;
    height: 100px;
    line-height: 100px;
    opacity: 0;
    position: absolute;
    text-align: center;
    width: 250px;
    z-index: 1;
}

@keyframes splash { 
    0% {opacity:0; height: 100px;} 
    15% {opacity:1;} 
    85% {opacity:1;} 
    99% {opacity:0; height: 100px;}
    100% {height: 0px;} }
@-moz-keyframes splash { 
    0% {opacity:0; height: 100px;} 
    15% {opacity:1;} 
    85% {opacity:1;} 
    99% {opacity:0; height: 100px;}
    100% {height: 0px;} }
@-webkit-keyframes splash { 
    0% {opacity:0; height: 100px;} 
    15% {opacity:1;} 
    85% {opacity:1;} 
    99% {opacity:0; height: 100px;}
    100% {height: 0px;} }
@-ms-keyframes splash { 
    0% {opacity:0; height: 100px;} 
    15% {opacity:1;} 
    85% {opacity:1;} 
    99% {opacity:0; height: 100px;}
    100% {height: 0px;} }

HTML:

<div id="splash">3 second splash!</div>

Upvotes: 0

Virendra
Virendra

Reputation: 2553

This might work for you. http://jsfiddle.net/KyC3N/

<html> 
  <head> 
    <title>Hide Text demo</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script type="text/javascript"> 
      $(document).ready( function() {
        $('#texttohide').delay(5000).fadeOut();
      });
    </script>
  </head> 
  <body> 
    <div id="texttohide"> Text to hide in 5 seconds </div> 
  </body> 
</html>

Update: as per updated requirements.
This fiddle uses only JavaScript. It will display a div for 5 seconds and then hide it and display another div. http://jsfiddle.net/xZEvb/

Here is the complete code

<!DOCTYPE html>
<html>
<head>
  <style type='text/css'>
    #swf_file{display:none;}
  </style>

<script type='text/javascript'>
var timePeriodInMs = 5000;

setTimeout(function() 
{ 
    document.getElementById("texttohide").style.display = "none"; 
    document.getElementById("swf_file").style.display = "block"; 
}, 
timePeriodInMs);
</script>
</head>
<body>
    <div id="texttohide"> Text to hide in 5 seconds </div> 
    <div id="swf_file">This is swf file</div>
</body>
</html>

Upvotes: 4

jfriend00
jfriend00

Reputation: 707436

You can do it like this with plain javascript and HTML since you didn't ask for a solution using any frameworks like jQuery or YUI:

<div id="tempMessage" style="display: none;">This is my message</div>

function showMessage(text, time) {
    var o = document.getElementById("tempMessage");
    o.style.display = "block";
    o.innerHTML = text;
    setTimeout(function() {
         o.style.display = "none";
    }, time);
}

The time value is a number of milliseconds that you want the message to display for. The text can be any HTML. The message will display in the place that you put the message HTML in your page.

Sample implementation: http://jsfiddle.net/jfriend00/ePxLB/

Upvotes: 2

Related Questions