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
648 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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Part of the Global Positioning System A geocode (https://developers.google.com/maps/documentation/geocoding/) is the major subset of a GPS coordinate (http://en.wikipedia.org/wiki/Global_Positioning_System), the other parts being the altitude and t…
These days socially coordinated efforts have turned into a critical requirement for enterprises.
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

758 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

13 Experts available now in Live!

Get 1:1 Help Now