Results 1 to 6 of 6

Thread: Switching stylesheets via a button

  1. #1
    Join Date
    Feb 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Switching stylesheets via a button

    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.

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,246
    Thanks
    1
    Thanked 236 Times in 231 Posts

    Default

    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

  3. #3
    Join Date
    Nov 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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>

  4. #4
    Join Date
    Feb 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Thank you

    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
    Last edited by Ferellie; 11-29-2006 at 04:51 PM.

  5. #5
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,246
    Thanks
    1
    Thanked 236 Times in 231 Posts

    Default

    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

  6. #6
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Ferellie View Post
    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.


    Quote Originally Posted by windowpane View Post
    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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •