Home arrow Style Sheets arrow Page 6 - 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 - Putting the pieces together
(Page 6 of 6 )

 

As I promised before, here’s the full code for changing style sheets, and keeping the change persistent:

<html>

<head>

<title>CHANGING STYLES BY STYLE SHEET</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="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" />

<script language="javascript">

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;

}

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'));

          }

     }

}

// load default style sheet if no cookie is found

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

// make style switchers

window.onload=function(){

     if(document.getElementById){

          makeStyleSwitchers();

     }

}

</script>

</head>

<body>

<h1>Page Name</h1>

<div id="stylepanel">

<p>

<a href="#" title="Change Style" id="switcher1">Style
1</a>

<a href="#" title="Change Style" id="switcher2">Style
2</a>

<a href="#" title="Change Style" id="switcher3">Style
3</a>

<a href="#" title="Change Style" id="switcher4">Style
4</a>

</p>

</div>

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

Whew, that was a pretty long snippet. But look at what we have accomplished: we’ve developed a useful method for changing complete style sheets, and we made it stick across different pages!

Conclusion 

In this series, we’ve taken an in-depth look at different methods to change styles in Web pages, starting out with single-element style manipulation to multiple wider style sheet changes, using only client-side techniques. Hopefully this has been an introductory process that will encourage you to expand on the explained methods and incorporate possible improvements to them. Just put your JavaScript background to work and make the big change!


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

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