Home arrow Style Sheets arrow 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
(Page 1 of 6 )

Introduction

Welcome to Part III of the series "Customizing Styles: User-controlled Style Sheets." Its our last article in this series, aimed specifically at swapping entire style sheets in Web documents, making the style change reversible and even persistent across different Web pages.

Hopefully the methods to be explained here will boost your already vast knowledge of style sheets and have applications beyond this article. But, wait! Did you say youre already an expert on the subject? Okay, good for you, but I must consider the kind people who wish to learn more about it. Sounds fair. So, join me in this last trip. Were going to make the whole style sheet swapping process a really fun experience. Lets get started.

To swap or not to swap. That is the question. 

In first place, we need to tackle the problem of making the style change process really reversible. This sounds like common sense, since we want to give users the possibility to alternate between different style sheets, and offer a straightforward way to return to the default style sheet loaded initially. At this point, were talking about a simple but real style-switching tool, which might be implemented with minor effort. Thus, lets declare the two corresponding external style sheets, "default.css" and "accessible.css" respectively, in the <head> section of the Web document, just as we did in the previous examples:

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

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

If your memory is one of your strongest points (unlike me), remember that weve solved the conflict of dealing with two style sheets by deactivating the second one, that is, "accessible.css," so that we give the browser only one style sheet to parse. By including the following JavaScript code in the <head> section of the page, the disabling process is thus performed:

var accessibleSheet=document.getElementById('accessible');

accessibleSheet.disabled=true;

With the above lines, weve directly disabled the "accessible.css" style sheet quickly. Now what? So far, the technique closely resembles the previous method described in second part of this article. Well, were going to provide users with a regular link to swap between style sheets, but this time the process will be completely reversible. In other words, we need to redefine the "changeStyle()" JavaScript function for turning on and off both style sheets. Heres how it can be done:

<script language="javascript">

// disable default style sheet

var accessibleSheet=document.getElementById('accessible');

accessibleSheet.disabled=true;

changeStyle=function(){

     var switcher=document.getElementById('switcher');

     switcher.onclick=function(){

          // get style sheets

          var defaultSheet=document.getElementById('default');

          if(!defaultSheet){return;}

          var newSheet=document.getElementById('accessible');

          if(!newSheet){return;}

          // exchange style sheets

          if(newSheet.disabled){

                // disable previous active style sheet

                defaultSheet.disabled=true;

                newSheet.disabled=false;

          }

          else {

                // enable new style sheet

                newSheet.disabled=true;

                defaultSheet.disabled=false;

          }

          return false;

     }

}

// execute code when page is loaded

window.onload=function(){

     if(document.getElementById){

          changeStyle();

     }

}

</script>

 

Before we start explaining the function code, lets complete the listing, showing the necessary HTML to make the style change work. It is as follows:

<h1>Page Name</h1>

<p><a href="#" title="Change Style" id="switcher">Change style</a></p>

<div class="content">

<p>Content for div1 goes here...Content for div1 goes here...Content for div1 goes here...</p>

</div>

<div class="content">

<p>Content for div2 goes here...Content for div2 goes here...Content for div2 goes here...</p>

</div>

<div class="content">

<p>Content for div3 goes here...Content for div3 goes here...Content for div3 goes here...</p>

</div>

Okay, I know that the HTML markup is basic, but who needs more? Its good enough to put the JavaScript function into action. Its time to break down the code and learn how it works, and I explain this in the next section. 


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