Jump to content

Using Cookies To Save A Tables Properties


SuperPaperSam
 Share

Recommended Posts

Bellow is my script to make a table appear and disappear when you click "Click This" The problem is I want the page to keep the table open even if they navigate to a new page. Which is where cookies come in. So what would the script be?

   <html>		<head>			<table id="captionRow" style="display: none"><th>				---Tables content---			</th></table>						<!-- Place this in Javascript page -->				<script type="text/javascript">					function displayRow(){					var row = document.getElementById("captionRow");					if (row.style.display == '') row.style.display = 'none';					else row.style.display = '';					}				</script>							<!-- Place this in CSS Sheet -->				<style type="text/css">					table{					z-index: 1;					position: fixed;					width: 200px;					height: 400px;					margin-top: 100px;					margin-left: 0px;					background: #FF6600;					}				</style>		</head>		<body>			<p onclick="displayRow()">Click This</p>		</body>	</html>

Any help would be greatly appreciated! :)

Edited by SuperPaperSam
Link to comment
Share on other sites

I managed to put this together, but i don't know if you want to use a function to insert the content inside the table, but this will depend if the content is going to different for each page or not.just add the code to the head of each page you require this to work, onload it will read the cookie to see if a display value for the cookie is set, and update the table display value accordingly, and if the display changes it will create cookie to store that display value, ready the other page you transfer to.

<!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=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/function set_cookie( name, value, exp_y, exp_m, exp_d, path, domain, secure ) {  var cookie_string = name + "=" + escape ( value );  if ( exp_y )  {    var expires = new Date ( exp_y, exp_m, exp_d );    cookie_string += "; expires=" + expires.toGMTString();  }  if ( path )        cookie_string += "; path=" + escape ( path );  if ( domain )        cookie_string += "; domain=" + escape ( domain );    if ( secure )        cookie_string += "; secure";         document.cookie = cookie_string;  }function get_cookie(cookie_name){  var results = document.cookie.match( '(^|  ?' + cookie_name + '=([^;]*)(;|$)' );  if ( results )    return ( unescape ( results[2] ) );  else    return null;}                function displayRow() //change table row display value and set  cookie to this value {                  var row = document.getElementById("captionRow");                   if (row.style.display == '')                   {                   row.style.display = 'none';                   cookievalue = 'none';                   }                   else                   {                   row.style.display = '';                   cookievalue = 'empty';                   }                    set_cookie("displayvalue", cookievalue);                                         }     function getcurrentdisplay() //get cookie display value and set table display to it    {    var row = document.getElementById("captionRow");        var displaycookie = get_cookie("displayvalue");          if(displaycookie)       {	if(displaycookie=="none")	   {	row.style.display = 'none';	   }	else	   {	row.style.display = '';	   }        }}                    window.onload=getcurrentdisplay;               /*--*//*]]>*/</script>                <style type="text/css">                   table#captionRow{                    z-index: 1;                    position: fixed;                    width: 200px;                    height: 400px;                    margin-top: 100px;                    margin-left: 0px;                    background: #FF6600;                    }               </style></head><body>            <table id="captionRow" style="display: none"><th>                ---Tables content---                   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreetdolore magna aliquam erat volutpat. </p>         </th></table>                        <p onclick="displayRow()">Click This</p><a href="resize_movableTable02.htm"> Table02Page</a><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipitlobortis nisl ut aliquip ex.</p></body></html>          

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...