Style Sheets
  Home arrow Style Sheets arrow Page 3 - Working with Multiple Style Sheets
Dev Articles Forums 
ADO.NET  
Apache  
ASP  
ASP.NET  
C#  
C++  
ColdFusion  
COM/COM+  
Delphi-Kylix  
Design Usability  
Development Cycles  
DHTML  
Embedded Tools  
Flash  
Graphic Design  
HTML  
IIS  
Interviews  
Java  
JavaScript  
MySQL  
Oracle  
Photoshop  
PHP  
Reviews  
Ruby-on-Rails  
SQL  
SQL Server  
Style Sheets  
VB.Net  
Visual Basic  
Web Authoring  
Web Services  
Web Standards  
XML  
Dedicated Servers  
Moblin 
JMSL Numerical Library 
IBM® developerWorks 
Sun Developer Network 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid 
Request Media Kit
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
STYLE SHEETS

Working with Multiple Style Sheets
By: Alejandro Gervasio
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 5 stars5 stars5 stars5 stars5 stars / 1
    2007-09-11

    Table of Contents:
  • Working with Multiple Style Sheets
  • Working with alternate style sheets
  • Switching alternate style sheets in a cross-browser fashion: defining a basic JavaScript function
  • Swapping alternate style sheets

  • Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     
    ADVERTISEMENT


    Working with Multiple Style Sheets - Switching alternate style sheets in a cross-browser fashion: defining a basic JavaScript function


    (Page 3 of 4 )

    As you learned in the previous section, all of the alternate style sheets attached to a given web document have a "title" attribute that identifies them. So I'm going to use that attribute to create a simple JavaScript function that allows the user to activate programmatically only one of these sheets.

    Basically, the signature for this JavaScript function looks like this:

    function changeStyleSheet(title){
       var lnks=document.getElementsByTagName("link");
       if(!lnks){return};
       for(var i=0;i<lnks.length;i++){
          if(lnks[i].getAttribute("rel").indexOf("style")!=-1&&lnks
    [i].getAttribute('title')){
             lnks[i].disabled=true;
             if(lnks[i].getAttribute('title')==title){
                lnks[i].disabled = false; 
             }
          }
       }
    }

    As shown previously, the above "changeStyleSheet()" function implements a simple mechanism for activating/deactivating a specific alternate style sheet directly from the site's own web page. The function accepts the title of the style sheet to be enabled, and then disables the others via the "disabled" property.

    Indeed, the process for swapping alternate style sheets is pretty straightforward and you shouldn't have much problem grasping how it works, so next I will define another JavaScript function that will display some links on the browser for calling the previous "changeStyleSheet()" function to activate a specific style sheet.

    This brand new function is defined as follows:

    function displayStyleLinks(){
       var labels=new Array('Red','Green','Blue','Font Size 1','Font
    Size 2','Font Size3');
       var div=document.createElement('div');
       div.setAttribute('id','linkcontainer');
       for(var i=0;i<labels.length;i++){
          var lnk=document.createElement('a');
          lnk.setAttribute('href','#');
          lnk.setAttribute('title',labels[i]);
          lnk.appendChild(document.createTextNode(labels[i]));
          div.appendChild(lnk);
       }
       document.getElementsByTagName('body')[0].appendChild(div);
    }

    The above JavaScript function doesn't bear mush discussion here. It performs a few basic tasks, like including some simple links via some DOM scripting. These links activate specific alternate style sheets when the user clicks on them. 

    And finally, the following JavaScript snippet attaches the "changeStyleSheet()" function to all of the links just created:

    window.onload=function(){
       if(document.getElementById && document.createElement &&
    document.getElementsByTagName){
          // display style links on the browser
          displayStyleLinks();
          var link1=document.getElementsByTagName('a')[0];
          if(!link1){return};
          link1.onclick=function(){
             changeStyleSheet('redstyle');
             return false;
          }
          var link2=document.getElementsByTagName('a')[1];
          if(!link2){return};
          link2.onclick=function(){
             changeStyleSheet('greenstyle');
             return false;
          }
          var link3=document.getElementsByTagName('a')[2];
          if(!link3){return};
          link3.onclick=function(){
             changeStyleSheet('bluestyle');
             return false;
          }
          var link4=document.getElementsByTagName('a')[3];
          if(!link4){return};
          link4.onclick=function(){
             changeStyleSheet('fontstylea');
             return false;
          }
          var link5=document.getElementsByTagName('a')[4];
          if(!link5){return};
          link5.onclick=function(){
             changeStyleSheet('fontstyleb');
             return false;
          }
          var link6=document.getElementsByTagName('a')[5];
          if(!link6){return};
          link6.onclick=function(){
             changeStyleSheet('fontstylec');
             return false;
          }
       }
    }

    So far, so good, right? At this stage I developed a simple JavaScript routine to swap several alternate style sheets by using links. But you probably want to see a concrete example that shows how to do this.

    Therefore, in the section to come I'll be setting up a practical example where a group of alternate style sheets are switched by using the JavaScript functions that you learned before. So click on the link below and keep reading, to see how this process will be performed.

    More Style Sheets Articles
    More By Alejandro Gervasio


       · This first part of the series offers a friendly introduction to swapping between...
     

    STYLE SHEETS ARTICLES

    - Creating Three-Column Web Page Layous with N...
    - Swapping Column Positions in Web Page Layout...
    - Creating Web Page Layouts with Negative Marg...
    - Creating Gradients for Individual Containers...
    - Creating Gradients for Web Page Headers with...
    - SEO Scrolling Frames Problem Solved
    - Building Cross-Browser Background Effects wi...
    - CSS: Pseudo
    - Using PNG Images to Build Background Effects
    - CSS: Continuing the Clarification of CSS Cla...
    - CSS: Top Secret Classification
    - CSS: Dimensions
    - CSS: Margins and Padding
    - CSS: Crossing the Border
    - CSS: Text, Fonts, and Tables







    © 2003-2008 by Developer Shed. All rights reserved. DS Cluster 3 hosted by Hostway