Hey I'm trying to find a way to show a div with text and images in it with a 'OK' button also in it that enables the user to close this div once they read it and this div only show once per day. I'm making a javascript Pet game using this money popup div telling the owner they have recieve free pet money once per day. I have found stuff simular to this but only work with a popup window. Please Help! Regards, Jason
<html> <head> <script type="text/javascript"> var days = "1"; var youmsg = "Got an offer! <br><br><input value='close' type='button' Onclick='clo()'>" function getCookie(c_name) { if (document.cookie.length>0) { c_start=document.cookie.indexOf(c_name + "="); if (c_start!=-1) { c_start=c_start + c_name.length+1; c_end=document.cookie.indexOf(";",c_start); if (c_end==-1) c_end=document.cookie.length; return unescape(document.cookie.substring(c_start,c_end)); } } return ""; } function setCookie(c_name,value,expiredays) { var exdate=new Date(); exdate.setDate(exdate.getDate()+expiredays); document.cookie=c_name+ "=" +escape(value)+ ((expiredays==null) ? "" : ";expires="+exdate.toGMTString()); document.getElementById("pet").innerHTML = youmsg; //window.open ("http://www.orkutfans.com","windowName"); } function checkCookie() { username=getCookie('username'); if (username!=null && username!="") { //alert('Welcome again '+username+'!'); //document.write("hello "+username); //window.open("http://www.sillycorner.com","windowName"); } else { username="copy"; if (username!=null && username!="") { setCookie('username',username,days); // window.open("http://www.orkutfans.com","windowName"); } } } function clo() { document.getElementById("pet").innerHTML = ""; } </script> </head> <body onLoad="checkCookie()"> <div id="pet"><div> </body> </html> HTML: this is perfect for you just edit day's you want to make div off and your message / html code for offer. don't put " instead put ' or \" in youmsg variable. Here is the test page. hindimp3songs.info/offer.htm just delete cookies to chk working. if you found my post helpful try to donate $ 1/2/3 for my need! No thanks as i am learning a lot by helping you!
hi there, i was just trying to do the same thing and am really struggling. i've pasted a few few bits together to try and make this work but as yet no luck the background is just an image for now, but i would like it so that when a user goes to the shop part of my web site http://www.emlltd.com a div style pop up apears explaining that its just part of the site and if want to go to main website then click here.... I can get the pop up to work but i want it to only display once a day, this is the tricky bit... any help or push in the right direction would be greatly apriciated here is what i've pasted together so far (obviously the image is not there...) <html> <head> <style type="text/css"> <!-- body { background-image: url(../images/page_bg.gif); background-repeat: repeat; height: 100%; margin: 0; padding: 0; font: normal 12px Verdana, Arial, Helvetica, sans-serif; background: #555; position: relative; } img { border: none; } #hideshow { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } #fade { background: #000; position: fixed; width: 100%; height: 100%; filter:alpha(opacity=50); opacity: .50; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /*--IE 8 Transparency--*/ left: 0; z-index: 10; } .popup_block { background: #ddd; padding: 10px 20px; border: 10px solid #fff; float: left; width: 480px; position: fixed; top: 20%; left: 50%; margin: 0 0 0 -250px; z-index: 100; } .popup_block .popup { float: left; width: 100%; background: #fff; margin: 10px 0; padding: 10px 0; border: 1px solid #bbb; } .popup h3 { margin: 0 0 20px; padding: 5px 10px; border-bottom: 1px solid #bbb; font-size: 1.5em; font-weight: normal; } .popup p { padding: 5px 10px; margin: 5px 0; } .popup img.cntrl { position: absolute; right: -20px; top: -20px; } /*--Making IE6 Understand Fixed Positioning--*/ *html #fade { position: absolute; top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop : document.body.scrollTop); } *html .popup_block { position: absolute; top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop +((documentElement.clientHeight-this.clientHeight)/2) : document.body.scrollTop +((document.body.clientHeight-this.clientHeight)/2)); left:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollLeft + (document.body.clientWidth /2 ) : document.body.scrollLeft + (document.body.offsetWidth /2 )); } /*--IE 6 PNG Fix--*/ img{ behavior: url(iepngfix.htc) } </style> <script type="text/javascript"> var days = "1"; var youmsg = "Got an offer! <br><br><input value='close' type='button' Onclick='clo()'>" function getCookie(c_name) { if (document.cookie.length>0) { c_start=document.cookie.indexOf(c_name + "="); if (c_start!=-1) { c_start=c_start + c_name.length+1; c_end=document.cookie.indexOf(";",c_start); if (c_end==-1) c_end=document.cookie.length; return unescape(document.cookie.substring(c_start,c_end)); } } return ""; } function setCookie(c_name,value,expiredays) { var exdate=new Date(); exdate.setDate(exdate.getDate()+expiredays); document.cookie=c_name+ "=" +escape(value)+ ((expiredays==null) ? "" : ";expires="+exdate.toGMTString()); document.getElementById("pet").innerHTML = youmsg; //window.open ("http://www.orkutfans.com","windowName"); } function checkCookie() { username=getCookie('username'); if (username!=null && username!="") { //alert('Welcome again '+username+'!'); //document.write("hello "+username); //window.open("http://www.sillycorner.com","windowName"); } else { username="copy"; if (username!=null && username!="") { setCookie('username',username,days); // window.open("http://www.orkutfans.com","windowName"); } } } function clo() { document.getElementById("pet").innerHTML = ""; } </script> <script language=javascript type='text/javascript'> function hideDiv() { if (document.getElementById) { // DOM3 = IE5, NS6 document.getElementById('hideshow').style.visibility = 'hidden'; } else { if (document.layers) { // Netscape 4 document.hideshow.visibility = 'hidden'; } else { // IE 4 document.all.hideshow.style.visibility = 'hidden'; } } } function showDiv() { if (document.getElementById) { // DOM3 = IE5, NS6 document.getElementById('hideshow').style.visibility = 'visible'; } else { if (document.layers) { // Netscape 4 document.hideshow.visibility = 'visible'; } else { // IE 4 document.all.hideshow.style.visibility = 'visible'; } } } </script> </head> <body onLoad="checkCookie()"> <!--POPUP--> <div id="hideshow" style="visibility:visible;"> <div id="fade"></div> <div class="popup_block"> <div class="popup"> <a href="javascript:hideDiv()"><img src="icon_close.png" class="cntrl" title="Close" /></a> <h3>Welcome to EML's special offers</h3> <p>Our shopping basket has a limited number of products. If you would like to see our full range please visit our main website by clicking <a href="http://www.emlltd.com">here</a></p> <p><strong>To start shopping please close the box. </strong></p> </div> </div> </div> <!--END POPUP--> <!--Below is where the header information is located--> <table> <tr><td><a href="test 4.html"><img src="bleedingsun_1280.jpg" width="1280" height="1024" border="0"></a></td> </tr> </table> </body> </html> HTML:
A detailed tutorial using javascript and html cookies can be found from here : Show Div Once a Day using JavaScript