Cookie Troubles

[ziycon]

I am creating a cookie when a user clicks on a link and saving a value based on the link clicked, everytime the user goes to a different page i want the JS to check if the cookie already exists and use the value stored in it or if not to then create the cookie and save the selected value. The cookie can also change value based on the different links that the user clicks. Please find below what i have so far:

function font_size(size) 
{
    var checkCookie = getCookie('testcookie');
    if (checkCookie == null)
    {
        if(size=='small') {
            //document.body.style.fontSize = '10';
            setCookie('10');
        }
        else if (size=='normal')
            document.body.style.fontSize = '12';
        else
            document.body.style.fontSize = '14';
    }
}
function setCookie(size)
{
    var theDate = new Date();
    var oneYearLater = new Date( theDate.getTime() + 31536000000 );
    var expiryDate = oneYearLater.toGMTString();
    document.cookie = 'testcookie=test;expires='+expiryDate+';path=/';
}
function getCookie(cookie_name)
{
    var nameEQ = cookie_name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

[acoder]

In font_size(), you don't have a case where the cookie is set, and in setCookie, the cookie is always set to "test", not to the size parameter.

[ziycon]

Does this make more sense? Sorry about my lack of JS understanding, never really used it until a few months ago.

function font_size(size) 
{
    var checkCookie = getCookie('testcookie');
    if (checkCookie == null)
    {
        if(size=='small')
            setCookie('10');
        else if (size=='normal')
            setCookie('12');
        else
            setCookie('14');
    }
}
function setCookie(size)
{
    var theDate = new Date();
    var oneYearLater = new Date( theDate.getTime() + 31536000000 );
    var expiryDate = oneYearLater.toGMTString();
    document.cookie = 'testcookie='+size+';expires='+expiryDate+';path=/';
}
function getCookie(cookie_name)
{
    var nameEQ = cookie_name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
 
}

[acoder]

Now you're setting the cookie, but not making use of it. Set the font size to the checkCookie value if it's set, i.e. when it's not null.

[ziycon]

This is what I'm using now as I want the value in the cookie to be updated if the link on the site is clicked again, is this the correct way of doing it?

Now the one thing I've been unable to figure out it how to get the value from the cookie if the cookie exists and apply it to the site on load?

function font_size(size) 
{
    if(size=='small')
        setCookie('10');
    else if (size=='normal')
        setCookie('12');
    else
        setCookie('14');
}
function setCookie(size)
{
    var currentDate = new Date();
    var expiryLength = new Date(currentDate.getTime() + 31536000000);
    var expiryDate = expiryLength.toGMTString();
    document.cookie = 'testcookie='+size+';expires='+expiryDate+';path=/';
}

[acoder]

Call a checkCookie() function onload, e.g.

function checkCookie() {
    fontsize=getCookie('testcookie');
    if (fontsize!=null) {
        document.body.style.fontSize = fontsize + "px";
    }
}

[ziycon]

Thanks for that, got it all working fine now, heres my code for anyone in the future.

function font_size(size) {
    if(size=='small') {
        setCookie('10');
        document.body.style.fontSize = "10px";
    }
    else if (size=='normal') {
        setCookie('12');
        document.body.style.fontSize = "12px";
    }
    else {
        setCookie('14');
        document.body.style.fontSize = "14px";
    }
}
function setCookie(size) {
    var currentDate = new Date();
    var expiryLength = new Date(currentDate.getTime() + 31536000000);
    var expiryDate = expiryLength.toGMTString();
    document.cookie = 'testcookie='+size+';expires='+expiryDate+';path=/';
}
function getCookie(cookie_name) {
    var nameEQ = cookie_name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
 
}
function checkCookie() {
    fontsize = getCookie('testcookie');
        if (fontsize!=null) {
        document.body.style.fontSize = fontsize + "px";
    }
}

[acoder]

No problem, glad to help :)

[ziycon]

Quick question in relation to this, instead of hardcoding the font sizes like 10,12 and 14 can you just say if size is set to normal(12px) add 2px onto all font-sizes on the webpage or is it very difficult to do as there will be many different font sizes on the webpage?

[acoder]

You could do that, but you'd need to get all the separate elements with the different sizes and add 2px, e.g.:

document.body.style.fontSize = (parseInt(document.body.style.fontSize) + 2) + "px";