ElementsMultiHighlight v1.1

Packager compatible.

Update 1: Some optimizations made to underlying code, with suggestions made by arian.

Also, fixed an issue where all elements in a collection would morph back to the last element's style in the collection instead of its own.

This plugin is based off the Element.highlight function but with a slight twist.

Call this method on a collection of Elements to transition their color properties on mouseeneter/leave.

Notice: If the background color is transparent it will be set to white!

Details

Author
Michael Russell
Current version
v1.1
GitHub
subhaze/mootools-elements-multihighlight
Downloads
3872
Category
Effects
Report
GitHub Issues

Releases

Dependencies

  • _self_/_current_:
    • Core/Elements
    • Core/Fx.Morph

How to use

Syntax:

$$('.classOrSelector').multiHighlight( backgroundColor, foregroundColor, morphProps );

Arguments:

  1. backgroundColor - (string, MUST be either a HEX color value or NULL) The color you wish to transition the background to.
  2. foregroundColor - (string, MUST be either a HEX color value or NULL) The color you with to transition the elements color property to.
  3. morphProps - (object, optional, set of Fx options) See Fx for valid options.

Examples

JavaScript

// Transitions current colors to supplied colors on mouseenter and back to original on mouseleave
$$('.link1').multiHighlight('#eee','#000');

// Transitions ONLY the elements color property and applies Fx options to the transition
$$('.link2').multiHighlight(null,'#eee', {duration:'short'});

// Transitions ONLY the elements background-color and applies Fx options to the transition
$$('.link3').multiHighlight('#eee',null, {duration:'long'});

HTML

<div class="link-container">
    <a class="link1" href="#">home</a>
    <a class="link1" href="#">about</a>
    <a class="link1" href="#">contact</a>
    <div class="clear-floats"></div>
</div>
<div class="link-container">
    <a class="link2" href="#">home</a>
    <a class="link2" href="#">about</a>
    <a class="link2" href="#">contact</a>
    <div class="clear-floats"></div>
</div>
<div class="link-container">
    <a class="link3" href="#">home</a>
    <a class="link3" href="#">about</a>
    <a class="link3" href="#">contact</a>
    <div class="clear-floats"></div>
</div>

Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.

blog comments powered by Disqus