views:

89

answers:

2

I want to add an image next to "Click here to Download" Meaning when count down is over it should look something like this: Click here to Download and this image should be beside it http://svastara.info/.s/img/icon/download1.png

<script type="text/javascript">
<!--
var count=30;
var obj;
window.onload=function() {
obj=document.getElementById('delayed');
obj.onclick=function() {
if(count<=0) {
return true;
}
else {
if(count==30) {
waitForIt();
return false;
}
else {
return false;
}
}
}
}
function waitForIt() {
obj.firstChild.data='Link will be available after '+count+'secs';
if(count<=0) {
clearTimeout(cd);
obj.firstChild.data='Click here to Download';
obj.className='go';
return;
}
count--;
cd=setTimeout('waitForIt()',1000);
}
//-->
</script>


<div>
<a id="delayed" class="stop" href="http://www.epiclosers.com/"&gt;Download (30sec)</a>
</div>
A: 

Off the top of my head, why not include that image as hidden where you want it:

<img id="downloadImg" src="http://svastara.info/.s/img/icon/download1.png" style="display:none"/>

and reveal it when the timer completes, by setting the display style property to block or inline:

function waitForIt() {
    obj.firstChild.data='Link will be available after '+count+'secs';
    if(count<=0) {
        clearTimeout(cd);
        obj.firstChild.data='Click here to Download';
        obj.className='go';
        document.getElementById("downloadImg").style.display = "block";
        return;
    }
    count--;
    cd=setTimeout('waitForIt()',1000);
}
karim79
A: 
var CountdownTimer = function( id, count, imgurl ) { this.construct(id, count, imgurl); }
CountdownTimer.prototype = {
 construct: function(id,count,imgurl) {
  this.id = id;
  this.object = document.getElementById(id);
  this.count = count;
  this.interval = null;
  this.counted = false;
  this.img = new Image(); // preload
  this.img.src =  imgurl;
  this.img.border = "0";

  (function(obj) {
   obj.object.onclick = function() {
    return obj.onclick();
   };
  })(this);
 },

 tick: function() {
  this.count--;
  this.render();

  if(this.count == 0){ 
   clearInterval(this.interval);
   this.interval = null;
   this.object.appendChild(this.img);
  }
 },

 onclick: function() {
  if(!this.counted) {
   this.counted = true;
   this.render();
   (function(obj) {
    obj.interval = setInterval(function() {
     obj.tick();
    },1000);
   })(this);
   return false;
  } else if(this.count == 0)
   return true;
  else
   return false;
 },

 render: function() {
  if(this.count > 0)
   this.object.innerHTML = "Download (" + this.count + " second" + (this.count == 1 ? "" : "s") + ")";
  else
   this.object.innerHTML = "Download Now";
 }

};

window.onload = function() {
 var c = new CountdownTimer("delayed",3,"http://svastara.info/.s/img/icon/download1.png");
};
Tyson
It would be better if you would plug those in since i know so little about javascript.
Nvm working on it, looks pretty good!
Okay, how do I disable so that it won't start count down automatically, but only when users clicks it the count down starts?
okay, i will post an update - one second.
Tyson