Script only run once

[unplugged_web]

I wonder if somebody can help me please. I've got a page that shows an alert when you go to it. This works exactly how I want it to, but the problem is that it shows every time!! Is it possible to have it only show once per day? So if I go to the site on one computer it will show it, but when I click it it hides it until the next day? But if I go to the site on another computer I till still show it.I'm using

<a onclick="java script:hide()" style="cursor: pointer;"><img src="images/disclaimer_yes.png" alt="" border="0" /></a>

to close the window

[boen_robot]

Yes, it's possible, using cookies in either JavaScript or PHP.The basic idea is that you check for the presence of a cookie, and if it isn't there, you do the alert and set cookie that would expire 24 hours from the current time.Cookies are applied on a per-computer basis, so they fulfill your requirement.

[unplugged_web]

Yes, it's possible, using cookies in either JavaScript or PHP.The basic idea is that you check for the presence of a cookie, and if it isn't there, you do the alert and set cookie that would expire 24 hours from the current time.Cookies are applied on a per-computer basis, so they fulfill your requirement.

Thank you, how would I do that?If it helps the full code is:

<div id="one" style="position: relative; z-index: 99999; display: block; height: 0px;"><div style="width: 760px; height: 1210px; background: url(images/bg.png) no-repeat;">  <table border="0" align="center" cellpadding="0" cellspacing="0">  <tr>	<td colspan="3" align="center"><img src="images/top.png" alt="" border="0" /></td>  </tr>  <tr>	<td colspan="3" align="center"><img src="images/middle.png" alt="" border="0" /></td>  </tr>  <tr>	<td colspan="3" align="center"><img src="images/bottom.png" alt="" border="0" /></td>  </tr>    <tr>	<td colspan="3" align="center"><img src="images/left.png" alt="" border="0" /><a href="http://www.google.com" style="cursor: pointer;"><img src="images/no.png" alt="" border="0" /></a><a onclick="java script:hide()" style="cursor: pointer;"><img src="images/yes.png" alt="" border="0" /></a><img src="images/right.png" alt="" border="0" /></td>  </tr></table>  </div></div>

with this hiding it:

<script type="text/javascript">function hide(){document.getElementById("one").style.display = "none";}</script>

[boen_robot]

In JavaScript, assuming the code is at the bottom of the file (right before </body>):

<script type="text/javascript">function hide(){document.getElementById("one").style.display = "none";}function setCookie(c_name,value,exdays) { var exdate=new Date(); exdate.setDate(exdate.getDate() + exdays); var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString()); document.cookie=c_name + "=" + c_value; }function getCookie(c_name) { var i,x,y,ARRcookies=document.cookie.split(";"); for (i=0;i<ARRcookies.length;i++) { x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("=")); y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1); x=x.replace(/^\s+|\s+$/g,""); if (x==c_name) { return unescape(y); } } }if (!getCookie('alerted')) {alert('Text you wish to alert');setCookie('alerted', 1, 1);}</script>

[unplugged_web]

In JavaScript, assuming the code is at the bottom of the file (right before </body>):

<script type="text/javascript">function hide(){document.getElementById("one").style.display = "none";}function setCookie(c_name,value,exdays) { var exdate=new Date(); exdate.setDate(exdate.getDate() + exdays); var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString()); document.cookie=c_name + "=" + c_value; }function getCookie(c_name) { var i,x,y,ARRcookies=document.cookie.split(";"); for (i=0;i<ARRcookies.length;i++) { x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("=")); y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1); x=x.replace(/^\s+|\s+$/g,""); if (x==c_name) { return unescape(y); } } }if (!getCookie('alerted')) {alert('Text you wish to alert');setCookie('alerted', 1, 1);}</script>

Brilliant thanks, I'll give that a go

[unplugged_web]

Thanks that works great, but is it possible to get it to show this instead rather than an alert box:

<div id="one" style="position: relative; z-index: 99999; display: block; height: 0px;"><div style="width: 760px; height: 1210px; background: url(images/bg.png) no-repeat;">  <table border="0" align="center" cellpadding="0" cellspacing="0">  <tr>	<td colspan="3" align="center"><img src="images/top.png" alt="" border="0" /></td>  </tr>  <tr>	<td colspan="3" align="center"><img src="images/middle.png" alt="" border="0" /></td>  </tr>  <tr>	<td colspan="3" align="center"><img src="images/bottom.png" alt="" border="0" /></td>  </tr>    <tr>	<td colspan="3" align="center"><img src="images/left.png" alt="" border="0" /><a href="http://www.google.com" style="cursor: pointer;"><img src="images/no.png" alt="" border="0" /></a><a onclick="java script:hide()" style="cursor: pointer;"><img src="images/yes.png" alt="" border="0" /></a><img src="images/right.png" alt="" border="0" /></td>  </tr></table>  </div></div>

with this hiding it:

[thescientist]

why don't you look at the code he provided and start from there? You'll probably need to work from the ground up and learn how to append new elements to the DOM. Start off with something simple like showing a div with some text instead of the alert statement. Once you've done that, you can probably add in the rest of the code you want to show and it should work from there.http://www.w3schools.com/js/js_examples.asphttp://www.w3schools.com/js/js_ex_dom.asp

[unplugged_web]

why don't you look at the code he provided and start from there? You'll probably need to work from the ground up and learn how to append new elements to the DOM. Start off with something simple like showing a div with some text instead of the alert statement. Once you've done that, you can probably add in the rest of the code you want to show and it should work from there.http://www.w3schools.com/js/js_examples.asphttp://www.w3schools.com/js/js_ex_dom.asp

I've tried changing it to:

<script type="text/javascript">function hide(){document.getElementById("one").style.display = "none";}function setCookie(c_name,value,exdays){var exdate=new Date();exdate.setDate(exdate.getDate() + exdays);var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());document.cookie=c_name + "=" + c_value;}function getCookie(c_name){var i,x,y,ARRcookies=document.cookie.split(";");for (i=0;i<ARRcookies.length;i++){x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);x=x.replace(/^\s+|\s+$/g,"");if (x==c_name){return unescape(y);}}}if (!getCookie('alerted')) {document.getElementById("one").style.display = "block";setCookie('alerted', 1, 1);}</script>

but I'm not really sure what different bits of the code me.

[ShadowMage]

So does it work?

[unplugged_web]

So does it work?

No I changed it to that, but it didn't work though

[thescientist]

No I changed it to that, but it didn't work though

just an FYI, an element set to display block isn't going to show anything unless you have some content in there, or give it some styling that will show something noticeable when it's "shown". That way you can be sure something is actually happening before thinking it isn't. You could also leave the alert in, to make sure that part of the script is being reached.

if (!getCookie('alerted')) {  alert("show element and set cookie!");  document.getElementById("one").style.display = "block";  setCookie('alerted', 1, 1);};

and give it some CSS, in the relevant part of your code that contains your CSS

#one{  background-color: red;  height: 100px;  width: 100px;}

[ShadowMage]

No I changed it to that, but it didn't work though

Where in your document is your script tag? With the way you have the code written, it needs to be the very last thing in your document, like boen_robot stated. Or at the very least after your div id="one" tag.If the script appears in the head or before the div tag, you'll get an error (you are checking for errors, right?) because the div will not yet be created in the DOM.

[dsonesuk]

The problem here is that you are not checking the cookie and checking if it is set to hide the element, at the moment you hide the element by clicking and running the function hide(), with display="none" this is not carried on to next reload of page, or next day, it will always reset to inline style display:block.when the hide() funtion is called set the cookiefunction hide(){document.getElementById("one").style.display = "none";setCookie('alerted', 1, 1);}then check cookie on loadwindow.onload = function(){getCookie('alerted') ==1 ? document.getElementById("one").style.display = "none" : document.getElementById("one").style.display = "block";}

[ShadowMage]

then check cookie on loadyou hide the element by clicking and running the function hide(), with display="none" this is not carried on to next reload of page, or next day, it will always reset to inline style display:block.

Oh yeah. Good catch there dsonesuk.

then check cookie on loadwindow.onload = function(){getCookie('alerted') ==1 ? document.getElementById("one").style.display = "none" : document.getElementById("one").style.display = "block";}

This part is already being done by:if (!getCookie('alerted')) {document.getElementById("one").style.display = "block";setCookie('alerted', 1, 1);}So you don't need to worry about that. Just add the line that sets the cookie to your hide function like dsonesuk showed you.

[dsonesuk]

YES you WILL, if (!getCookie('alerted')) { alert("show element and set cookie!"); document.getElementById("one").style.display = "block"; setCookie('alerted', 1, 1);};IF cookie not set this will set element as BLOCK, the element already does this because block is set in inline style, <div id="one" style="position: relative; z-index: 99999; display: block; height: 0px;">it does not matter if cookie is set or not, because this is set by default so it will show whatever. the is no js code to change it. ONLY when you click and run hide() function.

[ShadowMage]

it does not matter if cookie is set or not, because this is set by default so it will show whatever. the is no js code to change it. ONLY when you click and run hide() function.

Yes, you are right. It is only being done partially with the snippet I posted. To make it complete, you'd have to add an else statement to the if that hides the div.Or you can use dsonesuk's onload method (which, actually, is the way I'd recommend) and just remove that snippet altogether.

[unplugged_web]

Okay I think it's getting somewhere, I've changed the code to:

<script type="text/javascript">function hide(){document.getElementById("one").style.display = "none";setCookie('alerted', 1, 1);}function setCookie(c_name,value,exdays){var exdate=new Date();exdate.setDate(exdate.getDate() + exdays);var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());document.cookie=c_name + "=" + c_value;}function getCookie(c_name){var i,x,y,ARRcookies=document.cookie.split(";");for (i=0;i<ARRcookies.length;i++){x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);x=x.replace(/^\s+|\s+$/g,"");if (x==c_name){return unescape(y);}}}if (!getCookie('alerted')) {document.getElementById("one").style.display = "block";setCookie('alerted', 1, 1);}window.onload = function(){getCookie('alerted') ==1 ? document.getElementById("one").style.display = "none" : document.getElementById("one").style.display = "block";}</script>

but now it's shows it for a second then automatically hides it. I've cleared my cookies and tried again, but it still hides it straight away.

[dsonesuk]

remove, terminate, destroy, dump, flush.if (!getCookie('alerted')) {document.getElementById("one").style.display = "block";setCookie('alerted', 1, 1);}now defunct.

[boen_robot]

Try to replace:

if (!getCookie('alerted')) {document.getElementById("one").style.display = "block";setCookie('alerted', 1, 1);}window.onload = function(){getCookie('alerted') ==1 ? document.getElementById("one").style.display = "none" : document.getElementById("one").style.display = "block";}

with

if (!getCookie('alerted')) {document.getElementById("one").style.display = "block";setCookie('alerted', 1, 1);}else {document.getElementById("one").style.display = "none";}

The basic idea... STILL... is that if a cookie is not set, you do something and set it at the end. And if there is a cookie, you do something else. Not making this part of the onload event ensures that as soon as this JavaScript code is reached, it will be executed.

[dsonesuk]

or just adjust onload, it all depends if you want the user to click to set cookie, automatically or both.

window.onload = function(){getCookie('alerted') ==1 ? document.getElementById("one").style.display = "none" : document.getElementById("one").style.display = "block";if (!getCookie('alerted'))setCookie('alerted', 1, 1)}

you don't have add this code under the specific element, or within amongst html, it can placed within <head></head> tags or linked to externally.

[unplugged_web]

Ownderful thank you I used

if (!getCookie('alerted')) {document.getElementById("one").style.display = "block";setCookie('alerted', 1, 1);}else {document.getElementById("one").style.display = "none";}

in the end