PDA

View Full Version : 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.


<!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%20cookie%20plugin%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/cookies-with-jquery-designing-collapsible-layouts/