#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    4
    Rep Power
    0

    Do not show overlay when clicking "Home" button


    Hi, I am using the code bellow to make an overlay page for my website. I need to use the overlay on a Ecommerce template and my issue is that the overlay should appear only when first visiting the website and not appear when clicking the "Home" button. For the moment, when transfering this code in the Ecommerce template, the overlay appears also when clicking the Home page.
    I have no experience with JavaScript, and I do not know how to modify the script according to my needs. Can you please point me to a direction? Thank you very much!
    Code:
    <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Page Overlay</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() {	  		var id = '#dialog'; 	 		//Get the screen height and width 		var maskHeight = $(document).height(); 		var maskWidth = $(window).width(); 	 		//Set heigth and width to mask to fill up the whole screen 		$('#mask').css({'width':maskWidth,'height':maskHeight}); 		 		//transition effect		 		$('#mask').fadeIn(1000);	 		$('#mask').fadeTo("slow",0.8);	 	 		//Get the window height and width 		var winH = $(window).height(); 		var winW = $(window).width();                		//Set the popup window to center 		$(id).css('top',  winH/2-$(id).height()/2); 		$(id).css('left', winW/2-$(id).width()/2); 	 		//transition effect 		$(id).fadeIn(2000); 	 	 	//if close button is clicked 	$('.window .close').click(function (e) { 		//Cancel the link behavior 		e.preventDefault(); 		 		$('#mask').hide(); 		$('.window').hide(); 	});		 	 	//if mask is clicked 	$('#mask').click(function () { 		$(this).hide(); 		$('.window').hide(); 	});	 	 	$('home').click(function () { 		$(this).hide(); 		$('.window').hide(); 	});	 	 });  </script>  <style type="text/css"> body { background-color: lightyellow; font-family:verdana; font-size:15px; }  a {color:#333; text-decoration:none} a:hover {color:#ccc; text-decoration:none}  #mask {   position:absolute;   left:0;   top:0;   z-index:9000;   background-color:#000;   display:none; }   #boxes .window {   position:absolute;   left:0;   top:0;   width:440px;   height:200px;   display:none;   z-index:9999;   padding:20px; } #boxes #dialog {   width:375px;    height:203px;   padding:10px;   background-color:#ffffff; } #wrapper {width: 960px; height: 900px; margin: 0px auto; background-color: pink;} </style> </head> <body> <div id="boxes"> <div style="top: 199.5px; left: 551.5px; display: none;" id="dialog" class="window"> <p>Please notice this is a magazine for museum and galleries and you need an account in order to buy. Please <a href="">Contact us</a> for more informations!</p> <a href="#" class="close">Enter Site</a> </div> <!-- Mask to cover the whole screen --> <div style="width: 1478px; height: 602px; display: none; opacity: 0.8;" id="mask"></div> </div> </body> </html>
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,165
    Rep Power
    184
    It is going to show this modal, every single time; that any page, with this code in it, loads. The way to stop this from occurring; is to either set a cookie or use HTML5 storage() and validate this function (based on either a cookie or localStorage() variable), when $("document").ready() occurs.

    Alternatively..., once the "Enter Site" link is clicked; you could just use the following code, to redirect to "home" page.
    Code:
    window.location replace("home.html");
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    4
    Rep Power
    0
    I understand, thank you very much for answering me.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    4
    Rep Power
    0
    Originally Posted by luchid
    I understand, thank you very much for answering me.

    I tried the last solution you gave me and I put the code bellow. Have I done something wrong because it's not working. I have no experience with JavaScript. Thank you very much!
    Code:
    <!DOCTYPE html> <html> <head> <script> function replaceDoc()   {   window.location.replace("index.html")   } </script> </head> <body>  <input type="button" value="Enter Site" onclick="replaceDoc()">  </body> </html>
  8. #5
  9. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,165
    Rep Power
    184
    Originally Posted by luchid
    I tried the last solution you gave me and I put the code bellow. Have I done something wrong because it's not working. I have no experience with JavaScript. Thank you very much!
    Code:
    <!DOCTYPE html> <html> <head> <script> function replaceDoc()   {   window.location.replace("index.html")   } </script> </head> <body>  <input type="button" value="Enter Site" onclick="replaceDoc()">  </body> </html>
    What's not working; it works for me?
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    4
    Rep Power
    0
    Thank you very much, you've been very kind and helped me a lot.
    I quess there are some issues with the Ecommerce template I am using this overlay because it simply does not work the function you suggested me. Probably I have to think to another way to do it.

    Thank you again!
  12. #7
  13. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,165
    Rep Power
    184
    Yeah, you might have other code; that is conflicting with your function. I would try to access my browser developer console and see what the error (if any); that your browser is receiving from your page.

IMN logo majestic logo threadwatch logo seochat tools logo