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.
Page 1 of 3 123 LastLast
Results 1 to 15 of 32
  1. #1
    New Coder
    Join Date
    Jul 2006
    Posts
    67
    Thanks
    7
    Thanked 0 Times in 0 Posts

    How can I make a JavaScript switcher ..??

    Hello:

    I am hoping someone can show me how to make a JavaScript and/or JQuery switcher, so I can add some accessibility features to my website.

    I am not too good at starting JavaScript from scratch, so any help would be great.

    What I want to do:

    This website (switchers are in the upper right of the site) shows exactly what I want to do:

    http://www.jimthatcher.com

    The 2nd and 3rd buttons.


    I believe he has a cookie set so the site "remembers" the settings when moving from page-to-page, and also if I close the site and re-open it it still retains the settings. Very nice.

    I have 3 stylesheets developed for the styles - contract.css, large-font.css, and largest-font.css that all work fine.

    I am just not sure how to develop the JavaScript to do this.

    Can anyone help me?

    Thanks!

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,574
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    All he is doing is enabling/disabling the <link ...> elements.

    You can see he has a whole series of <link>s:
    Code:
    <link rel="alternate stylesheet" type="text/css" href="css/contrastplusplus.css" title="Contrast++"/>
    <link rel="alternate stylesheet" type="text/css" href="css/contrastplus.css" title="Contrast+"/>
    <link rel="alternate stylesheet" type="text/css" href="css/contrast.css" title="Contrast"/>
    ... and more ...
    and he just looks at each href value (or maybe its title value) to see if it matches the requested style as saved in the cookies. If not, he disables the <link>. If so, he enables the <link>. Done. Easy-peasy.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New Coder
    Join Date
    Jul 2006
    Posts
    67
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Hi .. thanks much for the reply!

    Would you be able to show me an example code of how to make the cookies work.

    I am not understanding what you mean by enabling or disabling the link..??

    The stylesheets always seem to be there, ar least as far as I could tell.

    My guess was he was adding or removing classes specific to those stylesheets, but you feel there is a better approach..?

    Thanks for the help!

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,574
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    Just look at his code!

    His code does this:
    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;
        }
      }
    }
    See? He disables all the
    Code:
    <link rel="alternate stylesheet" type="text/css" href="css/contrastplusplus.css" title="Contrast++"/>
    <link rel="alternate stylesheet" type="text/css" href="css/contrastplus.css" title="Contrast+"/>
    ... etc. ...
    that have a title= and then un-disables the only one that matches the requested title.

    Simple as that!

    As far as making cookies work: Tons and tons and tons of examples on the web.

    It's not popular around here, but this is an adequate answer:
    http://www.w3schools.com/js/js_cookies.asp
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,574
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    I think his code is a little bit of overkill.

    So long as your titles on those <link>s are reasonably unique, you can just do:
    Code:
    function setActiveStyleSheet(title) 
    {
        var links= document.getElementsByTagName("link");
        for ( var i = 0; i < links.length; ++i )
        {
            var link = links[i];
            var linkTitle = link.getAttribute("title");
            if ( linkTitle != null ) link.disabled = ( linkTitle == title ) ? false : true;
        }
    }
    I think that's also a little easier to understand.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    spacepoet (09-10-2013)

  • #6
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,451
    Thanks
    17
    Thanked 275 Times in 275 Posts
    You can also have just one <link and change the href, you can give it an id or find it by tag name.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • Users who have thanked DrDOS for this post:

    spacepoet (09-10-2013)

  • #7
    New Coder
    Join Date
    Jul 2006
    Posts
    67
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Hi there:

    Thanks for the tips .. I will have to look into this a bit ..

    I do remember looking at his code, but it seemed a bit hard to follow .. maybe too much going on, or I am trying to figure out a way to streamline this a bit ...

    I figure posting on here will help me explore other options.



    Thanks!

  • #8
    New Coder
    Join Date
    Jul 2006
    Posts
    67
    Thanks
    7
    Thanked 0 Times in 0 Posts

    I made a lot of progress .. help with tweaks ..

    Hello:

    I have made the contrast switcher / text enlarger much more to my liking via some research into JQuery.

    But, I have a few tweaks I am hoping to get help with.

    This is the full working version (without the jquery.cookie.js and jquery file):
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <script src="jquery-1.9.1.min.js"></script>
    <script src="jquery.cookie.js"></script>
    
    <script>
    
        $(document).ready(function(){
    	
            // Check (onLoad) if the cookie is there and set the class if it is
            if ($.cookie('highcontrast') == "yes") {
                $("body").addClass("highcontrast");
            }
    
            // When the span is clicked
            $("#switch").click(function () {
                // Check the current cookie value
                // If the cookie is empty or set to no, then add highcontrast
                if ($.cookie('highcontrast') == "undefined" || $.cookie('highcontrast') == "no") {
                    // Set cookie value to yes
                    $.cookie('highcontrast','yes', {expires: 7, path: '/'});
                    // Add the class to the body
                    $("body").addClass("highcontrast");
                }
                // If the cookie was already set to yes then remove it
                else {
                    $.cookie('highcontrast','no',  {expires: 7, path: '/'});
                    $("body").removeClass("highcontrast");
                }
            }); 
    		
    
    		
            if ($.cookie('largerfont') == "yes") {
                $("body").addClass("largerfont");
            }
    
            // When the span is clicked
            $("#switchfont").click(function () {
                // Check the current cookie value
                // If the cookie is empty or set to no, then add largerfont
                if ($.cookie('largerfont') == "undefined" || $.cookie('largerfont') == "no") {
                    // Set cookie value to yes
                    $.cookie('largerfont','yes', {expires: 7, path: '/'});
                    // Add the class to the body
                    $("body").addClass("largerfont");
    				
    				
    				//WHY DOES THIS NOT DISPLAY ;
    				//$("#largerfont").html("Smaller Font");
    				$('#largerfont').text('Smaller Font');
    				
                }
                // If the cookie was already set to yes then remove it
                else {
                    $.cookie('largerfont','no',  {expires: 7, path: '/'});
                    $("body").removeClass("largerfont");
                }
            }); 		
    		
    		
    		
        });
    
    
    </script>
    
    <style>
    
        body {
            width:100%;
            height:100%;
        }
        body.highcontrast {
            background-color:#000;
            color:#fff;
        }
    
        body.largerfont {
            font-size: 300%;
        }
    
    </style>
    
    </head>
    
    <body>
    
    <a href="#" id="switch">Switch Contrast</a>
    
    <a href="#" id="switchfont">Larger Font</a>
    
    </body>
    </html>

    Couple of questions:

    1: The switcher for both doesn't work until the second click - why? Meaning, if I click "Switch Contrast" the first time, nothing happens. On the second click and all clicks moving forward, it works fine. Same with "Larger Font." Not a big deal but I would like it to work properly on the first click if possible.

    2: I am obviously duplicating the code and making a second cookie for the text size switcher - is there a better way to do this? Is there a better way - or should I be combining these two together?

    3: I can not get the "Smaller Font" message to display. What am I missing?

    4: Last, I am fine with doing only 2 font sizes - default and larger - but it would be very nice to give three options - default, larger, largest - with a message that changes each time. How difficult would this be to add this?

    Thanks for reading!


    UPDATE: I just noticed that this does not work in Chrome ... anyone know why?

    Thanks!
    Last edited by spacepoet; 09-15-2013 at 11:36 PM. Reason: Noticed error in Chrome

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,574
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    I don't use jQuery, and I don't see any obvious bug.

    Except for one:

    You are coding $('#largerfont').text('Smaller Font'); but you DO NOT HAVE any element on your page with id="largerfont".

    I assume that what you meant to code was $('#switchfont').text('Smaller Font')

    Whoops! I do see another problem! You are *NOT* doing return false from you onclick's, so the browser is then actually going to the <a>'s href value.

    This is just one reason I would use <input type="button"> or <button> instead of <a> for this purpose.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    New Coder
    Join Date
    Jul 2006
    Posts
    67
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Ah yes! This has fixed the issue of #3. I agree with using button - one should not style anchor tags to look like buttons or make them function like buttons, since that is why we have buttons!

    So here is my new code:
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <script src="jquery-1.9.1.min.js"></script>
    <script src="jquery.cookie.js"></script>
    
    <script>
    
    
        $(document).ready(function(){
    	
            // Check (onLoad) if the cookie is there and set the class if it is
            if ($.cookie('highcontrast') == "yes") {
                $("body").addClass("highcontrast");
            }
    
            // When the button is clicked
            $("#switch").click(function () {
                // Check the current cookie value
                // If the cookie is empty or set to no, then add highcontrast
                if ($.cookie('highcontrast') == "undefined" || $.cookie('highcontrast') == "no") {
                    // Set cookie value to yes
                    $.cookie('highcontrast','yes', {expires: 7, path: '/'});
                    // Add the class to the body
                    $("body").addClass("highcontrast");
                }
                // If the cookie was already set to yes then remove it
                else {
                    $.cookie('highcontrast','no',  {expires: 7, path: '/'});
                    $("body").removeClass("highcontrast");
                }
            }); 
    		
    
            if ($.cookie('largerfont') == "yes") {
                $("body").addClass("largerfont");
            }
    
            // When the button is clicked
            $("#switchfont").click(function () {
                // Check the current cookie value
                // If the cookie is empty or set to no, then add largerfont
                if ($.cookie('largerfont') == "undefined" || $.cookie('largerfont') == "no") {
                    // Set cookie value to yes
                    $.cookie('largerfont','yes', {expires: 7, path: '/'});
                    // Add the class to the body
                    $("body").addClass("largerfont");
    				$('#switchfont').text('Smaller Font')
    				
                }
                // If the cookie was already set to yes then remove it
                else {
                    $.cookie('largerfont','no',  {expires: 7, path: '/'});
                    $("body").removeClass("largerfont");
    				$('#switchfont').text('Larger Font')
                }
            }); 			
    	
    		
    		
    		
        });
    
    
    </script>
    
    
    
    <style>
    
        body {
            width:100%;
            height:100%;
        }
        body.highcontrast {
            background-color:#000;
            color:#fff;
        }
    
        body.largerfont {
            font-size: 300%;
        }
    
    </style>
    
    </head>
    
    <body>
    
    <button id="switch">Switch Contrast</button>
    
    <button id="switchfont">Larger Font</button>
    
    </body>
    </html>
    It still doesn't work in Chrome, which is odd because I do not get any errors or warnings in the developer tools ..

    Any idea on how to "fix" 1, 2, and 4? Although if this does not work in Chrome it is pointless to use it ..

    Am I "allowed" to have more than one cookie on a page/site at the same time? It does work in FF and IE, but just because it works does not always mean it is correct ..

  • #11
    New Coder
    Join Date
    Jul 2006
    Posts
    67
    Thanks
    7
    Thanked 0 Times in 0 Posts
    When i say it does not work in Chrome, i mean the contrast does not change and the font size does not change .... it is odd since they both work in FF and IE and I get no errors ....

  • #12
    New Coder
    Join Date
    Jul 2006
    Posts
    67
    Thanks
    7
    Thanked 0 Times in 0 Posts
    I think the Chrome/cookie issue may be because I am developing this page locally. I will upload to a server tomorrow and see if that works.

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,574
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    Can you possibly show this as a live page? Give us a URL?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #14
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,451
    Thanks
    17
    Thanked 275 Times in 275 Posts
    This is a very basic page I made using the 'change the href' method and it works fine in FF, Opera and Google Chrome. I haven't added any cookie yet. The css files are named New0.css, New1.css and New2.css. It should be much easier to write code around.
    Code:
    <!DOCTYPE html>
    <head>
    <title>Style Switcher</title>
    <meta content="text/html; charset=utf-8" http-equiv="content-type">
    <link id="mystyle" rel="stylesheet" type="text/css">
    <style type="text/css">
    #sticky
    {
    left:0;
    position:relative;
    border:1px solid black;
    width:60px;
    font-size:20px;
    }
    </style>
    <body>
    <div id="container">
    <ol id="sticky">
    <li class="picker" onclick="chStyle(0);">Style</li>
    <li class="picker" onclick="chStyle(1);">Style</li>
    <li class="picker" onclick="chStyle(2);">Style</li>
    </ol>
    
    <h3>Lorem ipsum dolor sit amet</h3>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
     Pellentesque congue gravida magna, in accumsan velit aliquam nec.
     Suspendisse condimentum auctor quam nec venenatis.
     Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
     Phasellus feugiat consectetur vulputate.
     In hac habitasse platea dictumst.
     Vestibulum vestibulum tincidunt laoreet.
     Cras tincidunt, tortor at pellentesque aliquet, dui nibh lacinia magna, lacinia pulvinar libero risus nec felis.
     Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    </div>
    <script type="text/javascript">
    function chStyle(T)
    {
    document.getElementById("mystyle").href="New"+T+".css";
    }
    chStyle(0);
    </script>
    </body>
    </html>
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • Users who have thanked DrDOS for this post:

    spacepoet (09-17-2013)

  • #15
    New Coder
    Join Date
    Jul 2006
    Posts
    67
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Hi:

    @DrDOS: Thanks for posting that code. I will be sure to look at it.

    @Old Pedant: This is the "live" switcher:

    http://www.promotionalproductsaction...-contrast.html

    It now works in Chrome - the issue seems to be that I was doing this on my local machine and Chrome apparently does not support local cookies.

    Overall, it is pretty good but it's the few quirks I listed that I am trying to debug.

    Any ideas?

    Thanks to you all for the help!


  •  
    Page 1 of 3 123 LastLast

    Posting Permissions

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