benjamin.morgan Posted November 6, 2012 Share Posted November 6, 2012 Okay, I have the code working but I don't under stand it at all. Here is what I am having a problem with. I understand the setTheme function. What starts confusing me is on the window.onload. It calls the setThemeCookie function but what goes in the e variable in the function? Also it says "Close your browser window, or even quit the browser, and then reopen the page to see your theme selection retained." When I close the browser or reopen the page or refresh it, it always goes back to the blank theme. function setTheme(theme) { 'use strict'; var css = null; if (document.getElementById('cssTheme')) { css = document.getElementById('cssTheme'); css.href = 'css/' + theme + '.css' } else { css = document.createElement('link'); css.rel = 'stylesheet'; css.href = 'css/' + theme + '.css'; css.id = 'cssTheme'; document.head.appendChild(css); } } function setThemeCookie(e) { 'use strict'; e = e || window.event; if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; } var target = e.target || e.srcElement; var expire = new Date(); expire.setDate(expire.getDate() + 7); COOKIE.setCookie('theme', target.id, expire); setTheme(target.id); return false; } window.onload = function() { 'use strict'; document.getElementById('aTheme').onclick = setThemeCookie; document.getElementById('bTheme').onclick = setThemeCookie; var theme = COOKIE.getCookie('theme'); if (theme) { setThemeCookie(theme); } }; HTML <p>Choose a theme: <a href="somepage.php?theme=a" id="aTheme">A Theme</a> || <a href="somepage.php?theme=b" id="bTheme">B Theme</a></p> Link to comment Share on other sites More sharing options...
DaveCoast Posted November 9, 2012 Share Posted November 9, 2012 If the previous theme does not show after shutting down the browser then the code is not working (he said with a friendly smile). The e variable in the function setThemeCookie(e) is the event object (see Chapter 8 Advanced Event Handling). It's value happens when one of the event listeners in the window.onload anonymous function is triggered (clicking on the link). document.getElementById('aThemeId').onclick = setThemeCookie; From the event object we use the preventDefault() method to keep from following the href URL, the .target property to know which link was clicked and .id property to get the actual element id attribute from the HTML. Regarding not showing the correct theme after shutdown nothing pops out in your code as bad (you are missing the semi-colon on line 6 - which doesn't matter on my chrome or firefox browsers). It does sound like something is wrong in either storing your cookie or retrieving it. You don't show your COOKIE code - I would check that out and run through firebug if you can and it should be pretty easy to find the flaw. Do you have any console errors? Hope that helps a little - Dave 2 Link to comment Share on other sites More sharing options...
benjamin.morgan Posted November 9, 2012 Author Share Posted November 9, 2012 The console error in mine and Larry's code is TypeError: target is undefined COOKIE.setCookie('theme', target.id, expire); Here is my cookie code var COOKIE = { setCookie: function(name, value, expire) { 'use strict'; var str = encodeURIComponent(name) + '=' + encodeURIComponent(value); str += ';expires=' + expire.toGMTString(); document.cookie = str; }, getCookie: function(name) { 'use strict'; var len = name.length; var cookies = document.cookie.split(';'); for (var i = 0, count = cookies.length; i < count; i++) { var value = (cookies[i].slice(0,1) == ' ') ? cookies[i].slice(1) : cookies[i]; value = decodeURIComponent(value); if (value.slice(0,len) == name) { return cookies[i].split('=')[1]; } } return false; } }; Link to comment Share on other sites More sharing options...
Larry Posted November 9, 2012 Share Posted November 9, 2012 Let me double check my code and make sure it's not an error in what I wrote. Link to comment Share on other sites More sharing options...
DaveCoast Posted November 10, 2012 Share Posted November 10, 2012 I think the error is the last line of code in the window.onload anonymous function. var themeSet = COOKIE.getCookie('theme'); // theme is our cookie's literal name if (themeSet) { setTheme(themeSet) // Set Theme when cookie exists }; The function to call is setTheme() not setThemeCookie(). You just retrieved the cookie so it doesn't make sense to reset the cookie. We want to set the theme based on the cookie value. Link to comment Share on other sites More sharing options...
benjamin.morgan Posted November 10, 2012 Author Share Posted November 10, 2012 Thanks! That worked, I appreciate the help. Link to comment Share on other sites More sharing options...
Recommended Posts