Looking for a "do not show this page again" checkbox script

[iceytina]

I've been looking for this kind of script and can't find it. Basically it would be based on a browser's cookie session (...correct?...) and when a person checks the box, the home-page.html page would load automatically. It's not merely a hiding/showing selective content script, it's loading a new page. So as long as the user hasn't deleted their cookies, they won't ever see the page again.

It would go on this page http://weblinedesigns.net/mushmoot/ - so checking the box would make it so people wouldn't see that splash page again.

Anyone know of such a script? PHP, JavaScript -- whatever works for me.

[jscheuer1]

I see you're using jQuery (from the head of the splash page):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

So add this script right after it:

<script type="text/javascript">
// Skip this Page Script (c)2012 John Davenport Scheuer
// as first seen in http://www.dynamicdrive.com/forums/
// username: jscheuer1 - This Notice Must Remain for Legal Use
;(function(setting){
	var cook = {
		set: function(n, v, d){ // cook.set takes (name, value, optional_persist_days) - defaults to session if no days specified
			if(d){var dt = new Date(); 
				dt.setDate(dt.getDate() + d);
			d = '; expires=' + dt.toGMTString();}
			document.cookie = n + '=' + escape(v) + (d || '') + '; path=/';
		},
		get: function(n){ // cook.get takes (name)
			var c = document.cookie.match('(^|;)\x20*' + n + '=([^;]*)');
			return c? unescape(c[2]) : null;
		}
	};
	if(cook.get('skipthispage')){
		location.replace(setting.page);
	}
	if(!document.cookie){cook.set('temp', 1);}
	if(document.cookie){
		jQuery(function($){
			$('#optout').css({display: ''}).append(setting.optoutHTML).find('input').click(function(){
				this.checked? cook.set('skipthispage', '1', setting.days) : cook.set('skipthispage', '', -1);
				this.checked && setting.gowhenchecked && location.replace(setting.page);
			});
		});
	}
})({
	days: 365, // days cookie will persist
	page: 'home-page.php', // page to goto if cookie is set
	gowhenchecked: true, // true/false - should page switch when the box is checked?
	optoutHTML: '<label for="optoutcheckbox">Don\'t Show this Page Again: <input type="checkbox" id="optoutcheckbox" value=""></label>'
});
</script>

Any configuration you might want to do can be done in the highlighted area near the end.

Add this div to the body where you want the checkbox to appear:

<div id="optout" style="display: none;"></div>

Browsers without javascript or without cookies will see nothing.

Style - None is required. If you want to style it, you can put selectors and rules like these in your css/splash-page-style.css stylesheet:

#optout {
	display: inline;
	background-color: yellow;
}
#optout label {
	font: bold 95% sans-serif;
}

The rules are up to you. You can also add a selector and rule(s) for the checkbox:

#optout input {
	background-color: red;
}

Just be aware that a checkbox like other form elements will not always accept styles, and that browser differences in styling them are more common than with other elements. For example IE will give a red background, Firefox will not.

[iceytina]

Wow it worked perfectly--! Thanks SO MUCH! I copied the whole script into a .txt file to save it for future use.

[savetoni]

John,


I have a pop-up I have been working on (http://www.parkerlabs.com/home_to_test_banner.asp) which only needs one last thing- a checkbox saying "Do not show again"
I have been looking all over the place for a script such as the one you had posted above- the only difference is I need one that instead of the script replacing the page with the gowhenchecked function (which skips the page), I just need one which disables or hides the .popUpBgContainer and all contents if the page is reloaded. I've been trying to figure this out for days, and I think you may be able to help me! Will you please help me?

please let me know if you have any questions, and thank you in advance if you are able and willing to help! (also I am sorry for not messaging you, for some reason dynamicdrive won't let me send them)

-Toni

[jscheuer1]

That page is a bit of a mess. There are various versions of jQuery on it, as well as quite a few missing resources. As a result the jQuery cookie unit isn't currently available, even though it is associated with the page. Moving it will allow us to use it for this, but I cannot be certain if that will have any effect or not on its utility for other existing code (assuming any other existing code is even using it) That said, move it (highlighted) from here:

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="http://www.parkerlabs.com/Scripts/jquery.cookie.js"></script>  


  
<script type="text/javascript" src="/Scripts/coolmenu.js"></script>
<script type="text/javascript" src="/Scripts

to here and add the other highlighted code as shown:

 . . . nt.getElementsByTagName('script')[0].parentNode).appendChild(scr);
  if(oldonload){oldonload()}};
}());
</script>
<script src="http://www.parkerlabs.com/Scripts/jquery.cookie.js"></script>  

<script type="text/javascript">
var getBodyHeight = $('body').outerHeight();
	$('.popUpBgContainer').height(getBodyHeight);
	
	function showPopUp(){
		
		$('.popUpBgContainer').fadeIn(1000);
	}
	$('#nomorepopbox').click(function(){
		if(this.checked){
			$.cookie('nomorepopbox', true, {expires: 5});
		} else {
			$.cookie('nomorepopbox', '', {expires: -1});
		}
	});
	if(!$.cookie('nomorepopbox')){
		setTimeout(showPopUp,1000) //shows the popup in 1000 miliseconds
	}
	
		$('.closeAd').click(function(event){
	event.preventDefault();
		$('.popUpBgContainer').fadeOut(500);
		
	});

</script>

	</body>

Don't miss adding the closing brace (red).

Finally add a checkbox to the popup content as shown:

<!-------POPUP -->

<div class="popUpBgContainer"> 
	<!-- this will be the background container -->
    	<div class="popUpCenterContainer">
        		<div class="popUpContent">
                	<h2 style="font-family:Helvetica, Arial, sans-serif; font-size:22px; color:#fff;">This can be the title</h2>
                  <img src="images/300x250_example.gif" />
                  <p style="font-family:Helvetica, Arial, sans-serif; font-size:12px;">This can be a description</p>
          				
 <p>I don't want to see this again: <input type="checkbox" id="nomorepopbox" value=""></p>                 
        			

					<p><a href ="#" class="closeAd">Close</a></p>
                
       </div>       
    </div> 
	
</div>

<!-------END_POPUP -->

[savetoni]

Your suggestion to move the cookie script as well as the script additions worked perfectly. I inherited this page and have very underdeveloped scripting skills. I'm going to clean up the page a bit, it is a huge mess, so thank you for being polite! So many thanks— my eye even stopped twitching.