#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2003
    Posts
    288
    Rep Power
    12

    Javascript to change css stylesheets...


    Ok I'm redesigning this website, and to cover disability regulations they currently have a script installed to change stylesheets. However I've been dutifly told that the script never worked in Netscape (although my testing has proved it to work in NS7)...

    The script and the stylesheets to be swapped between are defined in the page as this:

    Code:
    <link rel="stylesheet" type="text/css" href="data/css/default.css">
    
    <link rel="alternate stylesheet" type="text/css" href="data/css/large.css" title="large">
    
    <link rel="alternate stylesheet" type="text/css" href="data/css/b+w.css" title="b+w">
    
    <script type="text/javascript" src="data/styleswitcher.js"></script>
    And html validation explorations have thrown up that the following attrbutes within these tags are not supported at all by netscape:

    Within the link tag the 'title' attribute is not supported and within the script tag the 'type' attribute is not supported...

    And checking the site with netscape 4.5 these errors are been reported:

    Code:
    JavaScript Error:
    data/styleswitcher.js, line
    21:
    
    document.getElementsByTagName is not a function. 
    _JavaScript Error:
    data/styleswitcher.js, line
    21:
    
    document.getElementsByTagName is not a function. 
    _JavaScript Error:
    data/styleswitcher.js, line
    3:
    
    document.getElementsByTagName is not a function. 
    _JavaScript Error: home.php:
    
    info is not defined. 
    _JavaScript Error:
    data/styleswitcher.js, line
    13:
    
    document.getElementsByTagName is not a function. 
    _JavaScript Error:
    data/styleswitcher.js, line
    21:
    
    document.getElementsByTagName is not a function. 
    _JavaScript Error:
    data/styleswitcher.js, line
    21:
    
    document.getElementsByTagName is not a function.
    And here's the script:

    Code:
    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);
    Any ideas?

    -D
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2003
    Posts
    173
    Rep Power
    12
    well maybe that's why the css never worked in ns4...?
    try changing all
    document.getElementByTagName
    to
    document.getElementById("ID")
    ID is where the element Id goes...so for a link with ID link1 you would put link one in.

    anyway, I've never see document.getElementByTagName before, so maybe it is valid javascript, if it isn't then the above mentioned change may help.

    edited:
    ok..just followed a link, turns out getElemetsByTageName actually exists as part of the DOM. Maybe NN4 just didn't support it...

    Read this:DOM stuff
    Last edited by IBM; April 8th, 2003 at 01:06 AM.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2002
    Location
    Seattle WA
    Posts
    863
    Rep Power
    14
    You're worried about your css and dom not working in NS4? Serisously, don't bother. That browser is so old, it practically pre-dates most of the CSS/DOM rules used nowadays.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2003
    Posts
    288
    Rep Power
    12
    I know that Netscape 4.x is quite old, but its my job to get the site working in as wide a range of browsers as possible... plus as I said the problem isn't with just 4.x it doesn't work in anything up til 7.x

    Anyway as for IBM's suggestion I think I'm following you (I really must learn javascript as soon as I get time) however if I change it to 'getElementByID' how do I place the list of possible choices, because as I see it the other method ('getElementByTagName') is looking for the tags names <link> at the moment i.e :
    [CODE<link rel="alternate stylesheet" type="text/css" href="data/css/large.css" title="large">[/CODE]

    Changing it to 'getElementByID' and placing an ID attribute in the current <link ...> tag stops it from working in IE.

    Any ideas?

    -D
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2003
    Location
    #devshed @ irc2.beyondirc.net
    Posts
    231
    Rep Power
    12
    Tell your visitors to upgrade to the latest version of Mozilla, Opera, or Netscape. Then there won't be any need for javascript. Alternative style sheet selection is built into those browsers. I really hope MS implements this soon as I see a lot of potential for alternate style sheets.

    Anyway, . . .are you going to be using only a certain set of stylesheets throughout your site? If this is the case, you don't have to dynamically detect which style sheets are available in the current page. Just make sure to implement the same set in each page. Then, your script would be much simpler.
    .
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2003
    Posts
    288
    Rep Power
    12
    Yes there are just 3 style sheets, default, large and black and white, and telling users to upgrade isn't an option.

    -D
  12. #7
  13. No Profile Picture
    wibble
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2001
    Location
    UK
    Posts
    161
    Rep Power
    14
    I've seen just about exactly that code on the www.wired.com website.

    You could check theirs to see if it works in NN6 & 7. I expect it will. However they just display a basic version of the site for NN4 users with a notice advising they upgrade to standards compliant browsers.

    Less than 1% of people use NN4 now. Its time for it to be removed from the browser gene pool
    Last edited by blancbleu; April 10th, 2003 at 08:51 AM.
  14. #8
  15. Traveler
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2003
    Location
    UK
    Posts
    45
    Rep Power
    12
    Well everyone here seems to use it so I have great fun as my scripts seem to work N4 or N6 and ie.

    That life!!!!



    (**Don't forget your towel**)

IMN logo majestic logo threadwatch logo seochat tools logo