Member Avatar for goodluck4287

Instead of a countdown and then redirect, I would like to countdown and unhide. I have used java before as a novice, but javascript looks like a relatively new beast for me. I found this counter and think it looks good, I guess it just resents the next smallest digit each time it reaches one. Is there some way to maybe make this a subclass of something that goes:

if 0.0, then unhide, else hide. What tags would I have to give the div on my style sheet. Or maybe there is a better way to write the countdown from 15 (or x) seconds. Thanks for any help.

<script> 
<!-- 
// 
 var milisec=0 
 var seconds=15 
 document.counter.d2.value='15' 

function display(){ 
 if (milisec<=0){ 
    milisec=9 
    seconds-=1 
 } 
 if (seconds<=-1){ 
    milisec=0 
    seconds+=1 
 } 
 else 
    milisec-=1 
    document.counter.d2.value=seconds+"."+milisec 
    setTimeout("display()",100) 
} 
display() 
--> 
</script>
  • 3 Contributors
  • 2 Replies
  • 167 Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by essential

Recommended Answers

All 2 Replies

Member Avatar for almostbob 
(document.getElementById) ? dom = true : dom = false;
function hidetime(id) {
 if (dom) {setTimeOut("document.getElementById(id).style.visibility='hidden';",10000)} //IE
 if (document.layers) {SetTimeOut("document.layers[id].visibility='hide';",10000)} } //mozilla
function showtime(id) {
 if (dom) {setTimeOut("document.getElementById(id).style.visibility='visible';",10000)}
 if (document.layers) {setTimeOut("document.layers[id].visibility='show';",10000)} }

Cross browser capable scripts to show/hide

<body onload='showtime("thisimage");'>
<img style='visibility:hidden' src='image1.jpg' id='thisimage'>
</body></html>

dont know about the display part, that just P___s me off when someone does it, so I havent thought about it, but if you combine the codes it might do it

Member Avatar for essential

You can also try this demo.

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="#internal-style"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="xhtml10" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=5; IE=EmulateIE7; IE=8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Countdown timer to hide my div's</title>
<style id="internal-style" type="text/css">
/* <![CDATA[ */

body > div {
   background-color: #eee;
   color: #405060;
   margin: 0 auto;
   height: 300px;
   width: 500px;
   padding: 1em;
   text-align: center; }

div span {
   display: table-cell;
   vertical-align: middle;
   height: 300px;
   width: 100%; }

div.display-none {
   display: none; }

div.display-table {
   display: table; }

/* ]]> */
</style>
<script type="text/javascript">
/* <![CDATA[ */
// Moded

var browser = function( ids ) {
   if ( document.all )
      return document.all[ids]; 
   else if ( document.getElementById )
      return document.getElementById( ids );
   else 
      return document.layers[ids];
};

var num, milisec = 0;
var seconds = 15;
var stop = function( arg ) {
    return clearTimeout( arg ); }
function hideAgain()
{
if ( seconds === 15 ) 
try { browser("myDiv").className = "display-none";
display(); 
    } catch( error ) {
           alert("Unable to hide div!");
    } 
}   

function display() {
   if ( seconds !== 0 && browser ) {
        try {
browser('counter').d2.value = seconds;
        } 
        catch( e ) {
        alert("\nFailed to execute script!");
        }      
   } 
num = setTimeout("display()", 1000);

    if ( seconds <= 0 ) {
       try { browser("myDiv").className = "display-table"; 
stop( num ); seconds = 15; 
       } catch( err ) {
            alert("Unable to clear timer!");
       } return;
}

seconds--;
}

// Its up to you on how you want to trigger these function.

// in this example i will incoporate it with the ONLOAD event.
window.onload = display;

/* ]]> */
</script>
</head>
<body>
<div id="myDiv" class="display-none"><span>#JavaScript Demo</span></div>
<form action="#" id="counter" onsubmit="return false;">
<div>
<label for="d2">Timer: <input type="text" id="d2" name="d2" size="4" value="" /></label> <input type="button" id="btn" name="btn" value="Hide" onclick="hideAgain()" />
</div>
</form>
</body>
</html>

Hope this one helps you in what you need. Good day...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.