Results 1 to 2 of 2

Thread: Help with my website using jquery

  1. #1
    Join Date
    Jun 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Help with my website using jquery

    Alright I have a problem. My website displays this age disclaimer I created using jquery on the home page of my website. http://dcvapor.com
    It works fine and all. But i am trying to get it to display the age disclaimer once, i dont want it to keep coming back every time the visitor goes to the home page because it gets annoying after a while. The code is actually embedded into the page.
    How would i go about doing this? This is my code for the front page. I read up and some people said make the jquery create a cookie or something. I am not that knowledgeable with coding so any help is appreciated.

    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>DC Vapors</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();
    	});		
    	
      //cookie retention
    
    		
      
    
    	
    });
    
    </script>
    
    <style type="text/css">
    body {
    font-family:verdana;
    font-size:15px;
    }
    
    a {color:#333; text-decoration:none}
    a:hover {color:#ccc; text-decoration:none}
    
    #mask {
      position:fixed;
      left:0;
      top:0;
      z-index:9000;
      background-color:#000;
      display:none;
    }  
    #boxes .window {
      position:fixed;
      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;
      border:3px solid black
    }
    </style>
    </head><body>
      
      <!--PUT ANY TEXT HERE IF YOU WANT (F YOU REMOVE THE TEXT HERE NO TEXT WILL SHOW WHERE IT SAYS WELCOME --!>
    <center>
    
    </center>
    
    <!--DO NOT EDIT ANYTHING PAST THIS--!>
    
    <div style="font-size: 12px; color:black);"><div id="index" class="clearfix">
      {% if settings.homepage_products_or_collections != "none" %}
      <div class="row">
        <div class="span12">
          <h1 class="featured">Featured</h1>
        </div> <!-- /.span12 -->
      </div> <!-- /.row -->
      {% endif %}
      {% if settings.homepage_products_or_collections == "collections" %}
      <div class="row products masonry">
        {% for link in linklists[settings.frontpage_linklist].links %}
        {% if link.type == 'collection_link' and link.object.all_products_count > 0 %}
        {% assign collection = link.object %}
        {% include 'collection-loop' %}
        {% endif %}
        {% endfor %}
      </div><!-- /.row -->
      {% endif %}
      {% if settings.homepage_products_or_collections == "products" %}
      <div class="row products masonry">
        {% for product in collections[settings.frontpage_collection].products limit: settings.pagination_limit %}
        {% include 'product-loop' with settings.frontpage_collection %}
        {% endfor %}
      </div> <!-- /.row -->
      {% endif %}
      {% if settings.index_page_content != empty %}
      <div class="row">
        <div class="span12">
          <h2>{{ pages[settings.index_page_content].title }}</h2>
          <div class="page-content">
            {{ pages[settings.index_page_content].content }}
          </div>
        </div> <!-- /.span12 -->
      </div> <!-- /.row -->
      {% endif %}</div>
    
    <div id="boxes">
    <div style="top: 199.5px; height: 300px; left: 551.5px; display: none;" id="dialog" class="window">
    <center><img src="http://cdn.shopify.com/s/files/1/0232/2033/t/2/assets/logo.png?769" width=300>
    <br>
    <br>
    <br>
    <B>Warning</B>:  The products on this website are intended for adults ONLY!  By entering this website you certify that you are 18 years or above.
    <br>
    <br>
    <br>
    <a href="#" class="close">I am at least 18 years of age</a> | <a href="http://google.com">I am under the age of 18</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
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,038
    Thanks
    16
    Thanked 316 Times in 314 Posts
    Blog Entries
    13

    Default

    Yes, there is a jQuery cookie plugin - have a look at some of the online tutorials first and let us know how you get on. http://www.google.com/m?q=jquery%20c...gin%20tutorial

    Here's a specific tutorial to hide a div: http://sicanstudios.com/post/set-cookies-javascript/

    And another one for manipulating layout - you can apply the same logic to your needs though: http://www.shopdev.co.uk/blog/cookie...sible-layouts/
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

Similar Threads

  1. Replies: 4
    Last Post: 08-26-2012, 03:21 PM
  2. jQuery Multi Level CSS Menu #2 not working in IE6 using jQuery 1.4.x
    By Rikko in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 12-28-2010, 10:57 PM
  3. jquery/jscript website search function
    By neilkw in forum JavaScript
    Replies: 0
    Last Post: 10-26-2010, 11:37 AM
  4. Replies: 0
    Last Post: 10-18-2010, 01:05 PM
  5. Website Design (Website Layout)
    By mada9369 in forum General Paid Work Requests
    Replies: 3
    Last Post: 03-05-2009, 08:43 PM

Bookmarks

Posting Permissions

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