Collapsible categories with persistent cookie

  -----  
Author Message

Superman
Member
Wed Jan 02, 2008 8:37 pm   Post subject: Collapsible categories with persistent cookie
Hi Jeremy.

I'm making Macinscott 3 for phpBB3 and I want to have collapsible/expandable categories on the index like vBulletin. Problem is, I dont know much at all about javascript and I cant seem to get any help making the cookie persistent. Every time I try, it either doesnt work or busts the code and no longer collapses. I posted this question on several coding forums and no one seems to care to help. Laughing

I thought you could. Here is the script in my head content:

Code:

    <script language="javascript">
    function init()
    {
        var cookie = getCookie('collapse_obj');
        if(cookie)
        {
            var values = cookie.split(',');

            for(var i = 0; i < values.length; i++)
            {
                var itm = getItem(values[i]);

                if(itm)
                    itm.style.display = 'none';
            }
        }
    }

    function makeCookie(name, value)
    {
        var cookie = name + '=' + escape(value) + ';';
        document.cookie = cookie;
    }

    function getCookie(name)
    {
        if(document.cookie == '')
            return false;

        var firstPos;
        var lastPos;
        var cookie = document.cookie;

        firstPos = cookie.indexOf(name);

        if(firstPos != -1)
        {
            firstPos += name.length + 1;
            lastPos = cookie.indexOf(';', firstPos);

            if(lastPos == -1)
                lastPos = cookie.length;

            return unescape(cookie.substring(firstPos, lastPos));
        }

        else
            return false;
    }

    function getItem(id)
    {
        var itm = false;
        if(document.getElementById)
            itm = document.getElementById(id);
        else if(document.all)
            itm = document.all[id];
        else if(document.layers)
            itm = document.layers[id];

        return itm;
    }

    function toggleItem(id)
    {
        itm = getItem(id);

        if(!itm)
            return false;

        if(itm.style.display == 'none')
            itm.style.display = '';
        else
            itm.style.display = 'none';

        ////////////////////

        cookie = getCookie('collapse_obj');
        values = new Array();
        newval = new Array();
        add    = 1;

        if(cookie)
        {
            values = cookie.split(',');

            for(var i = 0; i < values.length; i++)
            {
                if(values[i] == id)
                    add = 0;
                else
                    newval[newval.length] = values[i];
            }
        }

        if(add)
            newval[newval.length] = id;

        makeCookie('collapse_obj', newval.join(','));

        return false;
    }
    </script>


and in the forum_list_body.html:

Code:

<div class="tbltopleft"><div class="tbltopright2"><a href="#" onclick="toggleItem({forumrow.FORUM_ID})"><img style="float:right;cursor:pointer;" src="./styles/Macinscott_3/theme/images/tbl_hideshow.gif" /></a><div class="tbltop"><div class="tbltitle"><a href="{forumrow.U_VIEWFORUM}" class="tbltitle"><img src="./styles/Macinscott_3/theme/images/tbl_folder.gif" />{forumrow.FORUM_NAME}</a></div></div></div></div>

<div id="{forumrow.FORUM_ID}">

    <table class="tablebg" cellspacing="1" width="100%">
    <!-- ELSE -->
    <table class="tablebg" cellspacing="1" width="100%">
      <!-- ENDIF -->


Link to my testing site:
http://realdealstubblefield.com/phpbb3_demo/index.php?style=7

Thanx. Smile
 

Thoul
Administrator
Mon Jan 07, 2008 1:08 am   Post subject: Re: Collapsible categories with persistent cookie
I'm not that great with cookies in Javascript. I've only used them once, and that was really by using a pre-made library called mootools.

But from what I understand about cookies in Javascript, if you don't specify an expiration time, the cookies will be session cookies and expire when the browser is closed.

I believe you would set a expiration date by editing this line in the makeCookie function:

Code:


        var cookie = name + '=' + escape(value) + ';';


You might use something like this, where 30 is the number of days the cookie will last.

Code:


var days = 30;
var date = new Date();
date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
exprvalue = 'expires=' + date.toGMTString();

var cookie = name + '=' + escape(value) + '; ' + exprvalue;
 

Superman
Member
Mon Jan 07, 2008 6:11 pm   Post subject: Re: Collapsible categories with persistent cookie
Yeah, I've tried several times to add an expiration time, but it usually busts the code.
 

Page 1 of 1
Display posts from previous: