/ this works but is slow and shows the link <a href="downloadFile.zip" id="download" class="button">Download the file...</a> until the javascript is fully loaded and then replace it with the newElement.innerHTML = "You can download the file in 10 seconds."; so I decided to apply a style to the <a display:none;....

Download the file...

in the javascript how can after the time is finished ie reached 0 remove the style or change it to display:inline;?

and are there any jquery alternatives?

http://jsfiddle/rATW7/ this works but is slow and shows the link <a href="downloadFile.zip" id="download" class="button">Download the file...</a> until the javascript is fully loaded and then replace it with the newElement.innerHTML = "You can download the file in 10 seconds."; so I decided to apply a style to the <a display:none;....

Download the file...

in the javascript how can after the time is finished ie reached 0 remove the style or change it to display:inline;?

and are there any jquery alternatives?

• javascript
• jquery
• css

3 Answers 3

The easiest way to do this is to have two elements. One for the notice of when the file can be downloaded and the other to be the actual download button. After the internal is plete you simply toggle the visibility of the two

HTML:

<a href="downloadFile.zip" id="download" class="button" style="display: none">Download the file...</a>
<p id="notice">You can download the file in 10 seconds</p>

JavaScript:

$(document).ready(function () {
    var counter = 10;
    var id = setInterval(function() {
       counter--;
       if(counter > 0) {
            var msg = 'You can downnload the file in ' + counter + ' seconds';
            $('#notice').text(msg);
       } else {
            $('#notice').hide();
            $('#download').show();
            clearInterval(id);
      }
    }, 1000);
});

Fiddle: http://jsfiddle/rATW7/26/

If you set your link to initially have display: none; and then set the display to inline with JavaScript, it should be fine.

See the change here: http://jsfiddle/H3XrV/

Note the display: none; in your CSS, and the following line of JavaScript to show the element:

downloadButton.style.display = 'inline';

It's not exactly what you have, but it sounds like jQuery delay will work for you.