Home arrow Style Sheets arrow Page 4 - Customizing styles: User-Controlled Style Sheets – Part III
STYLE SHEETS

Customizing styles: User-Controlled Style Sheets – Part III


In this third part and final part of our article series about user-controlled style sheets, we will learn how to make switching between style sheets both reversible and persistent across all pages of your website for your visitors.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 15
April 20, 2005
TABLE OF CONTENTS:
  1. · Customizing styles: User-Controlled Style Sheets – Part III
  2. · Breaking the "changeStyle()" function into pieces
  3. · Listing the complete source code
  4. · Making the big change: multiple style sheets and persistence
  5. · Defining the HTML markup and Style Sheets
  6. · Putting the pieces together

print this article
SEARCH DEVARTICLES

Customizing styles: User-Controlled Style Sheets – Part III - Making the big change: multiple style sheets and persistence
(Page 4 of 6 )

Before we start examining any code, a few disclaimers: first, since coding cookies is rather complex, and out of the scope of this article, we’ll be using a basic cookie implementation, to keep the rest of the code uncluttered. Second, we’ll be using five style sheets in the example, generating a style panel that will allow users to select the proper style sheet. The first one will be the default style sheet, and the others will be the alternative ones, used for the style swapping process. This is not meant to imply that you need to have five or more style sheets in your website. They will be used only for example purposes.

With these formalities out of the way, let’s begin including the corresponding style sheets into the document:

<link rel="stylesheet" type="text/css"
href="default.css" id="default" />

<link rel="alternate" type="text/css"
href="style1.css" id="style1" />

<link rel="alternate" type="text/css"
href="style2.css" id="style2" />

<link rel="alternate" type="text/css"
href="style3.css" id="style3" />

<link rel="alternate" type="text/css"
href="style4.css" id="style4" />

The next step is to define the "setStyleSheet()" function, which will accept a style sheet ID as a parameter, activating the selected one but previously deactivating the rest. Finally, the function will store in a cookie the ID for the style sheet activated. Here’s the code for this first function:

function setStyleSheet(sheetId){

     // loop over style sheets and deactivate them

     for(var i=0;i<document.styleSheets.length;i++){

          document.styleSheets[i].disabled=true;

     }

     // activate selected style sheet

     var sheet=document.getElementById(sheetId);

     if(!sheet){return;}

     sheet.disabled=false;

     // store stylesheet ID value in cookie

     document.cookie="style="+sheetId;

}

The function loops over all of the style sheets found in the document and deactivates them, using the "styleSheets" collection. Just by assigning a value of "false" to each style sheet’s disabled property, we’re switching them off. Then it activates the proper style sheet, using the passed ID as a parameter.

Finally, the function stores the ID in a cookie named "style," to make the style change persistent. Please notice that we’ve defined the cookie assigning a name and a value. We have not specified a time expiry or even a domain. As stated before, this helps out to keep things simple.

Now, we need to define the "makeStyleSwitchers()" function that simply iterates on all of the links contained within the style panel, in order to change the entire style sheet, when each link is clicked. Does this sound a little confusing? Let’s show the code for this function to clarify the concepts:

function makeStyleSwitchers(){

     // locate <a> elements in 'stylepanel' element

     var as=document.getElementById
('stylepanel').getElementsByTagName('a');

     if(!as){return;}

     // assign onclick event handlers

     for(var i=0;i<as.length;i++){

          as[i].onclick=function(){

                // set style sheet

                setStyleSheet(this.id.replace
(/switcher/,'style'));

          }

     }

}

 

The above function traverses all of the <a> elements contained into the <div> element identified as "stylepanel" and assigns an "onclick" event handler to each of them. This way, when any link is clicked, it calls our previous  "setStyleSheet()" function, passing to it the ID of the style sheet to be activated. Don’t get anxious. The line:

setStyleSheet(this.id.replace(/switcher/,'style'));

is really passing the ID of the corresponding style sheet. In a moment, when we take a look at the HTML markup, this expression will become clear.

Once the user has selected a given style sheet, we need the change to be persistent, remember? Thus, the scripts should checks for the existence of a "style" cookie to retrieve the value of the active style sheet. If the cookie is found, its value is passed to the "setStyleSheet()" function to activate the proper style sheet. Otherwise, if no cookie exists, the "default" style sheet is enabled. The line for checking the cookie and enabling the selected style sheet is listed below:

 document.cookie!=''?setStyleSheet
(document.cookie.split('=')[1]):setStyleSheet
('default');

Now, we have a cookie that stores user-selected styles. Our style change is really persistent. Just read the next section to see how the rest of the code is explained. 


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials