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
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Switching stylesheets across multiple pages using javascript

    I'm trying to allow the user to change the stylesheet of my website. I can change the stylesheet on a page by page basis (eg. from red style to blue style) but once the user navigates to a different page the stylesheet resets back to the original setting.

    For example, when the user visits the site first its set to the red style, they can change it to blue but when they navigate to another page the style goes back to red again where as I want the style to stick across pages.

    Does anybody know how I can sort this out? I assume I'll have to edit my javascript but Im not very good at javascript so any help would be great!

    HTML
    Code:
    <html>
    <head>
    <link href="red.css" rel="stylesheet"
    type="text/css" title="red" media="screen" />
    <link href="green.css" rel="alternate stylesheet"
    type="text/css" title="green" media="screen" /> 
    <link href="blue.css" rel="alternate stylesheet"
    type="text/css" title="blue" media="screen" />
    
    <script type="text/javascript">
    function changeStyle(title) {
    var lnks = document.getElementsByTagName('link');
    for (var i = lnks.length - 1; i >= 0; i--) {
    if (lnks[i].getAttribute('rel').indexOf('style')> -1 && lnks[i].getAttribute('title')) {
    lnks[i].disabled = true;
    if (lnks[i].getAttribute('title') == title) lnks[i].disabled = false;
    }}} 
    </script>
    
    
    </head>
    <body>
    <a href = "home1.html">Page 1</a>
    <br>
    <br>
    <a href = "home2.html">Page 2</a> 
    <br>
    <br>
    <a href = "home3.html">Page 3</a> 
    <br>
    <br>
    <br>
    <br>
    <a href = "#" onclick="changeStyle('red')">Red Stylesheet</a>
    <br>
    <br>
    <a href = "#" onclick="changeStyle('blue')">Blue Stylesheet</a> 
    <br>
    <br>
    <a href = "#" onclick="changeStyle('green')">Green Stylesheet</a> 
    </body>
    </html>
    CSS
    Code:
    body
    {
    background-color:red;
    }
    Last edited by IanOLeary1; 07-13-2011 at 04:23 PM.

  • #2
    New Coder
    Join Date
    Aug 2005
    Posts
    71
    Thanks
    9
    Thanked 3 Times in 3 Posts
    I think the easiest way to do this would be to set a cookie for the user then have your pages check for the cookie before each loads. This will allow for the style preference to persist throughout your domain.
    It's OK to pee against the wind if your standing in a lake.

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, would you have any examples of how this could be done? I'm sorry but I'm a graphic designer whos been roped into a coding job so I don't really know what I'm doing!

  • #4
    New Coder
    Join Date
    Aug 2005
    Posts
    71
    Thanks
    9
    Thanked 3 Times in 3 Posts
    ah, the ol' double duty. I think that happens to everyone.

    What you need requires quite a bit of coding. i'm not sure I can sit down and do the whole thing, but I found this and it is probably the best example with clear explanations as to what is going on and what you would need to do.

    http://www.quirksmode.org/js/cookies.html

    This guy is good. I actually have his book as well. I learned a lot from his site in my early years of coding. For your scenario, these are the steps you would need to take.

    1. all of your pages must check for the existence of your cookie. if it exists, use the values from that cookie. If it doesn't, then load the default style.
    2. when a user selects a different style, you will need to check for the existence of your cookie (you will always have to do this), if it exists, delete it and write the new cookie, if it doesn't then just write the cookie.

    your cookie could be set up as follows: myStyle=blue; expires=Thu, 2 Aug 2001 20:47:11 UTC; path=/

    what you would change (when a new style is selected) each time is the color after the = sign. This will all be js and you may have to piece bits together such as this cookie script with a script that changes page styles, but it can be done (even by a novice to js - it will just take some time). The alternative is to hire someone to do this for you (unless someone else has the time to whip up a script for you here). hope this helps
    It's OK to pee against the wind if your standing in a lake.

  • #5
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your help! I'll give it a crack and see how it goes.

  • #6
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    IanOLeary1:

    See, the complete cross-browser example in the .zip file, here:

    http://www.codingforums.com/showpost...6&postcount=13


  •  

    Posting Permissions

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