Andrew Plummer - Design Development Translation

Getting Started


Applying HotText to simple form elements.


View Example


<script type="text/javascript" src="/path/to/MooTools-Core.js"></script> <script type="text/javascript" src="/path/to/MooTools-More.js"></script> <script type="text/javascript" src="/path/to/HotText.js"></script> <script type="text/javascript"> new HotText(".htElement"); </script>

The simplest way to apply HotText is to give the elements you want as HotText a class (in the example, htElement), and then pass that class to the constructor. Since the constructor takes a CSS selector, you could also choose to apply HotText to all elements of a certain type, elements with a single id, etc. Remember to link to the source files: MooTools Core, MooTools More, and HotText itself.

Here is an example of the HTML required for HotText:

<div class="htElement"> <span>$5.00</span> <select name="cost"> <option value="4.50">$4.50</option> <option value="4.75">$4.75</option> <option value="5.00" selected="selected">$5.00</option> <option value="5.25">$5.25</option> <option value="5.50">$5.50</option> </select> </div> <div class="htElement"> <span>32</span> <input type="text" name="quantity" value="32" /> </div>

In both cases, a span is required inside the element, as is a select or input. If you are using an input, its value must have be numeric (although it may have a prefix like a dollar sign or a suffix like units).

That's all! Your HotText element is now ready to use.