[jQuery] Re: Not a plugin but code for anyone trying to have collapse-able menu with cookies

[Karl Swedberg]

No problem, Bhaarat! Glad you like it.
Actually, the way I set it up, mine was limited to 10 or fewer links.  
But we can increase that number by calling a function that returns,  
for example, a base-32 string instead of index:

function bigIndex(inival) {
  return (inival).toString(32);
}


The updated demo can be found, still, at 
http://test.learningjquery.com/cookie-menu.html

Good luck with your test page!

--Karl
_________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com



On Jan 29, 2008, at 4:08 PM, Bhaarat Sharma wrote:


Hi Karl,

Thanks a lot! your solution is obviously much better and not dependent
on how many links there are. since you are using 'each' function.

I had the concept with me but not the power of ins and outs of
jQuery :)

Next i'll be trying to make 
http://www.coldfusionjedi.com/demos/sharp/ajaxLoadOnScroll/test.cfm
in jQuery+jsp (not PHP for a change)

will keep you posted!

Thanks
-bhaarat

On Jan 29, 3:56 pm, Karl Swedberg <[EMAIL PROTECTED]> wrote:
Hi Bhaarat,

You've done a nice job here! I was wondering, though, if we could  
take
advantage of the index value of the links, so I re-factored your code
a bit (still using Klaus's cookie plugin). Here is what it looks  
like:

$(document).ready(function() {
   $('#menu li ul').hide();
   var cookieValue = $.cookie('menuCookie') || '';
   $('#menu > li > a').each(function(index) {
     var $this = $(this), $checkElement = $this.next('ul');
     if (cookieValue.indexOf(index) > -1) {
       $checkElement.show();
     }
     $this.click(function() {
       if ($checkElement.is(':hidden')) {
         $checkElement.slideDown();
         cookieValue = cookieValue + index;
         $.cookie('menuCookie', cookieValue);
       } else {
         $checkElement.slideUp();
         cookieValue = cookieValue.replace(index,'');
         $.cookie('menuCookie', cookieValue);
       }
       return false;
     });
   });

});

I put up a little demo page here:

http://test.learningjquery.com/cookie-menu.html

On the demo page, I also added a little function to show the value of
the cookie and called the function onready and onclick:

function showCookie() {
   if (!$('#jar').length) {
     $('<div id="jar"></div>').appendTo('body');
   }
   $('#jar').text(document.cookie);

}

Cheers,

--Karl
_________________
Karl Swedbergwww.englishrules.comwww.learningjquery.com

On Jan 29, 2008, at 1:41 PM, Bhaarat Sharma wrote:



Hi,

I took the code from jQuery Accordion menu and am using the cookie
plugin.

while searching for a collapse-able menu I saw that a lot of people
were looking for this but with cookies so when user refreshes..the
collapse/expand state stay the same.

I am new to jQuery and even javascript.

But here I have jotted down something which is working for me.

Experts out there: if you would like to add some suggestions on  
how to
better do this..i'd appreciate it.
I dont like the fact that i am different cookies for different menu
items...

   function initMenu() {
 $('#menu ul').hide();

if ($.cookie('the_cookie1')=='a'||$.cookie('the_cookie2')=='b'||
$.cookie('the_cookie3')=='c'||
       $.cookie('the_cookie4')=='d')
 {

     if ($.cookie('the_cookie1')=='a')
       $("a").filter(".a").next().slideDown('fast');
     if ($.cookie('the_cookie2')=='b')
       $("a").filter(".b").next().slideDown('fast');
     if ($.cookie('the_cookie3')=='c')
       $("a").filter(".c").next().slideDown('fast');
     if ($.cookie('the_cookie4')=='d')
       $("a").filter(".d").next().slideDown('fast');

 }

$('#menu li a').click(
function() {
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
   removeCookie($(this).attr('class'));
   checkElement.slideUp('fast');
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
setCookie($(this).attr('class'));
checkElement.slideDown('fast');
return false;
}
});

 /*$('#menu li a').click(
   function() {
   setCookie($(this).attr('class'));
       $(this).next().slideToggle('normal');
     }
   );*/
 }
 function setCookie(some)
 {
 var s = some;
 if (s=='a')
     $.cookie('the_cookie1', s);
 else if (s=='b')
     $.cookie('the_cookie2', s);
 else if (s=='c')
     $.cookie('the_cookie3', s);
 else if (s=='d')
     $.cookie('the_cookie4', s);

 //  alert('cookie set  ' + s);
 }
 function removeCookie(some1)
 {
     var s = some1;
     if (s=='a')
         $.cookie('the_cookie1',null);
     else if (s=='b')
         $.cookie('the_cookie2',null);
     else if (s=='c')
         $.cookie('the_cookie3',null);
     else if (s=='d')
         $.cookie('the_cookie4',null);
 }

 $(document).ready(function() {initMenu();});