SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2007
    Location
    Ryde, Isle of Wight, UK
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Problems with style switcher

    I just can't seem to figure this out, I feel as if I'm banging my head against a brick wall.
    I have produced a website for a client http://www.theresourcehub.co.uk
    On the site I have included three alternative style sheets, Large Text, Extra Large Text and High Contrast. They work really well in Opera and Firefox, but I just can't get them to work in Safari or IE7/IE6. My client would like the alternatives to work on click if he clicks on the enlarge images.

    The xhtml code I have used is in the head
    Code HTML4Strict:
    <link rel="stylesheet" type="text/css" media="all" href="style1.css" />
    <link rel="stylesheet" type="text/css" media="print" href="print.css" />
    <link rel="alternate stylesheet" type="text/css" href="large.css" title="Large" />
    <link rel="alternate stylesheet" type="text/css" href="xlarge.css" title="Extra Large" />
    <link rel="alternate stylesheet" type="text/css" href="contrast.css" title="High Contrast" />
    <script type="text/javascript" src="scripts/styleswitcher.js"></script>
    and this is the code in the access div
    Code HTML4Strict:
    <div id="skip">
    <ul class="style1" id="access">
          <li><a accesskey="1" href="sitemap.html" title="Site Map"> Site Map</a></li>
          <li><a href="#content" title="Skip to Contents">Skip to Contents</a></li>
          <li><a href="#nav" title="Skip to Navigation"> Skip to Navigation</a></li>
    	  <li><a href="#" onclick="setActiveStyleSheet('style'); return false;"><img src="images/a4.png" alt="View this website in standard text size" width="20" height="20" /></a></li>
            <li><a href="#" onclick="setActiveStyleSheet('large'); return false;"><img src="images/a5.png" alt="View this website in  large text size" width="20" height="20" /></a></li>
         <li><a href="#" onclick="setActiveStyleSheet('xlarge'); return false;"><img src="images/a6.png" alt="View this website in extra large text size" width="20" height="20" /></a></li>
      </ul>
    </div>

    I am using styleswitcher.js the code is as follows which includes cookies
    Code JavaScript:
    // JavaScript Document swap size of font//
    function setActiveStyleSheet(title) {
      var i, a, main;
      for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
        if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
          a.disabled = true;
          if(a.getAttribute("title") == title) a.disabled = false;
        }
      }
    }
     
    function getActiveStyleSheet() {
      var i, a;
      for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
        if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
      }
      return null;
    }
     
    function getPreferredStyleSheet() {
      var i, a;
      for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
        if(a.getAttribute("rel").indexOf("style") != -1
           && a.getAttribute("rel").indexOf("alt") == -1
           && a.getAttribute("title")
           ) return a.getAttribute("title");
      }
      return null;
    }
     
    function createCookie(name,value,days) {
      if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
      }
      else expires = "";
      document.cookie = name+"="+value+expires+"; path=/";
    }
     
    function readCookie(name) {
      var nameEQ = name + "=";
      var ca = document.cookie.split(';');
      for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
      }
      return null;
    }
     
    window.onload = function(e) {
      var cookie = readCookie("style");
      var title = cookie ? cookie : getPreferredStyleSheet();
      setActiveStyleSheet(title);
    }
     
    window.onunload = function(e) {
      var title = getActiveStyleSheet();
      createCookie("style", title, 365);
    }
     
    var cookie = readCookie("style");
    var title = cookie ? cookie : getPreferredStyleSheet();
    setActiveStyleSheet(title);

    I just can't see where I've gone wrong either in my xhtml coding or have I missed something in the javascript.
    I've reread the ALA pages on this and searched the forums within Sitepoint but can't find any useful information.
    I'm not hot on PHP yet so although I have tried to do a page with php, I'm not confident enough to use this system yet and still couldn't get it to work.
    Any suggestions as to why it's not working as expected.

  2. #2
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The function you are calling to switch style sheets is:

    Code:
     setActiveStyleSheet(title)
    And you're calling it with:

    Code:
    setActiveStyleSheet('xlarge')
    Which isn't the title:

    Code:
    type="text/css" href="xlarge.css" title="Extra Large"
    I have no idea why it would be working in Opera or Firefox though.
    Hello World

  3. #3
    SitePoint Zealot
    Join Date
    Jun 2007
    Location
    Ryde, Isle of Wight, UK
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many thanks DougBTX.

    I knew it was something simple, but I just couldn't get it.
    Occasionally it needs someone else to point out the tree from the wood

  4. #4
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problem, good luck with the site.
    Hello World


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
  •