Mike Tew
asked on
My expandable / collapsable menu cookie for unique id is not working when I click a link on my site.
I'm using the jquery cookie plugin from github - github.com/carhartl/jquery -cookie
I have a jquery menu that grabs a unique id from the open / close buttons. When refresh after clicking any one of these, the cookie triggers the show / hide as I left it. However, when I hit a link (within the page), it either completely ignores the cookie setting and/or executes the show /hides from the previous refresh.
The cookie is being triggered in the if(_slider.length). Then the jquery for the menu is checking a.open-close, a.open-close-inner, a.open-close-inners & a.opener ids against the assigned cookie. If the cookie = 'hidden', the _activeClass is removed and the parent enclosing block remains collapsed.
I have a jquery menu that grabs a unique id from the open / close buttons. When refresh after clicking any one of these, the cookie triggers the show / hide as I left it. However, when I hit a link (within the page), it either completely ignores the cookie setting and/or executes the show /hides from the previous refresh.
The cookie is being triggered in the if(_slider.length). Then the jquery for the menu is checking a.open-close, a.open-close-inner, a.open-close-inners & a.opener ids against the assigned cookie. If the cookie = 'hidden', the _activeClass is removed and the parent enclosing block remains collapsed.
jQuery(function(){
clearInputs();
initTabs();
initOpenClose();
});
// clear inputs
function clearInputs(){
jQuery('input:text, input:password, textarea').each(function(){
var _el = jQuery(this);
var _val = _el.val();
_el.bind('focus', function(){
if(this.value == _val) this.value = '';
}).bind('blur', function(){
if(this.value == '') this.value = _val;
});
});
};
// init tabs
function initTabs() {
jQuery('ul.tabset').each(function(){
var _list = jQuery(this);
var _links = _list.find('a.tab');
_links.each(function() {
var _link = jQuery(this);
var _href = _link.attr('href');
var _tab = jQuery(_href);
if(_link.hasClass('active')) _tab.show();
else _tab.hide();
_link.click(function(){
_links.filter('.active').each(function(){
jQuery(jQuery(this).removeClass('active').attr('href')).hide();
});
_link.addClass('active');
_tab.show();
return false;
});
});
});
}
// init open close
function initOpenClose(){
// 4 level
jQuery('div.block-inners > ul > li').OpenClose({
opener: '.opener',
slider: '> div.block-slide'
});
// 3 level
jQuery('div.slide-block-inner').OpenClose({
opener: '.open-close-inners',
slider: '> div.block-inners'
});
// 2 level
jQuery('div.slide-block-inner').OpenClose({
opener: '.open-close-inner',
slider: '> div.slide'
});
// 1 level
jQuery('div.slide-block').OpenClose({
opener: '.open-close',
slider: '> div.block'
});
}
// open-close plugin
jQuery.fn.OpenClose = function(_options){
// default options
var _options = jQuery.extend({
activeClass:'active',
opener:'.opener',
slider:'.slide',
slideSpeed: 400,
animStart:false,
animEnd:false,
event:'click',
text: true,
openText: '+',
closeText: '-'
},_options);
return this.each(function(){
// options
var _holder = jQuery(this);
var _slideSpeed = _options.slideSpeed;
var _text = _options.text;
var _openText = _options.openText;
var _closeText = _options.closeText;
var _activeClass = _options.activeClass;
var _opener = jQuery(_options.opener, _holder);
var _slider = jQuery(_options.slider, _holder);
var _animStart = _options.animStart;
var _animEnd = _options.animEnd;
var _event = _options.event;
$('a.open-close').each(function() {
var menuContent = $.cookie($(this).attr('id'));
if (menuContent == "hidden") {
$(this).html(_openText);
$(this).parent().parent(".slide-block").removeClass(_activeClass);
}
});
$('a.open-close-inner').each(function() {
var menuContent = $.cookie($(this).attr('id'));
if (menuContent == "hidden") {
$(this).html(_openText);
$(this).parent().parent(".slide-block-inner").removeClass(_activeClass);
}
});
$('a.open-close-inners').each(function() {
var menuContent = $.cookie($(this).attr('id'));
if (menuContent == "hidden") {
$(this).html(_openText);
$(this).parent().parent(".slide-block-inner").removeClass(_activeClass);
}
});
$('a.opener').each(function() {
var menuContent = $.cookie($(this).attr('id'));
if (menuContent == "hidden") {
$(this).html(_openText);
$(this).parent().parent("li").removeClass(_activeClass);
}
});
if(_slider.length) {
_opener.bind(_event,function(){
if(!_slider.is(':animated')) {
if(typeof _animStart === 'function') _animStart();
if(_holder.hasClass(_activeClass)) {
_slider.slideUp(_slideSpeed,function(){
if(typeof _animEnd === 'function') _animEnd();
});
_holder.removeClass(_activeClass);
//var _holder.attr('id'),
$.cookie($(this).attr('id'), 'hidden');
if (_text) $(this).html(_openText)
} else {
_holder.addClass(_activeClass);
$.cookie($(this).attr('id'), 'visible');
if (_text) $(this).html(_closeText);
_slider.slideDown(_slideSpeed,function(){
if(typeof _animEnd === 'function') _animEnd();
});
}
}
return false;
});
if(_holder.hasClass(_activeClass)) _slider.show();
else _slider.hide();
}
});
}
Can i see a copy of your source code where you are calling the jquery functions? Either here or a link to your web server would work.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
The solution is direct from my javascript customization, and explains how to simplify code so the jquery cookie script is triggered correctly.