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 2 of 3 FirstFirst 123 LastLast
Results 16 to 30 of 32
  1. #16
    New Coder
    Join Date
    Jul 2006
    Posts
    60
    Thanks
    7
    Thanked 0 Times in 0 Posts
    What's really bugging me is that neither button works on first click - I am afraid people may think it is broken and not use it ..

  2. #17
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,774
    Thanks
    55
    Thanked 518 Times in 515 Posts
    on page load
    Code:
    $.cookie('highcontrast') == "undefined"
    returns false
    whereas
    Code:
    $.cookie('highcontrast') == undefined
    returns true

    that would seem to me to be the problem.
    you could even shorten it to
    Code:
    !$.cookie('highcontrast')

  3. #18
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    Quote Originally Posted by spacepoet View Post
    What's really bugging me is that neither button works on first click - I am afraid people may think it is broken and not use it ..
    This is because it depends on the cookie being there, which it isn't on the first click. It probably just needs an if statement which tells it what to do if the cookie isn't there. I haven't yet worked the cookie into the code I was using.
    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.

  4. #19
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Or even more definitive:

    Simply replace this:
    Code:
                if ($.cookie('highcontrast') == "undefined" || $.cookie('highcontrast') == "no") {
    with this
    Code:
                if ($.cookie('highcontrast') != "yes" ) {
    Why do you care if it was undefined or "no"? All you really care is that it was *NOT* "yes".
    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. #20
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    More completely:


    Code:
        <span id="contrast">Switch to high contrast</code>
    
    ...
        // Check (onLoad) if the cookie is there and set the class if it is
        if ($.cookie('highcontrast') == "yes") {
                $("body").addClass("highcontrast");
                $("#contrast").text("Switch to low contrast");
        }
        // When the span is clicked
        $("#contrast").click(function () {
            if ( $("#contrast").text() == "Switch to high contrast" )
            {
                $.cookie('highcontrast','yes',  {expires: 7, path: '/'});
                $("body").addClass("highcontrast");
                $("#contrast").text("Switch to low contrast" );
            } else {
                $.cookie('highcontrast','no',  {expires: 7, path: '/'});
                $("body").removeClass("highcontrast");
                $("#contrast").text("Switch to high contrast" );
            }
        });
    Why depend on the cookie value, at all (except when the page loads)? And why not make the <span> more informative in the process?

    And probably even better:
    Code:
        <span id="contrast">Switch to high contrast</code>
    
    ...
        // Check (onLoad) if the cookie is there and set the class if it is
        setContrast( $.cookie('highcontrast') == "yes" );
    
        // When the span is clicked
        $("#contrast").click(function () {
            setContrast( $("#contrast").text() == "Switch to high contrast" );
        });
    
        function setContrast( toHigh )
        {
            $.cookie('highcontrast', toHigh ? 'yes' : 'no',  {expires: 7, path: '/'});
            $("#contrast").text( toHigh ? "Switch to low contrast" : "Switch to high contrast" );
            $("body").removeClass("highcontrast");
            if ( toHigh ) { $("body").addClass("highcontrast"); }
        }
    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.

  6. #21
    New Coder
    Join Date
    Jul 2006
    Posts
    60
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Very nice!

    Yes, this is much smoother and I thank you all for the tips and ideas .. and code!

    This is really doing what I want it to do .. I still want to experiment with the multiple text size like small, medium, and large, but this is now a good tool to add to my sites.

    I like the more descriptive button titles - accessible links (and button text) are important for screenreaders.


    One question: is it "OK" to do what I did to make the text switcher work? In other words, I duplicated the code - I assume having multiple cookies like this is not a terrible idea, since I am only using cookies for this feature .. ??

    Thanks!

  7. #22
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    It would be possible to create a function that could set/change both cookies, by passing an argument to say which. But realistically, that's what the jQuery $.cookie is already doing for you. You'd only bother doing something like that if you were creating your own cookie library.

    Each site is allowed 4KB of cookies, per the standard. So you could probably have another 30 or 40 such cookies before you'd be worried about cookie size.

    p.s.: Are you the same spacepoet as from ASPMessageBoard? From many years there, in fact?
    Last edited by Old Pedant; 09-18-2013 at 08:17 PM.
    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.

  8. #23
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Completely untested and off the top of my head. Let's take a stab a font sizes.
    Code:
    <style>
    .fontsize_Small { ... }
    .fontsize_Medium { ... }
    .fontsize_Large { ... }
    .fontsize_Extra-Large { ... }
    </style>
    
    
    
        <span id="textsize">Small</code>
    
    ...
        // Check (onLoad) if the cookie is there; use default if not
        setTextsize( $.cookie('textsize') || 'Small', 0 );
    
        // When the span is clicked
        $("#textsize").click(function () {
            setTextsize( $("#textsize").text(), 1 );
        });
    
        var textSizes = ["Small","Medium","Large","Extra-Large"];
        function setTextsize( cursize, bump )
        {
            var newSize = textSizes[ ( textSizes.indexOf[cursize] + bump ) % textSizes.length ];
            $.cookie('textsize', newSize,  {expires: 7, path: '/'});
            $("#contrast").text( curSize );
            $("body").removeClass("fontsize_" + cursize);
            $("body").addClass("fontsize_" + newSize");
        }
    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.

  9. #24
    New Coder
    Join Date
    Jul 2006
    Posts
    60
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Lol ... yes .. same SP from ASP Messageboard! I believe you have a "B" and "W" in your name - in fact, I think you directed me to this board! I have been lucky to mainly be doing CSS work, but this switcher (JS still makes my head spin) plays into making the sites I do more accessible, which I think is a good approach ..

    I have it here:
    http://promotionalproductsaction.com...cher/TEST.html

    No noticeable JS errors, but it does not add the class to the body element.

    Regardless, I still can not understand how you write code like this off the top of your head. You definitely showed me solutions more than once.

    Thanks!



    PS - Note made on cookies - I seem to be in the clear!

  10. #25
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    An obvious typo:
    Code:
            $("body").addClass("fontsize_" + newSize");
    Kill the bogus "
    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.

  11. #26
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    But that wasn't all.

    The textsize code was still referring to $("#contrast").
    The initialization of the textSizes array must be first thing in the code.
    A couple of minor other hiccups.

    This works. I put in the colors to aid in debugging; turned out to be useless, but oh well.
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://promotionalproductsaction.com/AccessibiltySwitcher/jquery.cookie.js"></script>
    
    <style>
    
    .fontsize_Small { 
    	font-size: 100%; 
            background-color: yellow;
    }
    
    .fontsize_Medium { 
    	font-size: 200%; 
            background-color: orange;
    }
    
    .fontsize_Large { 
    	font-size: 300%; 
            background-color: lightgreen;
    }
    
    .fontsize_Extra-Large { 
    	font-size: 400%; 
            background-color: lightblue;
    }
    
    </style>
    
    </head>
    
    <body>
    
    <button id="textsize">Small</button>
    
    <script>	
        var textSizes = ["Small","Medium","Large","Extra-Large"];
    
        // Check (onLoad) if the cookie is there; use default if not
        setTextsize( $.cookie('textsize') || 'Small', 0 );
    
        // When the span is clicked
        $("#textsize").click(function () {
            setTextsize( $("#textsize").text(), 1 );
        });
    
        function setTextsize( cursize, bump )
        {
            var newSize = textSizes[ ( textSizes.indexOf(cursize) + bump ) % textSizes.length ];
            $.cookie('textsize', newSize,  {expires: 7, path: '/'});
            $("#textsize").text(newSize);
            $("body").removeClass("fontsize_" + cursize);
            $("body").addClass("fontsize_" + newSize);
        }
    	
    	
    </script>
    
    <p>This is the content .... This is the content .... This is the content .... This is the content .... </p>
    
    </body>
    </html>
    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.

  12. Users who have thanked Old Pedant for this post:

    spacepoet (09-20-2013)

  13. #27
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    I should mention that textSizes.indexOf( ) won't work in MSIE 7 (I think it does in 8).

    You can easily fix that by conditionally adding an indexOf to the Array prototype.

    Or you can hack it and just use a function, instead:
    Code:
    function arrayIndexOf( arr, val )
    {
        if ( arr.indexOf != null ) { return arr.indexOf(val); }
        for var ( i = 0; i < arr.length; ++i )
        {
            if ( arr[i] == val ) { return i; }
        }
        return null;
    }
    And then replace textSizes.indexOf(cursize) with arrayIndexOf(textSizes,cursize)

    Oh...and yep...BW. I knew I steered a few people here, but couldn't remember if you were one of them.
    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. #28
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Want to have fun?

    Change
    Code:
            $("body").removeClass("fontsize_" + cursize);
            $("body").addClass("fontsize_" + newSize);
    to
    Code:
            $("*").removeClass("fontsize_" + cursize);
            $("*").addClass("fontsize_" + newSize);
    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.

  15. #29
    New Coder
    Join Date
    Jul 2006
    Posts
    60
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Nice! Thank you! Yes, it is working just fine. This is just what I was trying to get to.

    I will have to tinker with it in IE, as it does not work in IE8 and down but I will see how the function you posted comes together.

    What is the "*" for? I would call that a universal selector - I assume this is another way to make certain the JQuery adds the CSS to all elements?

    I am working on an idea for keyboard shortcuts, so I will probably be posting for ideas and tips soon .. lol ..

    Thanks!


  16. #30
    New Coder
    Join Date
    Jul 2006
    Posts
    60
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Gettting this to work in IE8 and below ....

    Hi:

    I wanted to see how to make this work in IE8 and below ... I have your note about adding this function:
    Code:
    function arrayIndexOf( arr, val )
    {
        if ( arr.indexOf != null ) { return arr.indexOf(val); }
        for var ( i = 0; i < arr.length; ++i )
        {
            if ( arr[i] == val ) { return i; }
        }
        return null;
    }
    but I am not sure how to work it into my existing code:

    (dcd.scripts.js)
    Code:
    $(document).ready(function(){
    	
    	// Resizing of text
    	var textSizes = ["Small","Medium","Large","Largest"];
    
    	setTextsize( $.cookie('textSize') || 'Small', 0 );
    
    	$("#textSize").click(function () {
    		setTextsize( $("#textSize").text(), 1 );
    	});
    
    	function setTextsize( cursize, bump )
    	{
    		var newSize = textSizes[ ( textSizes.indexOf(cursize) + bump ) % textSizes.length ];
    		$.cookie('textSize', newSize,  {expires: 7, path: '/'});
    		$("#textSize").text(newSize);
    
    		//$("body").removeClass("fontsize-" + cursize);
    		//$("body").addClass("fontsize-" + newSize);
    		
    		$("*").removeClass("fontsize-" + cursize);
    		$("*").addClass("fontsize-" + newSize);
    
    	}
    
    // ------------------- o0o ------------------- //
    
    	// Contrast switcher
    	setContrast( $.cookie('high-contrast') == "yes" );
    
    	$("#contrast").click(function () {
    		setContrast( $("#contrast").text() == "Switch to high contrast" );
    	});
    
    	function setContrast( toHigh )
    	{
    		$.cookie('high-contrast', toHigh ? 'yes' : 'no',  {expires: 7, path: '/'});
    		$("#contrast").text( toHigh ? "Switch to low contrast" : "Switch to high contrast" );
    		$("body").removeClass("high-contrast");
    		if ( toHigh ) { $("body").addClass("high-contrast"); }
    	}
    
    
    });
    This is a link to the switcher and the text sizer:

    http://promotionalproductsaction.com.../template.html


    They both work well! It is cool to see this; I am now building a boilerplate and this is part of it.

    But, neither the switcher or the text sizer works in IE8 or below; I assume 'cause I need to add that function somehow?

    Can you help me out?

    Thanks!


 
Page 2 of 3 FirstFirst 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
  •