Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    USA
    Posts
    308
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cycling through style sheets?

    I'm trying to modify this script so that, vs. having individual links for each of the four style sheets I want to use, I can use one href that will cycle through all of them as you keep clicking. Please help!

    ----
    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);
    ----

    Currently, it will only work using a separate link for each sheet:

    <a href="#"
    onclick="setActiveStyleSheet('style01');
    return false;">change style to style01</a>

    <a href="#"
    onclick="setActiveStyleSheet('style02');
    return false;">change style to style02</a> ...etc.

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    USA
    Posts
    308
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Anyone? Should I have posted in the css forum?

  • #3
    New to the CF scene
    Join Date
    Jan 2004
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    New I had seen that code before you took it from http://www.fjordaan.uklinux.net/move...s/2002_02.html
    So much for copyright

  • #4
    Regular Coder
    Join Date
    Jul 2002
    Posts
    698
    Thanks
    0
    Thanked 0 Times in 0 Posts
    this is only a guess, assuming u know the number of styles and the active style:

    activestyle=1;
    numberofstyles=9;
    function NextStyle()
    {
    activestyle=activestyle+1;
    if(activestyle>=numberofstyles)
    {
    activestyle=0;
    }
    setActiveStyleSheet('style0'+activestyle);
    }

    the link

    <a href="#"
    onclick="NextStyle();
    return false;">change style to style01</a>

  • #5
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here's one I wrote in response to the same question a little while ago.
    You are welcome to use it if you like.
    Name your style sheets:
    style_1.css
    style_2.css
    style_3.css
    style_4.css

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <HEAD>
    
    <link rel="stylesheet" type="text/css" href="style_1.css">
    <link rel="stylesheet" type="text/css" href="style_2.css">
    <link rel="stylesheet" type="text/css" href="style_3.css">
    <link rel="stylesheet" type="text/css" href="style_4.css">
    
    <script type="text/javascript">
    <!--//
    function setCookie(new_style) {
    var which = document.getElementsByTagName('a');
    var what = which[new_style-1].name;
    var duitt = new Date();
    duitt.setTime(duitt.getTime() + 365*24*60*60*1000);
    var expString = "; expires=" + duitt.toGMTString();
    document.cookie = 'My_Style='+what+expString;
    }
    
    function setStyle(which_style) {
    if (/My_Style=style_(\d*)/.test(document.cookie)) { 
    which_style = RegExp.$1*1;
    }
    else {
    which_style = which_style;
    }
    if(document.styleSheets) {
    which_style = which_style-1;
    for(i=0;i<document.styleSheets.length;i++) {
    if(i!=which_style) {
    document.styleSheets[i].disabled=true;
    }
    else {
    document.styleSheets[i].disabled=false;
    }
    }
    }
    }
    setStyle(1)
    //-->
    </script>
    </HEAD>
    
    <BODY>
    <div id="Layer1" style="position:absolute; left:8px; top:50px; width:95px; height:350px; z-index:1">
    <a name="style_1" href="javascript:setStyle(1)" onclick="setCookie(1)">style one</a><br /><br />
    <a name="style_2" href="javascript:setStyle(2)" onclick="setCookie(2)">style two</a><br /><br />
    <a name="style_3" href="javascript:setStyle(3)" onclick="setCookie(3)">style three</a><br /><br />
    <a name="style_4" href="javascript:setStyle(4)" onclick="setCookie(4)">style three</a><br /><br />
    </div>
    
    <div style="position:absolute; left:108px; top:50px; z-index:2;" >Lorem
    ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
    invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
    eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
    no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
    amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
    labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
    et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
    sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
    magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
    dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
    Lorem ipsum dolor sit amet.</div>
    
    </body>
    </html>
    .....Willy

  • #6
    Master Coder
    Join Date
    Feb 2003
    Location
    Umeå, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Have a look at the SwitchStyles bookmarklet on my site.
    <http://liorean.web-graphics.com/>
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards


  •  

    Posting Permissions

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