SearchRecent posts
The Random ToolboxDrupal 7 Setting up variables for use in a template (preprocess and process functions) Rendering Drupal 7 fields (the right way) Linux Secure Copy (scp) command Restrict Free Shipping in Magento Quickbooks Text Connection Ticket Cross-Site Request Forgery (CSRF) jQuery Events: MouseOver / MouseOut vs. MouseEnter / MouseLeave Monthly archive
|
Javascript Cookies Using jQuery Cookie PluginI chose to use the improved version of the jQuery Cookie Plugin with more functions as well as short/easy examples on how to use these functions. Here are javascript functions by Peter-Paul Koch to function setCookie(name,value,days) { if (days) { var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else var expires = ""; document.cookie = name+"="+value+expires+"; path=/"; } function getCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; } function deleteCookie(name) { setCookie(name,"",-1); } /* Changed function names from readCookie(), createCookie() and eraseCookie() to getCookie(), setCookie() and deleteCookie(). */ These three functions can completely manage your cookies: // Create/write a cookie and store it for 1 day setCookie('fooCookie', 'fooCookieValue', 1); // Get the value of fooCookie - returns fooCookieValue getCookie('fooCookie'); // Delete/erase fooCookie deleteCookie('fooCookie'); Simple Implementation Example: $(document).ready(function() { if(getCookie('theme')) { changeTheme(getCookie('theme')); } // prevent href="#" clicks from scrolling // to the top of the page $('a').click(function() { if($(this).attr('href') == '#'){ return false; } }); // for example, the html for below would be: // <a class="theme" title="blue" href="#">Blue Theme</a> $('a.theme').click(function() { changeTheme($(this).attr('title')); }); // and the html for this would be: // <a class="remove-theme" title="remove-theme" href="#">Remove Theme</a> $('a.remove-theme').click(function() { deleteCookie('theme'); changeTheme('default'); }); function changeTheme(theTheme) { switch(theTheme) { case 'blue': setColors('#6D98AB','#00275E','#FEB729','#FFFFFF',"#FFFFFF"); setCookie('theme', 'blue', 1); break; case 'chocolate': setColors('#266A2E','#593E1A','#79BEDB','#6B78B4',"#FFFFFF"); setCookie('theme', 'chocolate', 1); break; case 'Forrest': break; case 'Black': break; case 'Grey': break; case 'default': setColors('#ffffff','#ffffff','#cccccc','#cccccc','none'); break; } } // Rename the elements to match your elements - $('anyHTMLelement') // You can rename the arguments here to corresponding names of your // elements to make your code more readable function setColors(navCol,bodyCol,divBackCol,divBorderCol,contentBackCol) { $('div#nav').css({'background':navCol}); $('body').css({'background':bodyCol}); $('div#header').css({'background':divBackCol}); $('div#header, div#footer').css({'border':'2px solid '+divBorderCol}); $('body #content').css({'background':contentBackCol}); } )}; . . . And my html would include: <!-- Load jQuery from google hosted link --> <!-- cookie.js is the improved version link in the article --> <!-- yourScript.js would be the code above --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script type="text/javascript" src="js/cookie.js"></script> <script type="text/javascript" src="js/yourScript.js"></script> |