homepage Welcome to WebmasterWorld Guest from 54.166.100.8
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
StyleSheet Selection on the Fly
Roudra




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

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




msg:3794228
 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")[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




msg:3794253
 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.

daveVk




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

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




msg:3794359
 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.

daveVk




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

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]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved