0

I searched every topic related count down but could not find a solution I need to add count down timer before the Close button gets visible. Here is the code i have and need the Close text / button to be visible after a timer of 10 seconds is finished while count down goes a text Please Wait for x seconds to show.

Please help me add a timer count down before close button shows to visitors.

<div align="center" id="sticky_bar">

<div id="sticky_bar_logo">
<div style="padding-left:5%;width:50%;float:left;text-align:left;">
<a href="#%site_url%#/" target="_blank" style="text-decoration:none; color:#FFFFFF;">#%site_title%#</a>
</div>
<div style="padding-right:5%;width:35%;float:right;text-align:right;">

<a href="#" onclick="document.getElementById('sticky_bar').style.display='none';" style="color:#FFFFFF;text-decoration:none; ">CLOSE</a>
</div>
</div>
<div id="sticky_bar_ad">#%ad1%#</div>
</div>
Selva Supriya VS
  • 370
  • 1
  • 4
  • 11
Ora Funzone
  • 11
  • 4
    Where is your attempt? You claim to have searched for information, and there are *many* examples of countdown timers for JavaScript to be found in even a cursory Google search. As well as examples to show/hide an element. In your research, what have you found? What attempt did you make? In what way does that attempt not work as expected? – David Sep 08 '19 at 13:30
  • I am sorry i have missed out :( i checked and solved the problem thank you so much – Ora Funzone Sep 08 '19 at 20:04

1 Answers1

0

HTML Part:

<div align="center" id="sticky_bar">

<div id="sticky_bar_logo">
<div style="padding-left:5%;width:50%;float:left;text-align:left;">
<a href="#%site_url%#/" target="_blank" style="text-decoration:none; color:#FFFFFF;">#%site_title%#</a>
</div>
<div style="padding-right:5%;width:35%;float:right;text-align:right;">

<a href="#" onclick="document.getElementById('sticky_bar').style.display='none';" style="color:#FFFFFF;text-decoration:none; " id="closeBtn">CLOSE</a>
</div>
</div>
<div id="sticky_bar_ad">#%ad1%#</div>
</div>

JavaScript Part:

 setTimeout(function(){ //function will be executed after 10 seconds       
    document.getElementById("closeBtn").style.display="block"; //will show the button
    }, 10*1000);

Explanation:

The setTimeout() method is inbuilt & calls a function or evaluates an expression after a specified number of milliseconds.

document.getElementById("closeBtn").style is used to access styling of an element with id closeBtn (i.e the CLOSE button)

Rohith K N
  • 845
  • 6
  • 17