StyleSheet Selection on the Fly - JavaScript and AJAX forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

StyleSheet Selection on the Fly

Roudra

12:45 pm on Nov 25, 2008 (gmt 0)

10+ Year Member

Hi,

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..

<body>
<div id="Header" style="display:block; float:left; width:100%; clear:both;" >
<img src="ToolImages/Oracle.gif" alt="Oracle Logo" style="float:left" >

</div>

<div class="tabber" id="tab1">

<div class="tabbertab">
<h2><a name="tab1">Templates</a></h2>
<div class="tabber" id="tab1-1">

<div class="tabbertab">
<h3>Landing Page</h3>

<textarea class="HTMLArea" name="EditLandingPage" >
<link href="Theme/Flexblue.css" rel="stylesheet" type="text/css">

PS. Actual code will be very helpful as i am very new to Javasdcripting and do not have much hands on experience...
Thanks in advance for your kindness...

garann

10:57 pm on Nov 25, 2008 (gmt 0)

10+ Year Member

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")[0];
// remove first link tag in head
docHead.removeChild(docHead.getElementsByTagName("link")[0]);
// 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);

astupidname

11:56 pm on Nov 25, 2008 (gmt 0)

10+ Year Member

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.

daveVk

1:12 am on Nov 26, 2008 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Wondering if changing href of existing would also work

var docHead = document.getElementsByTagName("head")[0];
docHead.getElementsByTagName("link")[0].href = "myStyles.css";

Agree with astupidname regards pop-up.

astupidname

4:04 am on Nov 26, 2008 (gmt 0)

10+ Year Member

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.

daveVk

5:07 am on Nov 26, 2008 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Did not realize, but there are W3C standards relating to alternate styles implemented in Mozilla. Switching rel= is good idea.

google "Alternative Style: Working With Alternate Style Sheets"

[edited by: daveVk at 5:09 am (utc) on Nov. 26, 2008]