Dinesh Patil Dinesh Patil - 6 months ago 14
Javascript Question

How to set session variable in jquery/css?

jQuery(document).ready(function($){
$("#a2").click(function(){
$('body').css("cssText","font-size: 107% !important");
});
});

jQuery(document).ready(function($){
$("#a3").click(function(){
$('body').css("cssText","font-size: 114% !important");
});
});

jQuery(document).ready(function($){
$("#a4").click(function(){
$('body').css("cssText","font-size: 121% !important");
});
});


I have given a2, a3, a4 ids to A, A+, A++ buttons. Whenever visitor of my site will click on any one of these buttons, font-size of whole site will change accordingly. Right now font-size is changing but when I refresh the page, again it is showing the default font-size. How can I do that? do I need to use session? and how I can use it in css or jquery ? I am new in website development. So please help me.

Answer

following code i have written and it is working perfectly. I am sharing it so that other can refer it.

jQuery(document).ready(function($){
    var fontCookie = get_cookie('fontclass');
    if(fontCookie) {
        jQuery('body').addClass(fontCookie);
    }
    $("#a2").click(function(){
        jQuery('body').removeClass('body-18');
        jQuery('body').addClass('body-16');
        var now = new Date();
            var time = now.getTime();
            time += 3600 * 1000 * 700;
            now.setTime(time);
            document.cookie = 
            'fontclass=body-16' + 
            '; expires=' + now.toGMTString() + 
            '; path=/';
        event.preventDefault();
    });
});

like this I have added function for a1 and a3 also in which I am adding and removing css classes as per my requirement.

Comments