Inplant cookies in Javascript font resizer.

Hi,
I have this script in javascript to let visitors resize the fonts on my website.
The problem with this script is that everytime a user goes to a new page the fonts are back on default.

Can someone help me out how to use cookies on the script so that the javascript will check if there is a cookie first before getting the default CSS value. And when a user changes a value, the cookie schould be updated or created I think.

I post the script below. I'd appreciate if anyone can help me out with this since I am not really a programmer, and I dont know where to start with it.
Thanks

// font changer

var min=8;
var max=18;
function increaseFontSize() {
   var p = document.getElementsByTagName('p');
   for(i=0;i<p.length;i++) {
      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {
         var s = 12;
      }
      if(s!=max) {
         s += 1;
      }
      p[i].style.fontSize = s+"px"
   }
}
function decreaseFontSize() {
   var p = document.getElementsByTagName('p');
   for(i=0;i<p.length;i++) {
      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {
         var s = 12;
      }
      if(s!=min) {
         s -= 1;
      }
      p[i].style.fontSize = s+"px"
   }   
}

Code (markup):

 

I suggest you too check this tutorial:
http://www.w3schools.com/JS/js_cookies.asp

 

here's my wrapper for working with cookies:

var Cookie = {
    // wrapper for working with cookies.
    set: function(c_name, value, options) {
        options = (typeof(options) === "undefined") ? {
            duration: null, // in days, if null, session only
            path: null // relative to domain, if null, default from URI
        } : options;

        if (options.duration !== null) {
            var exdate = new Date();
            exdate.setDate(exdate.getDate()+options.duration);
        }

        document.cookie=c_name+ "=" +escape(value)+ ((options.duration===null) ? "" : ";expires="+exdate.toGMTString()) + ((options.path===null) ? "" : ";path="+options.path);
    },
    get: function(c_name) {
        if (document.cookie.length > 0) {
            var c_start = document.cookie.indexOf(c_name + "=");
            if (c_start !== -1) {
                c_start = c_start + c_name.length+1;
                var c_end = document.cookie.indexOf(";",c_start);
                if (c_end === -1)
                    c_end = document.cookie.length;
                return unescape(document.cookie.substring(c_start,c_end));
            }
        }
        return false;
    },
    remove: function(c_name) {
        this.set(c_name, "", {duration: -1, path: "/"});
    }
}; // end Cookie wrapper

Code (javascript):

the problem you have is that you are not changing a global setting here, your script ups the font size individually on each <p> tag. this means if you have 6 tags, say

<p>12px</p>
<p>8px</p>
<p>12px</p>
<p>18px</p>
<p>12px</p>
<p>14px</p>

and you apply increase function, it will end up something like:

<p>13px</p>
<p>8px</p>
<p>13px</p>
<p>18px</p>
<p>13px</p>
<p>15px</p>

so what would you cookie? each individual p's setting? the only thing i can think of is the number of times increase or decrease has been applied.

in which case, something like this can be done:

var fontSizer = {
    min: 8,
    max: 18,
    default: 12,
    ps: [],
    cookieName: "fontSizer",
    initialize: function() {
        // read cookie first
        this.runs = Cookie.get(this.cookieName) || 0;

        this.ps = document.getElementsByTagName("p");
        this.psCount = this.ps.length;

        // if set, determine if positive or negative
        if (this.runs !== 0) {
            var counter = this.runs, _this = this;
            // has it been increased?
            if (this.runs > 0) {
                while (counter--)
                    setTimeout(function() {
                        _this.increaseFontSize(true);
                    }, 100);
            }
            else {
                // negative value, turn positive
                this.runs = Math.abs(this.runs);
                while (this.runs--)
                    setTimeout(function() {
                        _this.decreaseFontSize(true);
                    }, 100);
            }
        }


    },
    increaseFontSize: function(dontUseCookie) {
        // optional to not set a cookie when restoring setting.
        var i = this.psCount, hasChanged = false;

        while (i--) {
            if (this.ps[i].style.fontSize) {
                var s = parseInt(this.ps[i].style.fontSize, 10);
            } else {
                var s = this.default;
            }

            if (s < this.max) {
                s++;
                hasChanged = true;
            }

            this.ps[i].style.fontSize = s+"px";
        }

        if (!hasChanged)
            return; // nothing to do.

        this.runs++;

        // store the number of increases in a Cookie
        if (!dontUseCookie)
            Cookie.set(this.cookieName, this.runs);
    },
    decreaseFontSize: function(dontUseCookie) {
        // optional to not set a cookie when restoring setting.
        var i = this.psCount, hasChanged = false;

        while (i--) {
            if (this.ps[i].style.fontSize) {
                var s = parseInt(this.ps[i].style.fontSize, 10);
            } else {
                var s = this.default;
            }

            if (s > this.min) {
                s--;
                hasChanged = true;
            }

            this.ps[i].style.fontSize = s+"px";
        }

        if (!hasChanged)
            return; // nothing to do.

        this.runs--;

        // store the number of increases in a Cookie
        if (!dontUseCookie)
            Cookie.set(this.cookieName, this.runs);
    }
};


window.onload = function() {
    fontSizer.initialize();

    document.getElementById("increase").onclick = function(e) {
        fontSizer.increaseFontSize();
        return false;
    };

    document.getElementById("decrease").onclick = function(e) {
        fontSizer.decreaseFontSize();
        return false;
    };
};

Code (javascript):

see it working here: http://fragged.org/dev/fontSizer.html

it should remember your last setting over a page load.

 

Sorrt for my late reaction.
My problem was indeed that I didnt know how to do it with this particular script. I already read the tutorials for cookies.

Thanks a lot Dimitar. I didnt expected that someone would help me like this.
It's fantastic!

Thanks again, and cheers