jquery.special.event-api

Special Events  page     

Source

JavaScriptMVC provides a bunch of useful special events. Find out moreinfo on the left. The following is a brief summary:

DefaultEvents

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()

})

DestroyedEvents

Know if an element has been removed from the page.

$("#contextMenu").bind("destroyed", function(){

 // cleanup

 $(document.body).unbind("click.contextMenu");

})

Drag andDrop Events

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

Source

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 down
• draginit - the drag motion is started
• dragmove - the drag is moved
• dragend - the drag has ended
• dragover - the drag is over a drop point
• dragout - 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 happening
• ghost - copys the draggable and drags the cloned element
• horizontal - limits the scroll to horizontal movement
• location - where the drag should be on the screen
• mouseElementPosition - where the mouse should be on the drag
• only - only have drags, no drops
• representative - move another element in place of this element
• revert - animate the drag back to its position
• vertical - limit the drag to vertical movement
• limit - 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

returns {jquery.drag}

jQuery.Drag.prototype.cancel  function     

Source

Stops drag drop from running.

API

drag.cancel() -> undefined

returns {undefined}

jQuery.Drag.prototype.distance  function     

Source

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     

Source

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     

Source

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

Source

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     

Source

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    

Source

The position of start of the cursor on the element

jQuery.Drag.prototype.move  function     

Source

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    

Source

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     

Source

Respondables will not be alerted to this drag.

API

drag.only(only) -> undefined

only {}

returns {undefined}

jQuery.Drag.prototype.position  function     

Source

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    

Source

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     

Source

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

Source

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     

Source

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

Source

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

amount {number|Object}

make the drag move X amount in pixels from the top-left ofcontainer.

container {optional:jQuery}

the container to move in reference to. If not provided, thedocument is used.

center {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.

returns {jQuery.Drag}

the drag object for chaining.

jQuery.Drag.prototype.vertical  function     

Source

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

Source

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

        var count = 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

returns {jquery.drop}

jQuery.Drop.cache  function     

Source

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     

Source

Prevents this drop from being dropped on.

API

$.Drop.cancel() -> undefined

returns {undefined}

jQuery.Drop.compile  function     

Source

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

Source

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 ){

    var panel = 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');

    var tab = 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();

        var active = 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(){

               var el = 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(){

                                      var save = $('<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

Source

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();

               var self = 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

  var ul = $("<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(){

        var me = $(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     

Source

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

Source

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     

Source

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     

Source

The maximum distance the pointer must travel in pixels. The default is 75pixels.

jQuery.event.swipe.min  attribute     

Source

The minimum distance the pointer must travel in pixesl. The default is 30pixels.

jQuery.Event.prototype.keyName  function     

plugin: jquery/event/key

Source

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

Source

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 customizejQuery.Hover.prototype.delay and jQuery.Hover.prototype.distance
• hoverenter - an element is being hovered
• hovermove - the mouse moves on an element that has been hovered
• hoverleave - 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 distanceanddelay values.

You can set delay and distance globally by adjusting thestatic properties:

$.Hover.delay = 10

$.Hover.distance = 1

Or 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

var add = function(ev){

  $(this).addClass("hoverstate");

};

// removes a hover class

var remove = 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

returns {jquery.hover}

jQuery.Hover.prototype.delay  function     

Source

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     

Source

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     

Source

A hover is activated if it moves less than distance in this time. Set thisvalue as a global default.

jQuery.Hover.static.distance  attribute     

Source

A hover is activated if it moves less than this distance in delay time.Set this value as a global default.