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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post

    showing div only once per session (stuck setting cookie)

    Hello Guys,

    I'm hoping somebody can help me out. I am pretty new to JQuery but have already learned basic effects and stuff but now I need to set a simple cookie and am not sure how to set it up.

    I did a Google search the subject and have read a lot of simple tutorials but i'm not getting it to work so I want to start from scratch.

    Basically, I have a html page. As soon as the page loads, I need a box to simply fade in on the screen above everything else ( a div called #message ). It will just have some text in it and also need a simple button to close it out.

    Here is my issue: I only want this div to show 1 time per browser session so that if they go to another page on the site and come back to this page, the div #message will not appear again during that session.


    I'm not sure if it is mandatory to use the jquery plugin called cookie or, it is not needed to do this?

    Below is my html, which is very basic ( I made this quick just for testing purposes )

    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>Untitled Document</title>
    
    <style type="text/css">
    
    #message {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 40px;
    	background-image: url(images/black.png);
    	background-repeat: repeat;
    	text-align: center;
    	height: 100%;
    	width: 100%;
    	color: #FFF;
    	}
    body {
    	background-color: #FFF;
    	margin:0;
        }
    	
    </style>
    
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
    
    <script type="text/javascript" src="includes/message.js"></script>
    
    <script type="text/javascript" src="includes/cookie.js"></script>
    
    </head>
    
    <body>
    
    <div id="message">this is the div to display once per session</div>
    
    </body>
    
    </html>

    I don't know how to write the jquery that would go in message.js to set the cookie to display #message only once per session

    A lot of the tutorials out there for this topic seem to over complicate things so I thought I would ask you guys for a hand.

    Any help would be great. I value the help and intend to learn from it.


    Thanks
    Last edited by gribbs100; 01-28-2011 at 05:16 PM.

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    make sure you use this plugin: https://github.com/carhartl/jquery-c...uery.cookie.js

    Page 1:
    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>Untitled Document</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript" src="cookie.js"></script>
    
    $(document).ready(function() {
    
    if($.cookie("example") == null){
    	$('#message').fadeIn(function(){
    		$.cookie("example", "foo");
    	});
    }
    $('#message a').click(function(){
    	$('#message').fadeOut();
    });
    
    });
    </script>
    
    <style type="text/css">
    #message {
    display: none;
    border: 2px solid #000;
    background: #eee;
    text-align: center;
    padding: 20px 0;
    width: 300px;
    position: absolute;
    z-index: 999;
    top:100px;
    left: 50%;
    margin-left: -151px;
    }
    </style>
    
    </head>
    <a href="page2.html">Page 2</a>
    
    <div id="message">
    <p>Setting the cookie</p>
    <p><a href="#x" onclick="return false">ok</a></p>
    </div>
    
    </body>
    </html>

    Page 2:
    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>Untitled Document</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript" src="cookie.js"></script>
    
    $(document).ready(function() {
    
    if($.cookie("example") == null){
    	$('#message').fadeIn(function(){
    		$.cookie("example", "foo");
    	});
    }
    $('#message a').click(function(){
    	$('#message').fadeOut();
    });
    
    });
    </script>
    
    <style type="text/css">
    #message {
    display: none;
    border: 2px solid #000;
    background: #eee;
    text-align: center;
    padding: 20px 0;
    width: 300px;
    position: absolute;
    z-index: 999;
    top:100px;
    left: 50%;
    margin-left: -151px;
    }
    </style>
    
    </head>
    <a href="page1.html">Page 1</a>
    
    <div id="message">
    <p>Setting the cookie</p>
    <p><a href="#x" onclick="return false">ok</a></p>
    </div>
    
    </body>
    </html>
    Notice I have the script on both pages. No matter what page you enter, the cookie will set.

    If you only want it being set on the home page, only include the:

    Code:
    if($.cookie("example") == null){
    	$('#message').fadeIn(function(){
    		$.cookie("example", "foo");
    	});
    }
    on the home page.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • Users who have thanked harbingerOTV for this post:

    gribbs100 (01-29-2011)

  • #3
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post
    Thank you very much for helping me out! I appreciate it. It seems to work fine in Firefox, IE 7 & 8 but it doesn't seem to work in Chrome. Do you have any ideas why that is so?

    Thanks

  • #4
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post
    I figured out the problem. Apparently, Chrome has a know issue where it will not store local cookies. The topic seems to be discussed all over. Online, this works in all major browsers.

    Thanks again for the help!


  •  

    Tags for this Thread

    Posting Permissions

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