How to save custom options with cookies

[Mazinger]

Say, I have implemented a JS code into my forum that allows the user to expand/reduce the forum divider width; it works in the currently page, but when moving to any other page, the browser forgets about the selected options.

I want the browser to remember it and deliver it every time with cookies.

Does any one know how to do that?

Thanks in advance.

--------------- Added [DATE]1241339504[/DATE] at [TIME]1241339504[/TIME] ---------------

For example, this JS code. It doesn't save choices with cookies with my 3.7.4 forum:

function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
    var nameEQ = 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 eraseCookie(name) {
    createCookie(name,"",-1);
}



function getElementsByClassName(className, tag, elm){
    var testClass = new RegExp("(^|\\\\s)" + className + "(\\\\s|$)");
    var tag = tag || "*";
    var elm = elm || document;
    var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
    var returnElements = [];
    var current;
    var length = elements.length;
    for(var i=0; i<length; i++){
        current = elements[i];
        if(testClass.test(current.className)){
            returnElements.push(current);
        }
    }
    return returnElements;
}



//*** This code is copyright 2003 by Gavin Kistner, gavin@refinery.com
//*** It is covered under the license viewable at http://phrogz.net/JS/_ReuseLicense.txt
//*** Reuse or modification is free provided you abide by the terms of that license.
//*** (Including the first two lines above in your source code satisfies the conditions.)


//***Cross browser attach event function. For 'evt' pass a string value with the leading "on" omitted
//***e.g. AttachEvent(window,'load',MyFunctionNameWithoutParenthesis,false);

function AttachEvent(obj,evt,fnc,useCapture){
    if (!useCapture) useCapture=false;
    if (obj.addEventListener){
        obj.addEventListener(evt,fnc,useCapture);
        return true;
    } else if (obj.attachEvent) return obj.attachEvent("on"+evt,fnc);
    else{
        MyAttachEvent(obj,evt,fnc);
        obj['on'+evt]=function(){ MyFireEvent(obj,evt) };
    }
} 

//The following are for browsers like NS4 or IE5Mac which don't support either
//attachEvent or addEventListener
function MyAttachEvent(obj,evt,fnc){
    if (!obj.myEvents) obj.myEvents={};
    if (!obj.myEvents[evt]) obj.myEvents[evt]=[];
    var evts = obj.myEvents[evt];
    evts[evts.length]=fnc;
}
function MyFireEvent(obj,evt){
    if (!obj || !obj.myEvents || !obj.myEvents[evt]) return;
    var evts = obj.myEvents[evt];
    for (var i=0,len=evts.length;i<len;i++) evts[i]();
}

AttachEvent(window,'load',loadPageState,false);

function loadPageState()
{
    // inject search here text + assign listener to remove it
    var searchInput = document.getElementById('searchquery');
    if(searchInput != null)
    {
        searchInput.value = "Search here";
        AttachEvent(searchInput,'click',removeSearchText,false);
    }    
    
    if(readCookie('fluid') == null)
    {
        createCookie('fluid',0,9999);    
    }
    
    if(readCookie('podmenu') == null)
    {
        createCookie('podmenu',0,9999);    
    }
    
    var fluid = readCookie('fluid');
    var podmenu = readCookie('podmenu');
    
    /*if(fluid != null && podmenu != null)
    {
        var ourBody = document.body;
        if(fluid == 0 && podmenu == 1)
        {
            ourBody.setAttribute('class', 'max-fixed');
        }
        else if(fluid == 1 && podmenu == 0)
        {
            ourBody.setAttribute('class', 'fluid-hidden');
        }
        else if(fluid == 1 && podmenu == 1)
        {
            ourBody.setAttribute('class', 'fluid-visible');
        }
        else
        {
            ourBody.setAttribute('class', 'min-fixed');
        }            
    }*/
    
    // assign our listeners to the controls
    var ffControl = document.getElementById('layout-toggle');
    if(ffControl != null)
    {
        AttachEvent(ffControl,'click',toggleFF,false);    
    }
    
    var pmControl = document.getElementById('content-toggle');    
    if(ffControl != null)
    {
        AttachEvent(pmControl,'click',togglePM,false);    
    }
    
    // assign hover event handlers
    var hovers = getElementsByClassName("hover", "table", document);
    for(var i = 0; i < hovers.length; i++)
    {
        hovers[i].onmouseover = doHover1;
        hovers[i].onmouseout = doHover2;
    }
}

function doHover1()
{
    //this.className = 'hover2';
}

function doHover2()
{
    //this.className = 'hover';
}

function removeSearchText()
{
    var searchInput = document.getElementById('searchquery');
    if(searchInput != null)
    {
        if(searchInput.value == 'Search here')
        {
            searchInput.value = "";
        }
    }
    //searchInput.class =     
}

function toggleFF()
{
    var fluid = readCookie('fluid');
    var podmenu = readCookie('podmenu');
    var ourBody = document.getElementById("resizer");
    
    
    if(fluid != null && podmenu != null && ourBody != null)
    {
        if(fluid == 1)
        {
            createCookie('fluid', 0, 9999);
            if(podmenu == 1)
            {
                ourBody.setAttribute('class', 'max-fixed');
                ourBody.className = 'max-fixed';
            }
            else
            {
                ourBody.setAttribute('class', 'min-fixed');
                ourBody.className = 'min-fixed';
            }
            
        }
        else
        {
            createCookie('fluid', 1, 9999);
            if(podmenu == 1)
            {
                ourBody.setAttribute('class', 'fluid-visible');
                ourBody.className = 'fluid-visible';
            }
            else
            {
                
                ourBody.setAttribute('class', 'fluid-hiden');
                ourBody.className = 'fluid-hidden';    
            }
        }
    }
    return false;
}

function togglePM()
{
    var fluid = readCookie('fluid');
    var podmenu = readCookie('podmenu');
    var ourBody = document.getElementById("resizer");

    if(fluid != null && podmenu != null && ourBody != null)
    {
        if(podmenu == 1)
        {
            createCookie('podmenu', 0, 9999);
            if(fluid == 1)
            {
                ourBody.setAttribute('class', 'fluid-hidden');
                ourBody.className = 'fluid-hidden';                
            }
            else
            {
                ourBody.setAttribute('class', 'min-fixed');
                ourBody.className = 'min-fixed';                    
            }
            
        }
        else
        {
            createCookie('podmenu', 1, 9999);
            if(fluid == 1)
            {
                ourBody.setAttribute('class', 'fluid-visible');
                ourBody.className = 'fluid-visible';
            }
            else
            {
                ourBody.setAttribute('class', 'max-fixed');
                ourBody.className = 'max-fixed';
            }
        }
    }
    return false;
}