CODEWITHSUNDEEP
javascriptjqueryhtmlcsscookies
John Doe
John Doe

Reputation: 319

Set two values in one cookie

I change the contrast on my site by clicking one of the two "a" links and change font-size by clicking one of the three "a" links. I change the contrast by adding/removing a new class to/from the body.

Question: How to set present contrast and font-size in one cookie ? I want to also save changes when user change subsite... I'm using jquery-1.2.3...

HTML:

<div id="contrast">
<ul>
   <li><a href="#" id="first_contrast" class="con1">a</a></li>
   <li><a href="#" id="second_contrast" class="con2">b</a></li> 
</ul>        
</div>

<div id="font">
<ul>
<li><a href="#" id="one" class="fon1">c</a></li>
<li><a href="#" id="two" class="fon2">d</a></li>
<li><a href="#" id="three" class="fon3">e</a></li>  
</ul>        
</div>

jQuery

$(document).ready(function(){
if($.cookie('f')) {
    $('body').css('font-size', $.cookie('f')); 
}
if($.cookie('t')) {
    $('body').addClass($.cookie('t')); 
}
$('#one').click(function(){
    $('body').css('font-size', '60%');
    $.cookie('f','60%', { path: '/', expires: 10000 });
});
$('#two').click(function(){
    $('body').css('font-size', '72.5%');
    $.cookie('f','72.5%', { path: '/', expires: 10000 });
});
$('#three').click(function(){
    $('body').css('font-size', '85%');
    $.cookie('f','85%', { path: '/', expires: 10000 });
});
$('#first_contrast').click(function(){
    $('body').removeClass('highcon');
    $.cookie('t','main', { path: '/', expires: 10000 });
});
$('#second_contrast').click(function(){
    $('body').addClass('highcon');
    $.cookie('t','highcon', { path: '/', expires: 10000 });     
});
});

Upvotes: 1

Views: 474

Answers (1)

Denys Konoplin
Denys Konoplin

Reputation: 362

I think, next code is much more universal than to add separate event to each button.

Your Html should be like this:

<button data-size="80%" class="font-size">Font-size 80%</button>
<button data-contrast="bright" class="contrast">Contrast bright</button>
<button data-size="90%" class="font-size">Font-size 90%</button>
<button data-contrast="low" class="contrast">Contrast low</button>

Javascript code: 

 // check for existing cookie on page load
 setCookieString();

    $('.font-size').on('click', function(){
        var fontSize = $(this).data('size');

        $('body').css('font-size', fontSize);
        setCookieString(fontSize);

    });

    $('.contrast').on('click', function(){
        var contrastLevel = $(this).data('contrast');

        $('body').addClass(contrastLevel);
        setCookieString(contrastLevel, 1);
    });

    function setCookieString(newVal, valueNumInCookie) {
        var cookie = $.cookie('siteSettings') || '';
        var cookieArr = cookie.split(';');

        // if there is no arguments then we need to get values from existing cookie.
        // Otherwise need to set new values
        if(!arguments.length) {
            $('body').css('font-size', cookieArr[0]);
            $('body').addClass(cookieArr[1]);
        }
        else {
            cookieArr[valueNumInCookie || 0] = newVal;

            $.cookie('siteSettings', cookieArr.join(';'), { path: '/', expires: 10000});
        }
    }

Upvotes: 2

Related Questions