[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
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
Medium Priority
?
717 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Many old projects have bad code, but the budget doesn't exist to rewrite the codebase. You can update this code to be safer by introducing contemporary input validation, sanitation, and safer database queries.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Suggested Courses

650 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