Home arrow Style Sheets arrow Page 3 - 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 - Listing the complete source code
(Page 3 of 6 )

 

As stated before, here’s the complete code for implementing the above example:

<html>

<head>

<title>CHANGING STYLES BY STYLE SHEET EXPANDED</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

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

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

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

</head>

<body>

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

</body>

</html>

And here are the style sheets, "default.css" and "accessible.css," including some CSS rules to be applied to the HTML elements. First, the rules for "default":

.content {

     font: normal 12px "Arial", Helvetica, sans-serif;

     color: #000;

     background: #fff;

     margin-bottom: 10px;

}

h1 {

     font: bold 24px "Arial", Helvetica, sans-serif;

     color: #000;

}

And second, the CSS rules for "accesible":

.content {

     font: 300% "Arial", Helvetica, sans-serif;

     color: #ff0;

     background: #000;

     margin-bottom: 10px;

}

h1 {

     font: bold 24px "Arial", Helvetica, sans-serif;

     color: #00f;

At this point, we can rest assured that we have a working script to easily swap style sheets, right? Well, not so fast. You may have noticed the significant limitation of this method. While we’ve provided it with nice reversing capabilities, the style change is still stateless. What if the user (hopefully) tries to visit another page of our site? Clearly, we run into serious difficulties.

Style changes must be persistent, allowing visitors to keep their preferred style during the session. We don’t want them to be upset by changing fonts and colors every time they take a look at a different document, right? So, to make style changes persistent, we’re going to set a cookie to indicate what style sheet the user has selected. Besides this, we’ll be giving to visitors the choice to select among several style sheets, not limited to only two. Isn’t it too much? I don’t think so. Let’s get ready to make the big change.


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