Solved

My expandable / collapsable menu cookie for unique id is not working when I click a link on my site.

Posted on 2011-02-22
4
654 Views
Last Modified: 2012-05-11
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.
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();
		}
	});
}

Open in new window

0
Comment
Question by:m2ew
  • 3
4 Comments
 
LVL 3

Expert Comment

by:wwwdeveloper2
ID: 34957480
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.

0
 

Assisted Solution

by:m2ew
m2ew earned 0 total points
ID: 34961773
Before I pass up the url, I was doing some research and it turns out there has been some issues with chrome triggering cookie events with this jquery script.

I moved the check for the cookie outside of the menu options and manually added the classes there. Also, once I assigned the path: "/" then it was responding much better. No issues in firefox or safari, but chrome is a little buggy.
0
 

Accepted Solution

by:
m2ew earned 0 total points
ID: 34962045
In addition to the previous revision, I simplified the check script done to one jquery .each function
Each level of the menu has a unique wrapper, so I just added an additional class to all the collapse expand button (.wwp-menu-select). Once that was done, the simplified check looks at the wrapper div else the wrapper li for the "active" class. This is working in FF // Chrome // Safari // IE

jQuery('.wwp-menu-select').each(function() {
                    var menuContent = jQuery.cookie(jQuery(this).attr('id'));
              if (menuContent == "hidden") {  
                            jQuery(this).html("+");
                            if(jQuery(this).parent().parent("div").hasClass("active")) {
                        jQuery(this).parent().parent("div").removeClass("active");  
                  }else if (jQuery(this).parent().parent("li").hasClass("active")){
                        jQuery(this).parent().parent("li").removeClass("active");
                  }
              }
      });
jQuery(function(){
	clearInputs();
	initTabs();
	initOpenClose();
});

 
// clear inputs & trigger cookie show hide for menu
function clearInputs(){
	jQuery('.wwp-menu-select').each(function() { 
			  var menuContent = jQuery.cookie(jQuery(this).attr('id')); 
              if (menuContent == "hidden") {  
  				  jQuery(this).html("+");
  				  if(jQuery(this).parent().parent("div").hasClass("active")) {
                  	jQuery(this).parent().parent("div").removeClass("active");  
                  }else if (jQuery(this).parent().parent("li").hasClass("active")){
                  	jQuery(this).parent().parent("li").removeClass("active");
                  }
              } 
	});

	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-inners').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;

		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);
						$.cookie($(this).attr('id'), 'hidden', {path: "/", domain: "wwp.m2ew.com"});
						//alert($(this).attr('id'));
						
						if (_text) $(this).html(_openText)
					} else {
						_holder.addClass(_activeClass);
						
						if (_text) {
							$(this).html(_closeText);
							$.cookie($(this).attr('id'), 'visible', {path: "/", domain: "wwp.m2ew.com"});
						}
						_slider.slideDown(_slideSpeed,function(){
							if(typeof _animEnd === 'function') _animEnd();
						});
					}
				}
				return false;
			});
			if(_holder.hasClass(_activeClass)) {
			_slider.show();
			
			} else {
			_slider.hide();
			
			}
		}
	});
}

Open in new window

0
 

Author Closing Comment

by:m2ew
ID: 34995394
The solution is direct from my javascript customization, and explains how to simplify code so the jquery cookie script is triggered correctly.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

862 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

25 Experts available now in Live!

Get 1:1 Help Now