Updating samples / demo

Author: carloscabo

README.md

@@ -3,13 +3,15 @@ JQuery Autohide plugin
 
 Jquery plugin to show / hide / autohide elements, like shopping carts or help bubbles, megadrop menus. That elements' visibility is triggered from another element... usually a button, menu item, etc.
 
+<h3>[View demo]()<h3>
+
 ![Smaple snapshop](https://raw.github.com/carloscabo/jquery-autohide-plugin/master/sample-image.png)
 
 ## 1. Concepts / naming
 
-`$source` elements originating the events. Usually button, menu items, etc.
+`$source` element(s) originating the events. Usually button, menu items, etc.
 
-`$target` elements to be shown when the event is triggerered from a `$source` element. Usually a menu / information overlay... etc.
+`$target` elements **to be shown when the event is triggerered** from a `$source` element. Usually a menu / information overlay... etc.
 
 `timeout` time (in miliseconds) until the `$target` element autohides.
 
@@ -22,9 +24,9 @@ We have a `$souce` element ( `#element-to-click` ), that when the default event
 `$target` element will autohide with a timeout ( default is 1500ms ).
 
 ```javascript
-$('#element-to-click').autohide_timeout({
-  // timeout: 1000,
-  $target: $('#single-bubble-content')
+$('#element-to-be-clicked').autohide_timeout({
+  // timeout: 1500, // Default
+  $target: $('#conten-to-be-shown')
 });
 ```
 
@@ -41,6 +43,7 @@ $('#element-to-click').autohide_timeout({
     events: 'mouseenter',
 
     // Timeout until the 'onTimeout' function is launched
+    // Default is 1500
     timeout: 2000,
 
     // $source is used to have several interactive children
@@ -91,8 +94,8 @@ $('#element-to-click').autohide_timeout({
 
 ### 3. Hidding $target element from JS
 
-You can force the 
-
-## Demos
+You can force the closing event from JS using:
 
-Take a look to the demos to see some typical usage scenarios.
+```javascript
+$(element).data('plugin_autohide_timeout').settings.onTimeout();
+```

css/application.css

@@ -59,11 +59,13 @@ li.active {
   color: #000;
 }
 
-#single-bubble-button {
+.single-bubble {
   position: relative;
+  display: inline-block;
+  margin-right: 20px;
 }
 
-#single-bubble-content {
+.single-bubble-content {
   display: none;
   position: absolute;
   width: 300px; /* height: 150px; */
@@ -73,7 +75,7 @@ li.active {
   z-index: 9;
 }
 
-#single-bubble-content p {
+.single-bubble-content p {
   margin: 0;
 }
 

index.html

@@ -17,12 +17,20 @@
   <h3 id="section-sample-1">Sample #1. #single-bubble-button</h3>
   <p>Easiest sample, simple show / hide element binding link with #ID and content layer with another <b>unique #ID</b></p>
 
-  <span id="single-bubble-button"><a href="#">Simple bubble on-click</a>
-    <div id="single-bubble-content">
+  <span class="single-bubble" id="single-bubble-button-a"><a href="#">Simple bubble on-click</a>
+    <div class="single-bubble-content" id="single-bubble-content-a">
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, beatae. Tempore autem, eveniet nulla voluptate culpa commodi magni!</p>
     </div>
   </span>
 
+  <span class="single-bubble" id="single-bubble-button-b"><a href="#">Simple bubble on-click, timeout 10s</a>
+    <div class="single-bubble-content" id="single-bubble-content-b">
+      <p><b>Waits 10s then closes.</b><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, beatae. Tempore autem, eveniet nulla voluptate culpa commodi magni!</p>
+    </div>
+  </span>
+
+  <span id="close-both-bubbles">Force close both bubles!</span>
+
   <hr>
 
   <h3 id="section-sample-2">Sample #2</h3>
@@ -143,7 +151,7 @@ <h3 id="section-sample-4">Sample #4. Megadrop</h3>
 <br>
 <hr>
 
-<h3 id="section-sample-4">Sample #5. Megadrop slide-up/down</h3>
+<h3 id="section-sample-4">Sample #5. Megadrop slide-down</h3>
 <p>Another common scenario, several megadrops, outside the nav container slided-down / up with jQuery</p>
 
 <ul id="sample-5-megadrop">

js/jquery.autohide.js

@@ -126,9 +126,9 @@ $('.element-to-hide-show').autohide_timeout({
       return $target;
     }, // getTarget
 
-    close: function() {
-
-    } // close
+    destroy: function() {
+      // To do
+    } // destroy
 
   } );
 

js/ready.js

@@ -4,9 +4,21 @@ $(document).ready(function() {
 
   // ----------------------------------
   // Smaple #1
-  $('#single-bubble-button > a').autohide_timeout({
+  $('#single-bubble-button-a > a').autohide_timeout({
     timeout: 1000,
-    $target: $('#single-bubble-content')
+    $target: $('#single-bubble-content-a')
+  });
+
+  $('#single-bubble-button-b > a').autohide_timeout({
+    timeout: 10000,
+    events: 'click mouseenter',
+    $target: $('#single-bubble-content-b')
+  });
+
+  $('#close-both-bubbles').on('click', function(e){
+    $('.single-bubble > a').each(function( idx, el ){
+      $(el).data('plugin_autohide_timeout').settings.onTimeout();
+    })
   });
 
   // ----------------------------------
@@ -119,14 +131,14 @@ $(document).ready(function() {
       // console.log( $target );
       $source.closest('ul').find('.active').removeClass('active');
       $source.parent('li').addClass('active');
-      $('.megadrop-wrapper-5 .megadrop').slideUp();
-      $target.slideDown();
+      $('.megadrop-wrapper-5 .megadrop').not($target).stop().fadeOut();
+      $target.stop().slideDown();
     },
     // What to do when is timeout is triggered
     onTimeout: function( $source, $target, event ) {
       // console.log( $source );
       $source.parent('li').removeClass('active');
-      $('.megadrop-wrapper-5 .megadrop').slideUp();
+      $('.megadrop-wrapper-5 .megadrop').stop().slideUp();
     }
   });