Msg#: 3793782 posted 12:45 pm on Nov 25, 2008 (gmt 0)
I Have 2 different stylesheets for a particular HTML page and i want to allow the user to select the particular stylesheet he wants to use while opening the HTML page. I have a pop-up box prompting the user to select the stylesheet. How to apply this to the HTML page? In the below example i am hardcoding teh css name viz Flexblue.css but i have 2 stylesheets namely Flexblue and flexbrown. And i want the user to select the stylesheet when loading the HTML. Please advise..
Msg#: 3793782 posted 10:57 pm on Nov 25, 2008 (gmt 0)
Assuming you want to remove the first existing stylesheet and add the new one as the last child of the <head> element.. var docHead = document.getElementsByTagName("head"); // remove first link tag in head docHead.removeChild(docHead.getElementsByTagName("link")); // create a new link tag to append var newScript = document.createElement("link"); newScript.rel = "stylesheet"; newScript.type = "text/css"; newScript.href = "myStyles.css"; // add the new tag to the end of the head docHead.appendChild(newScript);
Msg#: 3793782 posted 11:56 pm on Nov 25, 2008 (gmt 0)
I would recommend you google "stylesheet switcher" (without the quotes) -(but stay away from dynamicdrive as they have crappy syntax in their scripts and are old) (google search result item #13 from designshack looks to be a decent, modern script). You will find many options and ways to store the users preferred style sheet in a cookie as well, so they will see the chosen style when they return to your site. However, I certainly would not recommend using a pop-up prompt box to force the user to make a choice before entering your page. That would be an extremely bad practice. I would make my choice and then leave your intrusive website immediately, never to return. Better to just have some buttons at the top right corner of the page and allow the user (if they want to) to change styles and play with that through buttons or text links. It certainly is not necessary to get into creating and removing link elements altogether, when you can simply change between stylesheet links.
Msg#: 3793782 posted 4:04 am on Nov 26, 2008 (gmt 0)
Wondering if changing href of existing would also work
I have not tested that, but I do not believe that will work. For that to work the page would have to be reloaded with a different href attribute in the link tag for the page to actually import another stylesheet - not sure if that is do-able through js. With php perhaps. I know there are php style switchers, but have not looked in to how they work. The js style switchers basically work by alternating the different (stylesheet) link tags disabled properties between true and false. You have one stylesheet with a rel="stylesheet" in its link tag, and all other stylesheet link tags have rel="alternate stylesheet". Then you differentiate between them by giving each a different title attribute, with the default ones title="default" of course.