Since I’m carrying on a love affair with jQuery right now, I’m moving most of my customers to jQuery based plugins to simplify the JS code that I am currently using on their sites. One customer happens to make extensive use of the jQuery Jeditable plugin for dynamic/ajax based content updates. One issue I ran into with IE7 was that with the previous menu system, FSMenu, the Jeditable objects would overlap the menu making it unusable. I tried everything under the sun to make it work and finally just dropped FSMenu in favor up the awesome Superfish plugin.

Unfortunately, Superfish had the same problem with the Jeditable objects overlapping the menu system. I tried tweaking the z-index on both of these items with no luck. Firefox displays these properly so I needed to find a workaround for IE since most of the users are still using IE.

The solution turned out to be super simple. All of the fields I was using Jedtiable with had the class “editableNote” assigned to them so it was going to be easy to target just these items. I figured I would just hide them from view when the Superfish menu was activated and show them again when it was hidden. I didn’t want this to be the case in Firefox, just IE.

To make this change, open up your superfish.js file and look at the top where the superfish function is defined. Here is the full snippit of code that we are working with:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

var sf = $.fn.superfish,
	c = sf.c,
	$arrow = $(['<span class="',c.arrowClass,'"> &#187;</span>'].join('')),
	over = function(){
		var $$ = $(this), menu = getMenu($$);
		clearTimeout(menu.sfTimer);
		$$.showSuperfishUl().siblings().hideSuperfishUl();
	},
	out = function(){
		var $$ = $(this), menu = getMenu($$), o = sf.op;
		clearTimeout(menu.sfTimer);
		menu.sfTimer=setTimeout(function(){
			o.retainPath=($.inArray($$[0],o.$path)>-1);
			$$.hideSuperfishUl();
			if (o.$path.length && $$.parents(['li.',o.hoverClass].join('')).length&lt;1){over.call(o.$path);}
		},o.delay);	
	},
	getMenu = function($menu){
		var menu = $menu.parents(['ul.',c.menuClass,':first'].join(''))[0];
		sf.op = sf.o[menu.serial];
		return menu;
	},
	addArrow = function($a){ $a.addClass(c.anchorClass).append($arrow.clone()); };

What you will want to look for is the over (line 4) and out (line 9) sections of the above code snippit. Since we only want to target IE, we are going to include the following 2 commands to show and hide the Jeditable objects on the over and out events for the Superfish menu.

To hide it:

if ($.browser.msie) $(".editableNote").hide();

To show it:

if ($.browser.msie) $(".editableNote").show();

Remember to change “editableNote” to whatever common class you are also targeting for your Jeditable objects.

Here is the updated snippit with the show and hide functions in place.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

var sf = $.fn.superfish,
	c = sf.c,
	$arrow = $(['<span class="',c.arrowClass,'"> &#187;</span>'].join('')),
	over = function(){
		var $$ = $(this), menu = getMenu($$);
		clearTimeout(menu.sfTimer);
		if ($.browser.msie) $(".editableNote").hide();
		$$.showSuperfishUl().siblings().hideSuperfishUl();
	},
	out = function(){
		var $$ = $(this), menu = getMenu($$), o = sf.op;
		clearTimeout(menu.sfTimer);
		menu.sfTimer=setTimeout(function(){
			o.retainPath=($.inArray($$[0],o.$path)>-1);
			$$.hideSuperfishUl();
			if ($.browser.msie) $(".editableNote").show();
			if (o.$path.length && $$.parents(['li.',o.hoverClass].join('')).length&lt;1){over.call(o.$path);}
		},o.delay);	
	},
	getMenu = function($menu){
		var menu = $menu.parents(['ul.',c.menuClass,':first'].join(''))[0];
		sf.op = sf.o[menu.serial];
		return menu;
	},
	addArrow = function($a){ $a.addClass(c.anchorClass).append($arrow.clone()); };

A working before and after demo is forthcoming.

Tags: , , ,