eddie21leeds Posted February 4, 2009 Share Posted February 4, 2009 i am planning a style sheet swapper for my website. i want it to swap the stylesheet using javascript and the DOM. can i use javascript cookies to retain this somehow so the new stylesheet is kept throughout the users visit and maybe on return visits? or will ineed to use php? thanks! Quote Link to comment Share on other sites More sharing options...
Psycho Posted February 4, 2009 Share Posted February 4, 2009 If you have the ability to use PHP, you shouldn't use JavaScript at all for this type of functionality. JavaScript is dependant on whether the user has JS enabled and there can be cross-browser incompatabilities. With PHP, all the work is done server-side and is independant of the user's browser. Quote Link to comment Share on other sites More sharing options...
eddie21leeds Posted February 4, 2009 Author Share Posted February 4, 2009 is it possible to do the whole thing in php? i'm aware of sessions but how would i perform DOM manipulation? i was thinking that i would sacrifice the 5% (w3schools.com) of the market that don't have javascript enabled as it's not an integral part of my site... so if a user has javascript disabled then they simply miss out on the colour swapper. also this seems to be a very simple script so i can't see many cross browser issues, though i'm no expert! it would be nice to do it all php if possible but i don't know if i'm quite up to it!! Quote Link to comment Share on other sites More sharing options...
Psycho Posted February 4, 2009 Share Posted February 4, 2009 Simply have a "switch" within the PHP to determine which style sheet to use. If you are wanting to change the style sheet dynamically after the page is loaded, then yes you would need javascript. ... and I suppose a cookie would be the best solution for persistence Quote Link to comment Share on other sites More sharing options...
eddie21leeds Posted February 4, 2009 Author Share Posted February 4, 2009 ok thanks. ill be back when i get stuck!! Quote Link to comment Share on other sites More sharing options...
Psycho Posted February 4, 2009 Share Posted February 4, 2009 Here you go: Tested in IE & FF. Need three stylesheets named "sheet_1.css", "sheet_2.css", & "sheet_3.css" with a class named "displayText". <html> <head> <link id="stylesheet" rel="stylesheet" href="sheet_1.css"> <script type="text/javascript"> function changeStyle(sheetName) { document.getElementById('stylesheet').href = sheetName+'.css'; setCookie('stylesheet', sheetName, 2); } function setCookie(c_name,value, expiredays) { var expDate = ''; if (expiredays!=null) { var expDateObj = new Date(); expDateObj.setDate(expDateObj.getDate()+expiredays); var expDate = ';expires=' + expDateObj.toGMTString() } var cookieVal = c_name+ "=" +escape(value) + expDate; document.cookie = cookieVal; } 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 false; } function checkStyleSheetCookie() { var sheetName = getCookie('stylesheet'); if (sheetName!=null && sheetName!="") { changeStyle(sheetName); } return; } </script> </head> <body onload="checkStyleSheetCookie();"> <span class="displayText">Display text</span> <br><button onclick="changeStyle('sheet_1');">Style 1</button> <br><button onclick="changeStyle('sheet_2');">Style 2</button> <br><button onclick="changeStyle('sheet_3');">Style 3</button> </body> </html> Quote Link to comment Share on other sites More sharing options...
eddie21leeds Posted February 4, 2009 Author Share Posted February 4, 2009 wow thanks! ill let u know how it goes! Quote Link to comment Share on other sites More sharing options...
eddie21leeds Posted February 4, 2009 Author Share Posted February 4, 2009 http://edwardmc.com/example/ got it running ok thanks... there seems to be a bit of a time delay... if you have a look you will see that when you change styles the first few times the page goes "styleless" for a split second... it then goes fine... if u refresh it does the same again. the same happems on my local machine so i've ruled out my crumby hosting... is there a way to force the browser to load all the sheets at once so it isn't left loading? Quote Link to comment Share on other sites More sharing options...
Psycho Posted February 5, 2009 Share Posted February 5, 2009 Well, there's no noticable dealy at all in IE, but FF definitely has some issues. I would probably try and rework this some more, but here is a quick fix. I'm sure there are better ways to accomplish this - I'm just changing the "rel" parameter for the style sheet objects so the browser no longer considers them stylesheets. I've tested in IE7 and FF3, and there is no noticable lag.. First load all the stylesheets - in reverse order so the first sheet takes precedence. <link id="sheet_3" rel="stylesheet" href="http://edwardmc.com/example/sheet_3.css"> <link id="sheet_2" rel="stylesheet" href="http://edwardmc.com/example/sheet_2.css"> <link id="sheet_1" rel="stylesheet" href="http://edwardmc.com/example/sheet_1.css"> Then change the function changeStyle() as follows: function changeStyle(sheetName) { var i=1; while (document.getElementById('sheet_'+i)) { relValue = (sheetName=='sheet_'+i) ? 'stylesheet' : ''; document.getElementById('sheet_'+i).rel = relValue; i++; } setCookie('stylesheet', sheetName, 2); } The function now iterates through each sheet and changes the "rel" parameter to be "stylesheet" for the selected sheet and "" (empty string) for the others. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.