How To Open/Show Close/Hide DIV After Some Desired Time?

Today after many previous post like “How To Open DIV On Click” or “How To Close DIV On Click”, I am here to show an awesome code that is “How To Open/Close DIV OnClick/OnLoad After Some Desired Time”. This is absolutly an awesome code and I think that you must need it if you are providing data on your sites or links to them. First of all I describe this code in front of you.

First thing is that this is a linked text or button or image on which where you click and then the timer start till your pre-setted time the it will open a DIV anywhere on your page that can contain any data, any style and any position. The visitor is not able to see the DIV with his data untill the timers runout ofter click that is also benifical to your SEO that you can increse your pagetime that will help you to increase your ranking and also increase your earning if you are using ads through increasing impression on it. The visitor will remian stuck to your page because he wants the hidden DIV data like some Crack, Serials, Patches, Codes download links. 🙂

But there was another question poping up in my mind that visitor will think that this button is corrupt and is not able to work or spam then it will leva your site and also leave the bad expirence then i think that i can add some text like this beside the button “Please Wait 5 Sec To Get Your Link”. That’s the answer to my question But…

There was another question that what to do not to bore my visitor then i get some cool ideas and added the reverse counter to that code with little and short javascript that will work something like this “5,4,3,2,1” Get your link now then the other code is finalized for this that i am also sharing below. Now it’s upto you what to use and where to use…

And I have and inverse code also here that will do the same but will close the DIV, that is helpfull to those who add there Ads to a DIV and fixed them in the middle of there sites that after comming visitor then click on close button to remove it and you can not get some time impression of your visitor on it. So the below second code will do the work for, After clicking close button it will not hide the DIV immediatly but it will hide after some time and as above you can also add counter like “This Ads Will Be Closed In 5 Sec”. From this statement your visitor will take a deep breath till you got the ads better impression to increase your earning.

Without more preface here we will expirence the live DEMO and the list of features in short thaten you will be able to get the awesome codes below with full tuotorial and customization tricks…

Features:

1.) 4 Type Of Awesome Code Available.
2.) Code Are Based Upon HTML-JavaScript Only.
3.) No JQuery File Linked Or Added And CSS Is Added For Style Only.
4.) Easy To Install And Add.
5.) Quick To Load And Use.
6.) Open/Show DIV With Displaying Counter And Without Counter.
7.) Close/Hide DIV With Displaying Counter And Without Counter.
8.) Simple Digital Counter With Fully Customizable Codes.
9.) The Time Can Easily Be-Change.
10.) You Can Also Use It With Any HTML-JavaScript-JQuery Code.
11.) You Can Fully Customize The DIV Style With Adding Your Desired CSS.
12.) You Can Display DIV Anywhere On The PAge.
13.) There Are Two Codes With Auto Timer Start Or OnClick Start.
14.) Best For SEO And Increase PageViewTime.
15.) Also Increase Impression On Ads That Will Increase Earning.
16.) Best For Link Provider Sites And Blog.
17.) Best For POP-UP Fixed Ads.
18.) Best For Online TV Ads.
19.) A LOt Of Other Effective Use.
20.) Awesome And Cute Short Code For Pro-Designers.
21.) You Can Add Anything In DIV Like Image, Text, Links, HTML-JavaScript-Jquery Codes, Data etc.
22.) You Can Add It Anywhere Like HTML Page, Blog Post, Blog HTML-JavaScript Widget etc.

How To Add In Blogspot?

1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To “Layout“.
4.) Click “Add A Gadget” Where You Want To Add It.
5.) Now Scroll To “HTML-JAVASCRIPT“.
6.) Click “+” Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done.

How To Add In Website?

1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between “<body> </body>“.
3.) Save It, Now You Are Done.

Open/Show DIV OnLoad After Some Time With Counter:

<form name="redirect"> 
Please Wait <input size="1" name="redirect2" style="width:10px;background-color:transparent;border: 0px solid;color:#000;"/>Seconds To View The DIV... 
</form> 
<div id="exeideas" style="visibility: hidden"> 
This Is The Hidden DIV Data.
</div> 
<script type="text/javascript"> 
var countdownfrom=5
var currentsecond=document.redirect.redirect2.value=countdownfrom+1 
function countredirect(){ 
if (currentsecond!=0){ 
currentsecond-=1 
document.redirect.redirect2.value=currentsecond 
} 
else{ 
showIt() 
return 
} 
setTimeout("countredirect()",1000) 
} 
countredirect() 
function showIt() {document.getElementById("exeideas").style.visibility = "visible";} 
</script> 

Open/Show DIV OnLoad After Some Time Without Counter:

<script type="text/javascript"> 
function exe_style_v4_popup(){document.getElementById('exeideas').style.display='block';} 
setTimeout('exe_style_v4_popup();', 5000); 
</script> 
<div id="exeideas" style="display:none;"> 
This Is The Hidden DIV Data.
</div>

Close/Hide DIV OnLoad After Some Time With Counter:

<form name="redirect"> 
Please Wait <input size="1" name="redirect2" style="width:10px;background-color:transparent;border: 0px solid;color:#000;"/>Seconds To Hide The DIV... 
</form> 
<div id="exeideas" > 
This Is The Hidden DIV Data.
</div> 
<script type="text/javascript"> 
var countdownfrom=5
var currentsecond=document.redirect.redirect2.value=countdownfrom+1 
function countredirect(){ 
if (currentsecond!=0){ 
currentsecond-=1 
document.redirect.redirect2.value=currentsecond 
} 
else{ 
showIt() 
return 
} 
setTimeout("countredirect()",1000) 
} 
countredirect() 
function showIt() {document.getElementById("exeideas").style.display = "none";} 
</script> 

Close/Hide DIV OnLoad After Some Time Without Counter:

<script type="text/javascript">
function exe_style_v4_popup(){document.getElementById('exeideas').style.display='none';}
setTimeout('exe_style_v4_popup();', 5000);
</script>
<div id="exeideas">
This Is The Hidden DIV Data.
</div>

Customization:

1.) Just Change The Black Bold Text With Your Desire.
2.) Change The Red Number With Your Desired Seconds.
3.) Change The Blue Number With Your Desired Seconds As 1000=1sec.
4.) Add #exeideas{CSS-STYLE-CODE} In Your CSS File Style The Hidden Or Be Hidden DIVs.
5.) Save And Done…