SuperPaperSam Posted August 2, 2009 Share Posted August 2, 2009 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! Link to comment Share on other sites More sharing options...
dsonesuk Posted August 3, 2009 Share Posted August 3, 2009 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> Link to comment Share on other sites More sharing options...
SuperPaperSam Posted August 3, 2009 Author Share Posted August 3, 2009 It worked! Everything in the table is always going to be the same. One question why did you put a link to resize_movableTable02.htm?Thanks a TON! Link to comment Share on other sites More sharing options...
dsonesuk Posted August 3, 2009 Share Posted August 3, 2009 i created a link to an identical page for testing, i think it was the name of one of your previous postings. Link to comment Share on other sites More sharing options...
SuperPaperSam Posted August 4, 2009 Author Share Posted August 4, 2009 Ohhhhhh. Ok. Thanks again! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.