jquery.special.event-api
Special Events page
JavaScriptMVC provides a bunch of useful special events. Find out moreinfo on the left. The following is a brief summary:
Lets you supply default behavior for an event that is preventable withevent.preventDefault(). This is extremely useful for providing DOM-like api's foryour widgets.
$("#tabs").delegate(".panel","default.open", function(){
$(this).show()
})
Know if an element has been removed from the page.
$("#contextMenu").bind("destroyed", function(){
// cleanup
$(document.body).unbind("click.contextMenu");
})
Listen to drag-drop events with event delegation.
$(".item").live("dragover", function(ev, drag){
// let user know that the itemcan be dropped
$(this).addClass("canDrop");
}).live("dropover", function(ev, drop, drag){
// let user know that the itemcan be dropped on
$(this).addClass('drop-able')
})
jQuery.Drag class
plugin: jquery/event/drag
download: jQuery.Drag
test: qunit.html
Provides drag events as a special events to jQuery.
A jQuery.Drag instance is created on a drag and passed as a parameter to thedrag event callbacks. By calling methods on the drag event, you can alter thedrag's behavior.
Drag Events
The drag plugin allows you to listen to the followingevents:
dragdown- the mouse cursor is pressed downdraginit- the drag motion is starteddragmove- the drag is moveddragend- the drag has endeddragover- the drag is over a drop pointdragout- the drag moved out of a drop point
Just by binding or delegating on one of these events, youmake the element dragable. You can change the behavior of the drag by callingmethods on the drag object passed to the callback.
Example
Here's a quick example:
//makes the drag vertical
$(".drags").delegate("draginit",function(event, drag){
drag.vertical();})//gets the position of the drag and uses that to set the width
//of an element
$(".resize").delegate("dragmove",function(event, drag){
$(this).width(drag.position.left() - $(this).offset().left )
})Drag Object
The drag object is passed after the event to drag eventcallback functions. By calling methods and changing the properties of the dragobject, you can alter how the drag behaves.
The drag properties and methods:
cancel- stops the drag motion from happeningghost- copys the draggable and drags the cloned elementhorizontal- limits the scroll to horizontal movementlocation- where the drag should be on the screenmouseElementPosition- where the mouse should be on the dragonly- only have drags, no dropsrepresentative- move another element in place of this elementrevert- animate the drag back to its positionvertical- limit the drag to vertical movementlimit- limit the drag within an element (*limit plugin)scrolls- scroll scrollable areas when dragging near their boundries (*scroll plugin)
Demo
Now lets see some examples:
Demo
HTML
<h2>Drag with bind</h2>
<div id="drag" class="handle">Drag Me</div>
<h2>Delegated Drags</h2>
<div id="delegate">
<div class="handle">handle</div>
<div class="handle">handle</div>
</div>
<h2>Drag Ghost</h2>
<div id="ghost" class="handle">Drag and I get cloned</div>
<h2>Drag Revert</h2>
<div class="handle revert">Drag and let me go</div>
<div class="handle revert">Drag and let me go</div>
<h2>Limit Drag</h2>
<div id="container">
<div class="handle">drag me out of bounds</div>
</div>
<h2>Drag Representative</h2>
<div id="repdrag" class="handle">Drag a Representative</div>
<div id="representative" style="display: none">I represent You</div>
<h2>Drag Horizontal</h2>
<div id="horizontal" class="handle">I only move horizontal</div>
<h2>Drag Distance</h2>
<div id="distance" class="handle">You have to move me 50 pixels</div>
<h2>Drag Scrolls</h2>
<div id="scroll-drag" class="handle">I move scrollbars</div>
<div id="scrollarea">
<ul><li>1</li><li>2</li><li>3</li>
<li>4</li><li>5</li><li>6</li>
<li>7</li><li>8</li><li>9</li></ul>
</div>
Source
steal("jquery/event/drag",
"jquery/event/drag/scroll",
"jquery/event/drag/limit").then(function($){
//drag with bind
$("#drag").bind("draginit",function(){})
//delegated drags
$("#delegate").delegate(".handle","draginit",function(){})
//ghost
$("#ghost").bind("draginit",function(ev, drag){drag.ghost()})
//revert
$(".revert").bind("draginit",function(ev, drag){drag.revert() })
//limit
$("#container").delegate(".handle","draginit",function(ev, drag){drag.limit( $("#container") )})
//representative
$("#repdrag").bind("draginit",function(ev, drag){drag.representative($("#representative"),50,30)})
//horizontal
$("#horizontal").bind("draginit",function(ev, drag){drag.horizontal()})
//distance
$('#distance').bind('dragdown',function(ev, drag){
ev.preventDefault();drag.distance(50)
}) //scrolls
$("#scroll-drag").bind("draginit",function(ev, drag){drag.scrolls( $("#scrollarea") )})
// allow form elements to be selected
$("#form-drag").bind("dragdown",function(ev, drag){
if(ev.target.nodeName.toLowerCase() =='input'){
drag.cancel(); }})})Constructor
The constructor is never called directly.
new $.Drag() -> jquery.drag
{jquery.drag}
jQuery.Drag.prototype.cancel function
Stops drag drop from running.
API
drag.cancel() -> undefined
returns {undefined}
jQuery.Drag.prototype.distance function
Sets the distance from the mouse before the item begins dragging.
API
drag.distance(val) -> undefined
val {Number}
returns {undefined}
jQuery.Drag.prototype.ghost function
Clones the element and uses it as the moving element.
API
drag.ghost(loc) -> jQuery.fn
loc {}
returns {jQuery.fn}
the ghost
jQuery.Drag.prototype.horizontal function
Isolates the drag to horizontal movement.
API
drag.horizontal() -> undefined
returns {undefined}
jQuery.Drag.prototype.limit function
plugin: jquery/event/drag/limit
download: jQuery.Drag.prototype.limit
limits the drag to a containing element
API
drag.limit(container, center)-> undefined
container {jQuery}
center {optional:Object}
can set the limit to the center of the object. Can be 'x', 'y' or 'both'
jQuery.Drag.prototype.location attribute
The location of where the element should be in the page. This takes intoaccount the start position of the cursor on the element.
If the drag is going to be moved to an unacceptable location, you can callpreventDefault in dragmove to prevent it from being moved there.
$('.mover').bind("dragmove", function(ev, drag){
if(drag.location.top() < 100){
ev.preventDefault()
}
});
You can also set the location to where it should be on the page.
jQuery.Drag.prototype.mouseElementPosition attribute
The position of start of the cursor on the element
jQuery.Drag.prototype.move function
Scrolls an element then calls mouse a mousemove in the same location.
API
drag.move(scroll_element,drag_element, dx, dy, ev, x, y, sx, sy) -> undefined
scroll_element {HTMLElement}
the element to be scrolled
drag_element {HTMLElement}
dx {Number}
how far to scroll
dy {Number}
how far to scroll
ev {}
x {Number}
the mouse position
y {Number}
the mouse position
sx {}
sy {}
returns {undefined}
jQuery.Drag.prototype.noSelection function
noSelection method turns off text selection during a drag event. Thismethod is called by default unless a event is listening to the 'dragdown'event.
## Example
$('div.drag').bind('dragdown', function(elm,event,drag){
drag.noSelection();
});
API
drag.noSelection(elm, element.)-> undefined
elm {}
element. {[elm] an element to prevent selection on. Defaults to the dragable}
returns {undefined}
jQuery.Drag.prototype.only function
Respondables will not be alerted to this drag.
API
drag.only(only) -> undefined
only {}
returns {undefined}
jQuery.Drag.prototype.position function
Sets the position of this drag.
The limit and scroll plugins overwrite this to make sure the drag followsa particular path.
API
drag.position(newOffsetv) ->undefined
newOffsetv {jQuery.Vector}
the position of the element (not the mouse)
returns {undefined}
jQuery.Drag.prototype.representative function
Use a representative element, instead of the movingElement.
API
drag.representative(element,offsetX, offsetY) -> undefined
element {HTMLElement}
the element you want to actually drag
offsetX {Number}
the x position where you want your mouse on the object
offsetY {Number}
the y position where you want your mouse on the object
returns {undefined}
jQuery.Drag.prototype.revert function
Makes the movingElement go back to its original position after drop.
".handle dragend" : function( el, ev,drag ) {
drag.revert()
}
API
drag.revert(val) -> undefined
val {optional:Boolean}
optional, set to false if you don't want to revert.
returns {undefined}
jQuery.Drag.prototype.scrolls function
plugin: jquery/event/drag/scroll
download: jQuery.Drag.prototype.scrolls
Will scroll elements with a scroll bar as the drag moves to borders.
API
drag.scrolls(elements, options)-> undefined
elements {jQuery}
to scroll. The window can be in this array.
options {Object}
changes the default settings.
- distance {number} 30 - how many pixels away from a boundry where we start scrolling
- delta(diff) {Function} - returns how far we should scroll. It is passed how many pixels the cursor is from the boundry.
- direction {String} - direction scrolling should happen. "xy" is the default.
returns {undefined}
jQuery.Drag.prototype.selection function
selection method turns on text selection that was previously turned offduring the drag event. This method is called by default in 'destroy' unless aevent is listening to the 'dragdown' event.
## Example
$('div.drag').bind('dragdown', function(elm,event,drag){
drag.noSelection();
});
API
drag.selection(elm) ->undefined
elm {}
returns {undefined}
jQuery.Drag.prototype.step function
plugin: jquery/event/drag/step
download: jQuery.Drag.prototype.step
makes the drag move in steps of amount pixels.
drag.step({x:5}, $('foo'),"xy")
Demo
Demo
HTML
<div id="ondoc">
<div id="handle" class="handle">top left</div>
<div id="handle2" class="handle">horizontal</div>
<div id="handle3" class="handle">vertical</div>
<div id="handle4" class="handle">horizontal vertical</div>
</div>
Source
$("#ondoc")
.delegate('#handle',"draginit",function(ev, drag){
drag.step(40,$("#ondoc"))
}).delegate('#handle2',"draginit",function(ev, drag){
drag.step(40,$("#ondoc"),"x")
}).delegate('#handle3',"draginit",function(ev, drag){
drag.step(40,$("#ondoc"),"y")
}).delegate('#handle4',"draginit",function(ev, drag){
drag.step(40,$("#ondoc"),"xy")
});API
drag.step(amount, container, center) -> jQuery.Drag {number|Object}
make the drag move X amount in pixels from the top-left ofcontainer.
{optional:jQuery}
the container to move in reference to. If not provided, thedocument is used.
{optional:String}
Indicates how to position the drag element in relationshipto the container.
- If nothing is provided, places the top left corner of the drag element at 'amount' intervals from the top left corner of the container.
- If 'x' is provided, it centers the element horizontally on the top-left corner.
- If 'y' is provided, it centers the element vertically on the top-left corner of the container.
- If 'xy' is provided, it centers the element on the top-left corner of the container.
{jQuery.Drag}
the drag object for chaining.
jQuery.Drag.prototype.vertical function
Isolates the drag to vertical movement.
API
drag.vertical() -> undefined
returns {undefined}
jQuery.Drop class
plugin: jquery/event/drop
download: jQuery.Drop
test: qunit.html
Provides drop events as a special event to jQuery.
By binding to a drop event, the your callback functions will be called duringthe corresponding phase of drag.
Drop Events
All drop events are called with the native event, aninstance of drop, and the drag. Here are the available drop events:
dropinit- the drag motion is started, drop positions are calculated.dropover- a drag moves over a drop element, called once as the drop is dragged over the element.dropout- a drag moves out of the drop element.dropmove- a drag is moved over a drop element, called repeatedly as the element is moved.dropon- a drag is released over a drop element.dropend- the drag motion has completed.
Examples
Here's how to listen for when a drag moves over a drop:
$('.drop').delegate("dropover",function(ev, drop, drag){
$(this).addClass("drop-over")
})A bit more complex example:
Demo
HTML
<h2>Drop Demo</h2>
<div class="handle">Drag Me</div>
<h2>Dropout/Dropover</h2>
<div id="dropout">
<div class="dropout"></div>
<div class="dropout"></div>
</div>
<a href="javascript://" id="undelegate">undelegate</a>
<h2>Dropmove/Dropon</h2>
<div class="dropmove"></div>
<span>Drop Count<span class="count">0</span></span>
Source
steal('jquery/event/drop',function(){
//make drags
$('.handle').live("draginit",function(){})
//add dropout/dropover
$('#dropout')
.delegate(".dropout","dropover",function(){$(this).addClass('over') })
.delegate(".dropout","dropout",function(){$(this).removeClass('over') })
.bind("dropover",function(){$(this).addClass('over') })
.bind("dropout",function(){$(this).removeClass('over') });
//turn off dropout/dropover
$("#undelegate").click(function(){
$('#dropout').undelegate(".dropout","dropover");
$('#dropout').undelegate(".dropout","dropout");
}) //add dropmove/dropon
varcount =0
$('.dropmove')
.bind('dropmove',function(){
$('.count').text(count++)
}).bind('dropon',function(){
$(this).text("Dropped on!")
}) })How it works
1. When you bind on a drop event, it adds that element to the list ofrootElements. RootElements might be drop points, or might have delegated droppoints in them.
2. When a drag motion is started, each rootElement is queried for theevents listening on it. These events might be delegated events so we need toquery for the drop elements.
3. With each drop element, we add a Drop object with all the callbacksfor that element. Each element might have multiple event provided by differentrootElements. We merge callbacks into the Drop object if there is an existingDrop object.
4. Once Drop objects have been added to all elements, we go throughthem and call draginit if available.
Constructor
The constructor is never called directly.
new $.Drop() -> jquery.drop
{jquery.drop}
jQuery.Drop.cache function
Caches positions of draggable elements. This should be called in dropinit.For example:
dropinit: function( el, ev, drop ) { drop.cache_position() }
API
$.Drop.cache(value) ->undefined
value {}
returns {undefined}
jQuery.Drop.cancel function
Prevents this drop from being dropped on.
API
$.Drop.cancel() -> undefined
returns {undefined}
jQuery.Drop.compile function
Gets all elements that are droppable and adds them to a list.
This should be called if and when new drops are added to the page duringthe motion of a single drag.
This is called by default when a drag motion starts.
Use
After adding an element or drop, call compile.
$("#midpoint").bind("dropover",function(){ // when adrop hovers over midpoint, // make drop a drop.$("#drop").bind("dropover", function(){
});
$.Drop.compile();
});
API
$.Drop.compile(event, drag) ->undefined
event {}
drag {}
returns {undefined}
Pause-Resume page
plugin: jquery/event/pause
The jquery/event/pause plugin adds the ability to pause andresume events.
$('#todos').bind('show',function(ev){
ev.pause(); $(this).load('todos.html',function(){
ev.resume(); });})When an event is paused, stops calling other event handlersfor the event (similar to event.stopImmediatePropagation() ). But when resumeis called on the event, it will begin calling events on event handlers afterthe 'paused' event handler.
Pause-able events complement the defaultevents plugin, providing the ability to easy create widgets with anasynchronous API.
Example
Consider a basic tabs widget that:
- trigger's a show event on panels when they are to be displayed
- shows the panel after the show event.
The sudo code for this controller might look like:
$.Controller('Tabs',{
".button click":function( el ){
varpanel =this.getPanelFromButton( el );
panel.triggerAsync('show',function(){
panel.show(); }) }})Someone using this plugin would be able to delay the panelshowing until ready:
$('#todos').bind('show',function(ev){
ev.pause(); $(this).load('todos.html',function(){
ev.resume(); });})Or prevent the panel from showing at all:
$('#todos').bind('show',function(ev){
if(! isReady()){
ev.preventDefault(); }})Limitations
The element and event handler that the pauseis within can not be removed before resume is called.
Big Example
The following example shows a tabs widget where the user isprompted to save, ignore, or keep editing a tab when a new tab is clicked.
Demo
HTML
<ul id="tabs" class="ui-helper-clearfix tabs" '="">
<li class="active"><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
</ul>
<div id="panels">
<form id="tab1" class="tab dirtybit saver">
Name:<input name="name">
Age:<select name="age"><option>10</option><option>20</option></select>
</form>
<form style="display: none;" id="tab2" class="tab dirtybit saver">
Yard:<select name="yard"><option>1</option><option>2</option></select>
Team:<input name="team">
</form>
<form style="display: none;" id="tab3" class="tab dirtybit saver">
Price:<input name="price">
Comment:<textarea name="comment"></textarea>
</form>
</div>
Source
steal("jquery/controller",'jquery/event/pause','jquery/event/default')
.then(function(){
$.Controller("Tabs",{
init :function(el){
$(el).children("li:first").addClass('active');
vartab =this.tab;
this.element.children("li:gt(0)").each(function(){
tab($(this)).hide()
}) },tab :function(li){
return$(li.find("a").attr("href").match(/#.*/)[0])
},"li click":function(el, ev){
ev.preventDefault();varactive =this.find('.active')
old =this.tab(active),
cur =this.tab(el);
old.triggerAsync('hide',function(){
active.removeClass('active')
old.slideUp(function(){
el.addClass('active')
cur.slideDown() }); }) }}) // adds the controller to the element
$("#tabs").tabs();
// create a widget listens for change and marks as dirty
$.Controller("Dirtybit",{
listensTo : ['set']
},{init :function(){
this.element.data('formData',this.element.serialize())
},"change":function(el){
this.check()
},keyup :function(el){
this.check()
},click :function(el){
this.check()
},check :function(){
varel =this.element;
if(el.serialize() == el.data('formData')){
el.removeClass('dirty')
}else{
el.addClass('dirty')
} },"set":function(){
this.element.data('formData',this.element.serialize())
.removeClass('dirty');
}}) // a modal width
$.Controller("Modal",{
init :function(){
this.element.show();
},"a click":function(a){
this.element.hide();
this.options[a.attr('id')]();
this.destroy();
}}) // create a saver widget
$.Controller("Saver",{
listensTo : ['hide']
},{"hide":function(el, ev){
if(el.hasClass('dirty')) {
ev.pause()$('#modal').modal({
yes:function(){
varsave = $('<span>Saving</span>').appendTo(el);
$.post("/update", el.serialize(),function(){
save.remove();el.trigger('set');
ev.resume(); }) },no:function(){
ev.resume(); },cancel:function(){
ev.preventDefault(); ev.resume(); } }) } }}); $("#panels .tab").dirtybit().saver();
// a fake post method
$.post =function(url,data, success){
setTimeout(success,500)
}; });It's a long, but great example of how to do some prettycomplex state management with JavaScriptMVC.
jQuery.fn.triggerAsync function
plugin: jquery/event/default
Triggers an event and calls success when the event has finishedpropagating through the DOM and preventDefault is not called.
$('#panel').triggerAsync('show', function() {
$('#panel').show();
});
You can also provide a callback that gets called if preventDefault wascalled on the event:
$('panel').triggerAsync('show', function(){
$('#panel').show();
},function(){
$('#other').addClass('error');
});
triggerAsync is design to work with the jquery.event.pauseplugin although it is defined in jquery/event/default.
API
$.fn.triggerAsync(type, data,success, prevented) -> undefined
type {String}
The type of event
data {Object}
The data for the event
success {Function}
a callback function which occurs upon success
prevented {Function}
a callback function which occurs if preventDefault was called
returns {undefined}
Source
steal("jquery/controller",'jquery/event/default').then(function($){
$.Controller("Tabs",{
init :function(){
this.find("li:first").addClass('active')
this.find(".tab:gt(0)").hide();
},"li click":function(el, ev){
ev.preventDefault();varself =this;
if(!el.hasClass('active')){
this.sub(el).triggerAsync('show',function(){
self.sub(self.find(".active").removeClass("active")).hide();
el.addClass("active");
}) } },sub :function(el){
return$(el.find("a").attr("href"))
},".tab default.show":function(el){
el.show(); }}) $("#tabs").tabs();
$("#second").bind("show",function(ev){
if(! $("#complete")[0].checked ){
ev.preventDefault(); }}) });HTML
<a href="javascript://" class="context">Show Menu 1</a>
<a href="javascript://" class="context">Show Menu 2</a>
<a href="javascript://" class="context">Show Menu 3</a>
<br>
<a id="remove" href="javascript://">Remove a "Show Menu"</a>
Source
//create a contextmenu plugin
jQuery.fn.reusemenu =function(options){
//create menu and put in dom
varul = $("<ul/>")
.addClass("menu")
.html(options.length ?"<li>"+options.join("</li><li>")+"</li>":"")
.appendTo(document.body),//save a reference to our handler so we can remove it
hideHandler =function(){
ul.find("li").animate({fontSize:1, padding:1});
},//the number of elements that remain
count =this.length;
//take out the hide handler when we
//no longer have the ul
ul.bind("destroyed",function(){
$(document).unbind("click",hideHandler )
}) $(document).click(hideHandler) //for each menu
this.each(function(){
varme = $(this);
//position menu on click
me.click(function(ev) {
ul.offset({top: ev.pageY+20,
left: ev.pageX+20
}).find("li").animate({fontSize:12, padding:10});
ev.stopPropagation(); }) //if last element, remove menu
.bind("destroyed",function() {
count--;if(!count){
ul.remove();ul =null;
} }) })}; $(".context").reusemenu(["reuse","able","menu"])
$("#remove").click(function(){
$(".context:first").remove()
})jQuery.event.special.resize attribute
The resize event is useful for updating elements dimensions when a parentelement has been resized. It allows you to only resize elements that need to beresized in the 'right order'.
By listening to a resize event, you will be alerted whenever a parentelement has a resize event triggered on it. For example:
$('#foo').bind('resize', function(){
// adjust #foo's dimensions
})
$(document.body).trigger("resize");
The 'Right Order'
When a control changes size, typically, you want only internal controls tohave to adjust their dimensions. Furthermore, you want to adjust controls fromthe 'outside-in', meaning that the outermost control adjusts its dimensionsbefore child controls adjust theirs.
Resize calls resize events in exactly this manner.
When you trigger a resize event, it will propagate up the DOM until itreaches an element with the first resize event handler. There it will move theevent in the opposite direction, calling the element's children's resize eventhandlers.
If your intent is to call resize without bubbling and only trigger childelement's handlers, use the following:
$("#foo").trigger("resize", false);
Stopping Children Updates
If your element doesn't need to change it's dimensions as a result of theparent element, it should call ev.stopPropagation(). This will only stop resizefrom being sent to child elements of the current element.
jQuery.event.swipe class
plugin: jquery/event/swipe
Swipe provides cross browser swipe events. On mobile devices, swipe usestouch events. On desktop browsers, swipe uses mouseevents.
A swipe happens when a touch or drag moves
jQuery.event.swipe.delay attribute
Delay is the upper limit of time the swipe motion can take in milliseconds.This defaults to 1000.
A user must perform the swipe motion in this much time.
jQuery.event.swipe.max attribute
The maximum distance the pointer must travel in pixels. The default is 75pixels.
jQuery.event.swipe.min attribute
The minimum distance the pointer must travel in pixesl. The default is 30pixels.
jQuery.Event.prototype.keyName function
plugin: jquery/event/key
Returns a string representation of the key pressed. The following listensto and prevents backspaces being pressed in inputs:
$("input").keypress(function(ev){
if(ev.keyName() == '\b') {
ev.preventDefault();
}
});
Keys
The following describes the key values returned by jQuery.Event.prototype.key.
- \b - backspace
- \t - tab
- \r - enter key
- shift, ctrl, alt
- pause-break, caps, escape, num-lock, scroll-loc, print
- page-up, page-down, end, home, left, up, right, down, insert, delete
- ' ' - space
- 0-9 - number key pressed
- a-z - alpha key pressed
- num0-9 - number pad key pressed
- / ; : = , - . / ` [ \ ] ' "
- f1-12 - function keys pressed
Alternate keys
Use jQuery.event.keyto set alternate key mappings for other locales.
API
event.keyName() -> String
returns {String}
The string representation of of the key pressed.
jQuery.Hover class
plugin: jquery/event/hover
download: jQuery.Hover
Provides delegate-able hover events.
A hover happens when the mouse stops moving over an elementfor a period of time. You can listen and configure hover with the followingevents:
hoverinit- called on mouseenter, use this event to customize jQuery.Hover.prototype.delay and jQuery.Hover.prototype.distancehoverenter- an element is being hoveredhovermove- the mouse moves on an element that has been hoveredhoverleave- the mouse leaves the element that has been hovered
Quick Example
The following listens for hoverenter and adds a class tostyle the element, and removes the class on hoverleave.
$('#menu').delegate(".option","hoverenter",function(){
$(this).addClass("hovering");
}).delegate(".option","hoverleave",function(){
$(this).removeClass("hovering");
})Configuring Distance and Delay
An element is hovered when the mouse moves less than acertain distance in specific time over the element.
You can configure that distance and time by adjusting the distanceand delay values.
You can set delay and distance globally by adjusting thestatic properties:
$.Hover.delay =10
$.Hover.distance = 1Or you can adjust delay and distance for an individualelement in hoverenter:
$(".option").delegate("hoverinit",function(ev, hover){
//set the distance to 10px
hover.distance(10)
//set the delay to 200ms
hover.delay(10)
})Demo
Demo
HTML
<h4>Delegating</h4>
<div class="hover">hover me</div>
<div class="hover">hover me</div>
<h4>Bound Directly</h4>
<div class="hovers">hover me for a second</div>
<div class="hovers">hover me for a second</div>
<h4>HoverLeave</h4>
<div class="hoverleave">Leave and don't return for a half second</div>
Source
steal('jquery/event/hover',function(){
// adds a hover class
varadd =function(ev){
$(this).addClass("hoverstate");
}; // removes a hover class
varremove =function(ev){
$(this).removeClass("hoverstate");
}; // delegate on hover
$('.hover').live('hoverenter',add);
$('.hover').live('hoverleave', remove);
$('.hovers').bind('hoverinit',function(ev, hovered){
hovered.delay(1000);
}); $('.hovers').bind('hoverenter',add);
$('.hovers').bind('hoverleave', remove);
$('.hoverleave').bind('hoverinit',function(ev, hovered){
hovered.leave(500);
}).bind('hoverenter',add).bind('hoverleave', remove);
});Constructor
Creates a new hover. This is never called directly.
new $.Hover() -> jquery.hover
{jquery.hover}
jQuery.Hover.prototype.delay function
Sets the delay for this hover. This method should only be used inhoverinit.
API
hover.delay(delay) ->undefined
delay {Number}
the number of milliseconds used to determine a hover
returns {undefined}
jQuery.Hover.prototype.distance function
Sets the distance for this hover. This method should only be used inhoverinit.
API
hover.distance(distance) ->undefined
distance {Number}
the max distance in pixels a mouse can move to be considered a hover
returns {undefined}
jQuery.Hover.static.delay attribute
A hover is activated if it moves less than distance in this time. Set thisvalue as a global default.
jQuery.Hover.static.distance attribute
A hover is activated if it moves less than this distance in delay time.Set this value as a global default.