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;
}

[Mazinger]

Any body here experienced with JS and knows how vBulletin handle cookies?

Please, it's urgent.

[Lynne]

Have you looked at the API? vBulletin API

[Mazinger]

I'm sure I'll sink if I looked at this again.

It seems that the JS code I posted does already have a cookie script into it, it doesn't work for a reason though.

[Lea Verou]

Is the problem that the cookie is not saved correctly or that it's not read correctly? Check your cookies to find out. It would help us go through less code if we know the exact problem.
By the way, most of these functions are already present in vBulletin's JS code or the YUI modules it uses. I'd suggest you take a look, duplicating functionality is not good, since your users download more stuff = higher waiting time for the page to load.

[RLShare]

If you are attatching your function to the window.onload event in your head or a file included in the head then it is more then likely getting replaced by the opening body tag of the page in VB.

[Mazinger]

Thanks everybody, I've already handled this issue with an alternate JS code I got from somewhere.

I appreciate your help though.