How To Enable Live Hover With jQuery UI Icons

Author: erics, May 8th, 2011

The HTML:

<ul class="icons ui-widget ui-helper-clearfix">
     <li id="AddItem" class="ui-state-default ui-corner-all" title="Add Item"><span class="ui-icon ui-icon-plusthick"></span></li>
     <li id="AddToFavorites" class="ui-state-default ui-corner-all" title="Add to Favorites"><span class="ui-icon ui-icon-heart"></span></li>
</ul>

</ul>

The CSS:

ul.icons li
{
     cursor: pointer;
     float: left;
     list-style: none;
     margin: 2px;
     padding: 2px 0px;
     position: relative;
}

ul.icons li

{

cursor: pointer;

float: left;

list-style: none;

margin: 2px;

padding: 2px 0px;

position: relative;

}

The jQuery:

jQuery('ul.icons li')
         .live("mouseover mouseout", function (event) {
             if (event.type == "mouseover") jQuery(this).addClass("ui-state-hover");
             else jQuery(this).removeClass("ui-state-hover");
});

jQuery('ul.icons li')

.live("mouseover mouseout", function (event) {

if (event.type == "mouseover") jQuery(this).addClass("ui-state-hover");

else jQuery(this).removeClass("ui-state-hover");

});

Categories: How-To's, Technology Tags: Button, Hover, Icon, Icons, JQuery, jQuery UI, live, Live Hover, mouseout, mouseover | No comments

How To Bind jQuery .live() To Multiple Events

Author: erics, April 17th, 2011

As of jQuery 1.4.1 .live() can accept multiple, space-separated events, similar to the functionality provided in .bind(). For example, we can “live bind” the click and focus events at the same time like so:

jQuery('.datepick').live('click focus', function () {
   jQuery(this).datepicker('destroy').datepicker({showOn: 'both'});
});

jQuery('.datepick').live('click focus', function () {

jQuery(this).datepicker('destroy').datepicker({showOn: 'both'});

});

Another example, this time creating a hover effect:

jQuery('.rollover').live('mouseover mouseout', function(event) {
  if (event.type == 'mouseover') {
    // do something on mouseover
  } else {
    // do something on mouseout
  }
});

jQuery('.rollover').live('mouseover mouseout', function(event) {

if (event.type == 'mouseover') {

// do something on mouseover

} else {

// do something on mouseout

}

});

Categories: How-To's, Technology Tags: bind, click, datepicker, Events, Focus, JQuery, live, mouseout, mouseover, Multiple events, rollover | No comments

S	M	T	W	T	F	S
			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
26	27	28	29	30	31

How To Enable Live Hover With jQuery UI Icons

How To Bind jQuery .live() To Multiple Events

Our Link Network

Business

Client Websites

Fine Dining

Friends & Family

Galleries

Health

Resources

Technology

Travel

The Archives

Latest Ramblings…

Various Topics of No Interest