Here is the example: http://www.icyhats.com/info.php Here is the code i am using: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <title>Sandbox</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <link href="http://www.icyhats.com/stylesheet.css" rel="stylesheet" type="text/css"> </head> <body> <div id='message' style="display: none;"> <span>Hey, This is my Message.</span> <a href="#" class="close-notify" onclick="closeNotice()">X</a> </div> <script type="text/javascript"> <!-- we run in the footer so no need to use onload --> $(document).ready(function() { $("#message").fadeIn("slow"); }); function closeNotice() { $("#message").fadeOut("slow"); } </script> </body> </html> PHP: I want it to only show this once per session...if user clicks on the X it shouldnt show anymore if they browse through the site. So basically if they click on X and i refresh the page it shouldnt show up again. Anyone know how to do this?
i dont know much about it, but try implementing with a cookie, if a cookie contains certain information, then dont run a part of your script. a good place to learn about cookies, if you decide that you need it ==> w3schools(dot)com javascript => cookies
You could do this easily server-side.. Just use a session variable. For example, with ASP. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <title>Sandbox</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <link href="http://www.icyhats.com/stylesheet.css" rel="stylesheet" type="text/css"> </head> <body> <div id='message' style="display: none;"> <span>Hey, This is my Message.</span> <a href="#" class="close-notify" onclick="closeNotice()">X</a> </div> <% If Session("shown") = "" Then %> <script type="text/javascript"> <!-- we run in the footer so no need to use onload --> $(document).ready(function() { $("#message").fadeIn("slow"); }); function closeNotice() { $("#message").fadeOut("slow"); } </script> <% Session("shown") = "yep" End If %> </body> </html> Code (markup):
http://fragged.org/dev/oncePerSession.php -> via js/cookies. var Cookie = { // wrapper for working with cookies. set: function(c_name, value, options) { options = (typeof(options) === "undefined") ? { duration: null, // in days, if null, session only path: null // relative to domain, if null, default from URI } : options; if (options.duration !== null) { var exdate = new Date(); exdate.setDate(exdate.getDate()+options.duration); } document.cookie=c_name+ "=" +escape(value)+ ((options.duration===null) ? "" : ";expires="+exdate.toGMTString()) + ((options.path===null) ? "" : ";path="+options.path); }, get: function(c_name) { if (document.cookie.length > 0) { var c_start = document.cookie.indexOf(c_name + "="); if (c_start !== -1) { c_start = c_start + c_name.length+1; var 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 false; }, remove: function(c_name) { this.set(c_name, "", {duration: -1, path: "/"}); } }; // end Cookie wrapper var shownMessage = Cookie.get("shownMessage"); if (shownMessage === false) { // first time. alert("one time only message from Derren Brown:\nthis week's winning lottery numbers will be:\n\n9,12,31,34,38,45"); Cookie.set("shownMessage", "true", {path: "/"}); // no expiry date offset so session only. } else { alert("you have already seen the message\nclose browser to repeat"); // Cookie.remove("shownMessage"); // uncomment to test with multiple reloads. } PHP: p.s. the wrapper for cookies is still a work in progress but it's enough for our purposes here. in your case in your ready func, once you add the Cookie wrapper (i'd consider sticking it to jQuery.cookie namespace and then referencing it as $.cookie.set() etc. ) var shownMessage = Cookie.get("shownMessage"); $(document).ready(function() { if (shownMessage === false) { $("#message").fadeIn("slow"); Cookie.set("shownMessage", "true", {path: "/"}); // no expiry date offset so session only. } }); ... PHP: