Help with my website using jquery

**dinhqphan** · 06-18-2013, 04:03 PM

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>

**Beverleyh** · 06-18-2013, 04:26 PM

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/

Thread: Help with my website using jquery

Thread Tools

Search Thread

Help with my website using jquery

Similar Threads

Website Design (Website Layout)

Includin a file: jQuery based Ajax vs jQuery-append plus hidden iframe

jQuery Multi Level CSS Menu #2 not working in IE6 using jQuery 1.4.x

jquery/jscript website search function

[jQuery] Issue with scrollable & filtering portfolio with jQuery.

Bookmarks

Bookmarks

Posting Permissions