Hoverable

index.html

@@ -1,33 +1,61 @@
 <h1>Touchable</h1>
 
-<p>Touchable is a very lightweight jQuery Class that unifies touch and mouse events over different platforms like desktops and mobile devices with touchscrennes (like Android, iPad, iPod Touch, iPhone etc.)
-The name Touchable therefore might be a bit confusing, cause it actually is a generic "Touch" which involves also mouse events. For convenience they are all called "Touches".</p>
+<p>Touchable is a very lightweight (3,12kb) jQuery Class that unifies touch and mouse events over different platforms like desktops and mobile devices with touchscreens (like Android, iPad, iPod Touch, iPhone etc.)
+The name Touchable therefore might be a bit confusing, cause we actually generate a generic "Touch" which involves also mouse events. For convenience they are all called "Touches".</p>
 
 <p>Touchable really doesn't depend that much on jQuery, so it should work with other libraries like <a href="http://zeptojs.com/">Zepto</a> too. Havent tested that though.</p>
 
+<h1>Hoverable</h1>
+
+<p>Hoverable is built upon Touchable and is a very lightweight (1,7kB) jQuery Class that unifies hover events over different platforms like desktops and mobile devices with touchscreens (like Android, iPad, iPod Touch, iPhone etc.)
+It introduces a new event called </p>
+
+<ul>
+<li><strong>newHover(2)</strong>: following my <a href="http://grenzgenial.com/">blog</a> article about UI design and my postulate, that Long Tap is the new Hover. Fired when the user hovers with the mouse or longTaps an element. Hovever if you want to you can set it up to a touchmove event too, which will fire a genericHover2 event.</li>
+</ul>
+
+<h2>Testing</h2>
+
+<p>right now I have tested Touchable on the following devices and browsers Chrome, Firefox, Safari, iPad Simulator, iPad, iPhone. But it should work quite everywhere. If you have any bug notes drop me a line.</p>
+
+<h2>Demo</h2>
+
+<p>I have setup a demo site for Hoverable on <a href="http://connect-mi.com/">connect-mi.com</a></p>
+
 <h2>Usage</h2>
 
-<p>Right now Touchable supports five basic events, all events when bound with jQuery's bind function get a touch object passed in as second argument</p>
+<p>Right now Touchable supports five basic events and Hoverable adds two generic Hover events, all events when bound with jQuery's bind function get a touch object passed in as second argument</p>
+
+<h1>TOUCHABLE</h1>
 
 <ul>
-<li><strong>touchmove</strong>: fired when the user touched or clicked with the mouse and moves to another position. Right now Touchable supports up to 2 fingers. If 2 fingers are on screen the lower left is taken as a reference.</li>
-<li><strong>touchend</strong>: fired when the user ended a touch</li>
-<li><strong>Tap</strong>: fired when the user clicks with his mouse or taps with his finger</li>
+<li><strong>touchablemove</strong>: fired when the user touched or clicked with the mouse and moves to another position. Right now Touchable supports up to 2 fingers. If 2 fingers are on screen the lower left is taken as a reference.</li>
+<li><strong>touchableend</strong>: fired when the user ended a touch</li>
+<li><strong>tap</strong>: fired when the user clicks with his mouse or taps with his finger</li>
 <li><strong>longTap</strong>: fired when the user stays with his mouse or finger on an item for 1 second</li>
-<li><strong>doubleTap</strong>: fired when the user taps two times within half of a second</li>
+<li><p><strong>doubleTap</strong>: fired when the user taps two times within half of a second</p>
+
+<h1>HOVERABLE</h1></li>
+<li><p><strong>newHover(2)</strong>: Fired when the user hovers with the mouse or longTaps an element. Hovever if you want to you can set it up to a touchmove event too, which will fire a genericHover2 event.</p></li>
 </ul>
 
 <p>you use it by initializing Touchable on a view element, like so:</p>
 
 <pre><code>var div = $(&lt;div&gt;).Touchable();
 </code></pre>
 
+<p>or</p>
+
+<pre><code>var div = $(&lt;div&gt;).Hoverable(); //which cretaes a Touchable internally
+</code></pre>
+
 <p>then you bind to the events</p>
 
 <pre><code>div.bind('touchmove', function(e, touch){})
+div.bind('newHover2', function in(e, touch){}, function out(e, touch){})
 </code></pre>
 
-<p>notice, that each event gets passed a touch object, besides the normal event object. The Touch object has the following properties:</p>
+<p>notice, that each event gets passed a touch object, besides the normal event object. The Touch object has the following properties: </p>
 
 <ul>
 <li>startTouch: this is where the touch or mousedown event originated</li>