Skip to main content

Search and Top Navigation

#3614 closed feature (fixed)

Opened November 20, 2008 08:38AM UTC

Closed July 14, 2010 05:41PM UTC

Last modified November 19, 2010 06:26PM UTC

Accordion: support multiple events being set at the same time

Reported by: jzaefferer Owned by:
Priority: minor Milestone: 1.8.3
Component: ui.accordion Version: 1.6rc2
Keywords: Cc:
Blocked by: Blocking:
Description

Here is a hoverintent implementation as a special event:

var cfg = ($.hoverintent = {
	sensitivity: 7,
	interval: 100
});
	
$.event.special.hoverintent = {
	setup: function() {
		$(this).bind("mouseover", jQuery.event.special.hoverintent.handler);
	},
	teardown: function() {
		$(this).unbind("mouseover", jQuery.event.special.hoverintent.handler);
	},
	handler: function(event) {
		event.type = "hoverintent";
		var self = this,
			args = arguments,
			target = $(event.target),
			cX, cY, pX, pY;
			

		function track(event) {
			cX = event.pageX;
			cY = event.pageY;
		};
		pX = event.pageX;
		pY = event.pageY;
		function clear() {
			target.unbind("mousemove", track).unbind("mouseout", arguments.callee);
			clearTimeout(timeout);
		}
		function handler() {
			if ( ( Math.abs(pX-cX) + Math.abs(pY-cY) ) < cfg.sensitivity ) {
				clear();
				jQuery.event.handle.apply(self, args);
			} else {
				pX = cX; pY = cY;
				timeout = setTimeout(handler, cfg.interval);
			}
		}
		var timeout = setTimeout(handler, cfg.interval);
		target.mousemove(track).mouseout(clear);
		return true;
	}
};

Its customizable by modifying the global $.hoverintent object.

This can be used in combination with a click event:

$(...).accordion({
  event: "click hoverintent"
});

This produces a good behaviour on systems with a mouse (no click needed, barely any unintential hovers) and still works on systems without a mouse, eg. iPhone (no mouseover event).

For multiple events to get namespaced, the binding code has to be modified:

if (options.event) {
	this.element.bind(options.event.split(" ").join(".accordion ") + ".accordion", clickHandler);
}
Attachments (0)
Change History (9)

Changed November 20, 2008 08:41AM UTC by jzaefferer comment:1

description: Here is a hoverintent implementation as a special event: \ \ {{{ \ var cfg = ($.hoverintent = { \ sensitivity: 7, \ interval: 100 \ }); \ \ $.event.special.hoverintent = { \ setup: function() { \ $(this).bind("mouseover", jQuery.event.special.hoverintent.handler); \ }, \ teardown: function() { \ $(this).unbind("mouseover", jQuery.event.special.hoverintent.handler); \ }, \ handler: function(event) { \ event.type = "hoverintent"; \ var self = this, \ args = arguments, \ target = $(event.target), \ cX, cY, pX, pY; \ \ \ function track(event) { \ cX = event.pageX; \ cY = event.pageY; \ }; \ pX = event.pageX; \ pY = event.pageY; \ function clear() { \ target.unbind("mousemove", track).unbind("mouseout", arguments.callee); \ clearTimeout(timeout); \ } \ function handler() { \ if ( ( Math.abs(pX-cX) + Math.abs(pY-cY) ) < cfg.sensitivity ) { \ clear(); \ jQuery.event.handle.apply(self, args); \ } else { \ pX = cX; pY = cY; \ timeout = setTimeout(handler, cfg.interval); \ } \ } \ var timeout = setTimeout(handler, cfg.interval); \ target.mousemove(track).mouseout(clear); \ return true; \ } \ }; \ }}} \ \ Its customizable by modifying the global $.hoverintent object. \ \ This can be used in combination with a click event: \ \ {{{ \ $(...).accordion({ \ event: "click hoverintent" \ }); \ }}} \ \ This produces a good behaviour on systems with a mouse (no click needed, barely any unintential hovers) and still works on systems without a mouse, eg. iPhone (no mouseover event).Here is a hoverintent implementation as a special event: \ \ {{{ \ var cfg = ($.hoverintent = { \ sensitivity: 7, \ interval: 100 \ }); \ \ $.event.special.hoverintent = { \ setup: function() { \ $(this).bind("mouseover", jQuery.event.special.hoverintent.handler); \ }, \ teardown: function() { \ $(this).unbind("mouseover", jQuery.event.special.hoverintent.handler); \ }, \ handler: function(event) { \ event.type = "hoverintent"; \ var self = this, \ args = arguments, \ target = $(event.target), \ cX, cY, pX, pY; \ \ \ function track(event) { \ cX = event.pageX; \ cY = event.pageY; \ }; \ pX = event.pageX; \ pY = event.pageY; \ function clear() { \ target.unbind("mousemove", track).unbind("mouseout", arguments.callee); \ clearTimeout(timeout); \ } \ function handler() { \ if ( ( Math.abs(pX-cX) + Math.abs(pY-cY) ) < cfg.sensitivity ) { \ clear(); \ jQuery.event.handle.apply(self, args); \ } else { \ pX = cX; pY = cY; \ timeout = setTimeout(handler, cfg.interval); \ } \ } \ var timeout = setTimeout(handler, cfg.interval); \ target.mousemove(track).mouseout(clear); \ return true; \ } \ }; \ }}} \ \ Its customizable by modifying the global $.hoverintent object. \ \ This can be used in combination with a click event: \ \ {{{ \ $(...).accordion({ \ event: "click hoverintent" \ }); \ }}} \ \ This produces a good behaviour on systems with a mouse (no click needed, barely any unintential hovers) and still works on systems without a mouse, eg. iPhone (no mouseover event). \ \ For multiple events to get namespaced, the binding code has to be modified: \ \ {{{ \ if (options.event) { \ this.element.bind(options.event.split(" ").join(".accordion ") + ".accordion", clickHandler); \ } \ }}}

Changed November 30, 2008 01:27PM UTC by jzaefferer comment:2

milestone: TBD1.next

Changed July 12, 2010 12:25PM UTC by scottgonzalez comment:3

summary: accordion: couple click and hoverintent (instead of mouseover)Accordion: support multiple events being set at the same time
type: bugfeature

Changed July 14, 2010 04:53PM UTC by jzaefferer comment:4

Also add the hoverintent example as a demo.

Changed July 14, 2010 04:53PM UTC by scottgonzalez comment:5

milestone: 1.next1.9

Changed July 14, 2010 05:41PM UTC by jzaefferer comment:6

Fixed in a3ab2b.

Changed July 14, 2010 05:41PM UTC by jzaefferer comment:7

resolution: → fixed
status: newclosed

Changed August 04, 2010 01:25AM UTC by scottgonzalez comment:8

milestone: 1.91.8.3

Changed November 19, 2010 06:26PM UTC by jzaefferer comment:9

Add support for multiple events, along with hoverintent demo. Fixes #3614 - Accordion: support multiple events being set at the same time

Changeset: a3ab2b223b8d7494bf860396975868644b3e89cb