Switching stylesheets via a button

**Ferellie** · 11-28-2006, 05:53 PM

Hello,
I have created 2 stylesheets containing different text sizes.
How can I add a button to the page to allow the user to switch stylesheets and thereby change the text size?

Really appreciate the help, thanks.

**coothead** · 11-28-2006, 07:36 PM

Hi there Ferellie,

this is probably better done server side, but if you are interested this is a javascript method...

page

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>style changer button</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link id="mystyle" rel="stylesheet" type="text/css" href="style1.css">

<script type="text/javascript">

window.onload=function() {

document.getElementById('mybutton').onclick=function() {

   obj1=document.getElementById('mystyle');
if(this.value=='font-size:36px') {
   this.value='font-size:10px';
   obj1.href='style2.css';
 }
else {
   this.value='font-size:36px';
   obj1.href='style1.css';
   }
  }
 }
</script>

</head>
<body>

<div><input id="mybutton" type="button" value="font-size:36px"></div>

<h1 id="test">this is a font size test</h1>

</body>
</html>

style1.css

Code:

#test {
    font-size:10px;
    text-align:center;
 }

style2.css

Code:

#test {
    font-size:36px;
    text-align:center;
 }

coothead

**windowpane** · 11-29-2006, 09:18 AM

Hi
There is an also alternative way similar to coothead's one. Create two stylesheets named style1.css and style2.css ans switch them via a javascript function and onclick property of an <a> tag.

<html>
<head>
<link rel="stylesheet" href="style1.css" type="text/css" title="style1">
<link rel="alternate stylesheet" href="style2.css" type="text/css" title="style2">
<title>Untitled Document</title>
<script type="text/javascript">
function changeCSS(a){
for(i=0; i<document.styleSheets.length; i++){
if(document.styleSheets[i].title){
document.styleSheets[i].disabled=true;
if(document.styleSheets[i].title==a){
document.styleSheets[i].disabled=false;
}
}
}
}
</script>
</head>

<body>

<a href="javascript://" onclick="changeCSS('style1');">Switch to Style 1</a><br />
<a href="javascript://" onclick="changeCSS('style2');">Switch to Style 2</a><br />

Your content

</body>
</html>

**Ferellie** · 11-29-2006, 03:32 PM

It really works great but I have one problem though.

How do I keep the stylesheet I selected on the home page when the user goes to another page. It reverts back to the original normal stylesheet again.

Thanks again,

Ferellie

**coothead** · 11-29-2006, 06:51 PM

Hi there Ferellie,

How do I keep the stylesheet I selected on the home page when the user goes to another page. It reverts back to the original normal stylesheet again.

This will require a cookie...

home.html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>style changer button</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link id="mystyle" rel="stylesheet" type="text/css" href="style1.css">

<script type="text/javascript">
  var obj0,obj1,styleid;

window.onload=function() {
   obj0=document.getElementById('mybutton');
   obj1=document.getElementById('mystyle');
   readCookie();
obj0.onclick=function() {
   stylech();
  }
 }

function stylech() {
if(obj0.value=='font-size:10px') {
   obj0.value='font-size:36px';
   styleid='style1.css';
   obj1.href=styleid;
 }
else {
   obj0.value='font-size:10px';
   styleid='style2.css';
   obj1.href=styleid;
  }
   setCookie();
 }

function setCookie() {
  exp=new Date();
  plusMonth=exp.getTime()+(31*24*60*60*1000);
  exp.setTime(plusMonth);
  document.cookie='style='+styleid+';expires='+exp.toGMTString();
 }

function readCookie() {
if(document.cookie) {
   which=document.cookie.split('style=')[1];
   obj1.href=which;
if(which=='style1.css'){
   obj0.value='font-size:36px';
}
else{
   obj0.value='font-size:10px';
  }
 }
else { 
     stylech();
  }
 }

</script>

</head>
<body>

<div><input id="mybutton" type="button" value="font-size:10px"></div>

<ul>
<li><a href="anotherPage.html">another page</a></li>
</ul>

<h1 id="test">this is a font size test</h1>

</body>
</html>

anotherPage.html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>another page - read cookie</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link id="mystyle" rel="stylesheet" href="style1.css" type="text/css">

<script type="text/javascript">

function readCookie() {
if(document.cookie) {
   which=document.cookie.split('style=')[1];
   document.getElementById('mystyle').href=which;
  }
 }
window.onload=readCookie;

</script>

</head>
<body>

<h1 id="test">This is another page</h1>

</body>
</html>

style1.css

Code:


#test { font-size:10px; text-align:center; }

style2.css

Code:


#test { font-size:36px; text-align:center; }

coothead

**mwinter** · 11-30-2006, 01:33 PM

Originally Posted by Ferellie

I have created 2 stylesheets containing different text sizes.
How can I add a button to the page to allow the user to switch stylesheets and thereby change the text size?

Why do you even feel the need? Browsers already have the ability to resize text.

There's no point in creating new ways of doing the same thing. Better to let the visitor use their way - the way that works on all sites - rather than finding different approaches on different sites.

Originally Posted by windowpane

Create two stylesheets named style1.css and style2.css ans switch them via a javascript function and onclick property of an <a> tag.

If it's not a link, don't mark it up with an anchor, especially not one that uses the javascript pseudo-scheme in the href attribute. That should (almost) always be avoided.

Code:

function changeCSS(a){
    for(i=0; i<document.styleSheets.length; i++){
        if(document.styleSheets[i].title){
            document.styleSheets[i].disabled=true;
            if(document.styleSheets[i].title==a){
                document.styleSheets[i].disabled=false;
            }
        }
    }
}

How widely did you test that code? There are many browsers that don't support the styleSheets collection, including relatively recent versions of Opera.

All code presented in this thread so far demonstrates a distinct lack of feature detection, assuming that the approaches used are universally supported when they are clearly not. There is also, for some reason, a lack of variable declarations, causing numerous variables to become global instead of assuming the appropriate local scope.

Do no use pixel (or point) lengths to set font sizes. Neither are appropriate for screen media.

Mike

Thread: Switching stylesheets via a button

Thread Tools

Search Thread

Switching stylesheets via a button

Thank you

Bookmarks

Bookmarks

Posting Permissions