Hi guys, i'm back again, this time in need of some web development help. I'm trying to make a very simple stylesheet switcher, which so far i have achieved in that i have two buttons using jquery that change the .css file being used. However i'd like to try and make the change a little more permanent since as soon as you refresh the page the changes are unset and you are back at the default settings. So i decided i would also have a javascript that the buttons execute to set a cookie, however the script just doesn't seem to work, here's what i'm working with: Code: <script type="text/javascript"> function setCookie(stylecookie,style1,7) { 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=/"; } </script> . Any ideas what's wrong with it? I haven't worked out the script to get the cookie and define the stylesheet on page load yet either so i'll probably be asking that if w3schools fails me on that too.
In your Head: Code: <script type="text/javascript"> function setCookie(c_name,value,expiredays) { var exdate=new Date(); exdate.setDate(exdate.getDate()+expiredays); document.cookie=c_name+ "=" +escape(value)+ ((expiredays==null) ? "" : ";expires="+exdate.toUTCString()); alert('Setting cookie with value: ' + value); // todo: remove me } function getCookie(c_name) { if (document.cookie.length>0) { c_start=document.cookie.indexOf(c_name + "="); if (c_start!=-1) { c_start=c_start + c_name.length+1; c_end=document.cookie.indexOf(";",c_start); if (c_end==-1) c_end=document.cookie.length; return unescape(document.cookie.substring(c_start,c_end)); } } return ""; } </script> Then on your buttons: Code: setCookie('c_style',style_value_or_name_here,365); And on a Body onload event handler: Code: <script type="text/javascript"> s_style=getCookie('c_style'); if (s_style!=null && s_style!="") { change_style(s_style); // or whatever your function is called alert('Found cookie with value: ' + s_style); // todo: remove me } </script> Something like that, anyway.
Wow that was fast . Thanks, i'll give it a try now. Edit: would you mind telling me which pieces i am supposed to edit? cos i can't get my head around which snippets are meant to stay that way and which i am supposed to change.
Righto, remove the original code you're working with. Put the first code block either in a .js file that's loaded somewhere, or between <head> and </head>. Put the setCookie() line on each of the buttons used to change the style, but change style_value_or_name_here to come sort of unique identifier string (i.e. the name of the stylesheet it's setting, in quotation marks or apostrophes). The last block of code needs to run when the page loads - if you haven't already got code running from some event handler, add the code into the first block of code, something like this: Code: function init() { s_style=getCookie('c_style'); if (s_style!=null && s_style!="") { change_style(s_style); // or whatever your function is called alert('Found cookie with value: ' + s_style); // todo: remove me } } window.onload = init; You'll need to change the change_style() bit - make it run the jQuery code you use to change the stylesheet. s_style will contain the value you stored in the cookie so you can pass that to your stylesheet changing code to know which .css file to load.
I still can't get it to actually make a cookie. Here's what i'm working with: Code: <html> <head> <script type="text/javascript"> function setCookie(c_name,value,expiredays) { var exdate=new Date(); exdate.setDate(exdate.getDate()+expiredays); document.cookie=c_name+ "=" +escape(value)+ ((expiredays==null) ? "" : ";expires="+exdate.toUTCString()); alert('Setting cookie with value: ' + value); // todo: remove me } function getCookie(c_name) { if (document.cookie.length>0) { c_start=document.cookie.indexOf(c_name + "="); if (c_start!=-1) { c_start=c_start + c_name.length+1; c_end=document.cookie.indexOf(";",c_start); if (c_end==-1) c_end=document.cookie.length; return unescape(document.cookie.substring(c_start,c_end)); } } return ""; } </script> </head> <body> <button onclick="setCookie("style",style1,365)">cookie test</button> </body> </html> Thanks for your help btw, i hope i'm not frustrating you here .
Problem the first - you can't nest a speech mark inside a speech mark without escaping it, or you end up closing the attribute. Use either (my favourite): Code: <button onclick="setCookie('style','style1',365);">cookie test</button> Or Code: <button onclick="setCookie(\"style\",'style1',365);">cookie test</button> Problem the second; style1 is a variable. Is it set? Or is it supposed to be a string literal (put it in apostrophes)?
Thankyou so much! It worked, the cookie was set, i went with: "<button onclick="setCookie('style','style1',365)">cookie test</button>" since i wanted to set the contents of the cookie as style1. If i could add more rep to you i would! Next on the list is the body onload part, which i will tackle tomorrow .
I'm glad you went with that one because the other way won't work. I'm getting a little confused here (it's been a while since I did any HTML... Slight correction. You can escape apostrophes in a JavaScript string with a backslash, but you can't escape in HTML attributes with them. So you use quotation marks for the HTML attribute, then apostrophes for the JavaScript string, then \' for apostrophes in the string, and " for a " in the string. If that makes sense...
So today i decided i would tackle the body onload part of the javascript, and i worked out how to change the attributes of html elements, i think this should work... Code: <script type="text/javascript"> s_style=getCookie('style'); if (s_style!=null && s_style!="style1") { then document.getElementById("css").setAttribute("href","style1.css") } else (s_style!=null && s_style!="style2") { document.getElementById("css").setAttribute("href","style2.css") } </script> However i can't tell if it works or not since i don't think the body onload part is working: Code: <body onload="s_style=getCookie('c_style');"> . Any ideas?
!= Means "does not equal". If a variable == something, it by definition cannot be null. The then keyword is not needed for JS comparisons. You're missing semicolons from the end of the lines. You need to use if..else if if you want another conditional - not if..else. Corrected code: Code: if(s_style == "style1") { document.getElementById("css").setAttribute("href","style1.css"); // ( This won't work) } else if (s_style == "style2") { document.getElementById("css").setAttribute("href","style2.css"); } In the DOM, there is not an element called CSS. CSS is loaded from a link object which links to a stylesheet. You can't assign a function to another to pass the return value from the second into t'other. You nest them such as in <body onload="swap_style(getCookie('s_style'));">. Try something more like this: Code: <html> <head> <link rel="stylesheet" type="text/css" title="style1" href="style1.css"> <link rel="alternate stylesheet" type="text/css" title="style2" href="style2.css"> <script type="text/javascript"> function switch_style(css_title){ var i, link_tag ; for (i = 0, link_tag = document.getElementsByTagName("link"); i < link_tag.length; i++ ) { if ((link_tag[i].rel.indexOf("stylesheet") != -1) && link_tag[i].title) { link_tag[i].disabled = true ; if (link_tag[i].title == css_title) { link_tag[i].disabled = false ; } } setCookie('style',css_title,365); } } function setCookie(c_name,value,expiredays) { var exdate=new Date(); exdate.setDate(exdate.getDate()+expiredays); document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toUTCString()); } function getCookie(c_name) { if(document.cookie.length>0) { c_start=document.cookie.indexOf(c_name + "="); if (c_start!=-1) { c_start=c_start + c_name.length+1; c_end=document.cookie.indexOf(";",c_start); if (c_end==-1) c_end=document.cookie.length; return unescape(document.cookie.substring(c_start,c_end)); } } return ""; } function init() { s_style=getCookie('style'); if(s_style != null && s_style != "") { switch_style(s_style); } } window.onload = init; </script> </head> <body> <button onclick="switch_style('style1');">style 1</button> <button onclick="switch_style('style2');">style 2</button> <button onclick="setCookie('style','',0);">erase</button> </body> </html> Stylesheets are loaded in the HEAD as links. You could add a third with the line Code: <link rel="alternate stylesheet" type="text/css" title="style3" href="style3.css"> We have a function init() which does the things we need when the page loads. We could use <body onload="init();>, but it's just as easy to add an event handler with the line window.onload = init; in the HEAD. We check for a cookie, and swap the active stylesheet if one is found. Clicking buttons calls switch_style(), which loops through all the document's linked stylesheets, then enables/disables them based on their TITLE attribute - comparing it to a string passed to the function. It saves this name to a cookie.
The element named css, is the html element: <link id="css" rel="stylesheet" type="text/css" href="style1.css" />, it's called css by the id. Can i use the init() to call the script (with = rather than !=) or will that script not work at all?
Ah, right, I get you. While your idea would work with a little tweaking, it's a bit better to load all your stylesheets as separate objects, but only because it means browsers will understand things a little better. That way they get preloaded and cached properly and the browser knows that there are alternate styles available. You'll run into fewer problems with the page being redrawn this way. Here's how Firefox treats the example code with two styles: It can see that you have two different stylesheets to switch between on that page.
Alright i've switched it to your code, and as far as making the cookies, works. I'm not sure what part of the script i'm supposed to edit for it to link to my stylesheets so if you could point me in the right direction i think it will work . Edit: Thanks for your help so far - i would be nowhere on this cookie script without you .
By all means use the code you suggested. My last post wasn't meant to sound like "your idea is stupid, do it my way!" (but I fear it may seem like that after a rereading). I only intended to explain the reasoning for my choice in using more complicated code. In fact, that was just a tidied up version of something I threw together to test my ideas before telling you how to do it - I needed to check it worked for myself! However, here's an explanation of how mine works. In the HEAD of the document, you list all of your stylesheets that are choose-able. The default one is listed as a stylesheet, while the alternatives are listed as... alternate stylesheets. Here's a similar, but different, piece of example code to what is found in my previous one: Code: <link rel="stylesheet" type="text/css" title="Banana" href="style1.css"> <link rel="alternate stylesheet" type="text/css" title="Boiled Potato" href="style2.css"> <link rel="alternate stylesheet" type="text/css" title="Chutney" href="flibblewibble.css"> The title attributes are shown through the browser's style picker menu, so while it doesn't have to be anything more than "style1" or "style2" or "potato" you want to make it descriptive. "Yellow" or "Light Theme" or whatever. Don't make it an essay, though because it's what you use in the code to identify the different styles. Your buttons to switch styles just need to use the switch_style() function (i.e. in their onclick event). You pass to the function the title of the stylesheet you want to switch to. So for example switch_style('Chutney'); to start using flibblewibble.css. The function automatically sets the cookie, so that stylesheet will be enabled the next time the page is loaded.
Ahh, well i'm using jquery: Code: $("#bggrey").click(function(){ $("#css").attr("href","style2.css"); }); $("#bgblack").click(function(){ $("#css").attr("href","style1.css"); }); for the actual switch on click, my problem is the onload handler doesn't actually make it stick to that style when you refresh the page. Also, i didn't read what you said as your way is wrong mine is right, i read it as, it would be easier to do it my way for everything to work.
If I understand what's going on, you just need to make sure the cookie gets set when the style gets changed. Code: $("#bggrey").click(function(){ $("#css").attr("href","style2.css"); setCookie('style','style2.css',365); }); $("#bgblack").click(function(){ $("#css").attr("href","style1.css"); setCookie('style','style1.css',365); }); Then make sure the cookie gets read when the document loads, and switches the style to the read value. Code: function init() { s_style=getCookie('style'); if(s_style != null && s_style != "") { $("#css").attr("href",s_style); } } window.onload = init; Same result, but with a bit more code reuse. You could get rid of switch_style(), though.
