Style Switcher

Micah Atwell Jan 10, 2007

General

Provide your visitors with a method for toggling the text and background colors of your page or certain sections within it. Though simple, this script has a lot of potential and could be greatly expanded. Heavily commented.

»» Change foreground/background colors

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues.

Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay.

Notes

Created by: Micah Atwell
Web Site: http://www.u9x.net
Posted: January 10, 2007

In the body of the Web page, be sure to enclose the text you want to allowed changed with the following division tags:


<div class="textDefault"></div>

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: switchStyle.js

function switchStyle(){
  // return array of all DIV elements
  var divs = document.getElementsByTagName("DIV");
  // Iterate through all DIVs in array
  for(var i = 0; i < divs.length; i++){
    // If current DIV is using "textDefault" styling,
    // change it to use "textAlternate" styling
    if(divs[i].className == "textDefault")
      divs[i].className = "textAlternate";
    // If current DIV is using "textAlternate" styling,
    // change it back to use "textDefault" styling
    else if(divs[i].className == "textAlternate")
      divs[i].className = "textDefault";
  }
}

CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.

 /* Styling common to both states (add extra styling as needed) */
.textDefault, .textAlternate {
  padding: 10px;
  width: 300px;
}
/* Styling for the default state (add extra styling as needed) */
.textDefault {
  background-color: #fff;
  color: #000099;
  border: #000;
}
/* Styling for the alternate state (add extra styling as needed) */
.textAlternate {
  background-color: #000099;
  color: #fff;
  font-weight: bold;
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="switchStyle.js"></script>

Body

Paste this code into the BODY section of your HTML document


<p>
<small>»» <a href="switchStyle.html" onclick="switchStyle();return false;" title="Change foreground/background colors">Change foreground/background colors</a></small></p>

<div class="textDefault">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div>
<div class="plain">
<p>
Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues.</p></div>
<div class="textDefault">
<p>
Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay.</p></div>

Leave a Response

(2 comments)

good website

rachid Jan 13, 2007

The HREF attribute for your toggle link should be set to the filename of the document in which this code is used (in case your visitor does not have Javascript enabled).

Micah Jan 10, 2007

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details