Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2013
    Location
    Romania
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Do not show overlay when clicking "Home" button

    Hi! I am using the code bellow in order to make an overlay page for my website. The code is just waht I need to do but I have to use this overlay on a Ecommerce template and in I need to show the overlay only when first visiting the website and not showing the overlay when clicking on "Home" button.
    I have no experience with JavaScript and I do not know how to modify the code to fit my needs. Please, can you 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
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    There is no "home button" in your markup. Which "home button" do you mean?

  • #3
    New to the CF scene
    Join Date
    May 2013
    Location
    Romania
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I need to use the overlay on a Ecommerce template hosted by http://www.ekmpowershop.com and the pages are already created. Thank you!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •