Solution for aspectratio

Hugely simplified. Requires the jquery.cookie.js plugin:- https://github.com/carhartl/jquery-cookie . Also available via nuget -------------- In answer to:- https://forum.jquery.com/topic/preserving-links-and-creating-default-state-with-cookies

by alano

HTML

<script src="https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js"></script>
<ul>
    <li id="default" class="small"><a href="#">A</a></li>
    <li class="medium"><a href="#">A</a></li>
    <li class="large"><a href="#">A</a></li>
</ul>
<div id="wrapper">
    <article id="test">
        <p>Test text, to view the selected font size.</p>
        <button onclick="clearCookie()">Clear cookie</button>
    </article>
</div>

CSS

body {    
    text-align: left;    
    font-family: "Century Gothic", Verdana, Geneva, sans-serif;    
    font-size: 62.5%;    
    color: #424242;    
    line-height: 2.3em;    
    background-repeat: repeat-y;    
    background-position: center top;    
    background-color: #F2F2F2;
}
p { font-size: 1.5em; }
#wrapper {    
    position: relative;    
    padding-top: 50px;
}
#wrapper, .mainContent { width: 800px; }
button { margin-top: 25px; }
ul { 
    position: absolute;    
    right: 40px; 
    top: 20px;    
    z-index: 1;
}
ul, ul li {    
    list-style: none;    
    margin: 0;    
    padding: 0;    
    float: left; 
}
ul li a {    
    float: left;    
    clear: right;    
    margin-left: 10px;    
    text-decoration: none;    
    font-family: "Gill Sans MT", "Century Gothic";    
    font-weight: bold;    
    color: #FEFEFE;    
    padding: 1px 6px 2px 6px;    
    background-color: #C0C0C0;    
    line-height: normal;    
    border-radius: 13px;    
    -moz-border-radius: 13px;   
    -webkit-border-radius: 13px;   
    -moz-box-shadow: 1px 1px 2px #888;   
    -webkit-box-shadow: 1px 1px 2px #888;    
    box-shadow: 1px 1px 2px #888;
}
ul li a:hover {
    background-color: #006795;    
    -moz-box-shadow: none;    
    -webkit-box-shadow: none;    
    box-shadow: none;
}
ul li a.activeLink { background-color: #930000; }

/*SETS THE SIZE OF THE TEXT ON THE CLICKABLE TABS/LINKS TO SHOW THEUSER THE SEQUENTIAL SIZE DIFFERENCES. ====================================*/
ul li.normal a { font-size: 13px; }
ul li.medium a { font-size: 15px; }
ul li.large a { font-size: 17px; }
/*ADJUSTS THE FONT SIZE WHEN CORRESPONDING BUTTONS CLICKED ON PAGE.====================================*/
#test.normal { font-size: 12px; }
#test.medium { font-size: 14px; }
#test.large { font-size: 16px; }

JavaScript

//requires the jquery.cookie.js plugin

$(document).ready(function() {
    setIndicators();
    $('ul li a').click(function() {  //when an indicator clicked
        $('ul li a, #test').removeClass(); //clear all indicators
        var activeClass = $(this).parent().attr('class');
        $(this).addClass('activeLink');  //set clicked indicator
        $('#test').attr('class', activeClass);  //set test text size
        $.cookie('activeSizeClass', activeClass, { expires: 10000 });
    });
});

function setIndicators() {
    var activeClass = $.cookie('activeSizeClass');
    $('ul li a').removeClass(); //start off by clearing all indicators
    if (activeClass) {  //if cookie set: find parent class + set child
        $('ul li.' + activeClass).children('a').addClass('activeLink');
    } else {   //if no cookie, find default parent and set its child
        $('#default').children('a').addClass('activeLink');
    }
    $('#test').attr('class', activeClass);  //set test text size
}

function clearCookie() {
    $.removeCookie('activeSizeClass');
    setIndicators();
}