PDA

View Full Version : 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

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

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

#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

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

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


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

style2.css


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

coothead

mwinter
11-30-2006, 01:33 PM
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.




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.





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