Update examples, update transition error

dist/semantic.js

@@ -18947,6 +18947,7 @@ $.fn.visibility = function(parameters) {
             module.verbose('Setting up fixed on element pass');
             settings.once = false;
             settings.onTopPassed = function() {
+              console.log('here');
               $module
                 .addClass(className.fixed)
                 .css({
@@ -18960,6 +18961,7 @@ $.fn.visibility = function(parameters) {
               }
             };
             settings.onTopPassedReverse = function() {
+              console.log('there');
               $module
                 .removeClass(className.fixed)
                 .css({
@@ -19730,8 +19732,8 @@ $.fn.visibility = function(parameters) {
         if(instance === undefined) {
           module.initialize();
         }
-        instance.save.scroll();
-        instance.save.calculations();
+        //instance.save.scroll();
+        //instance.save.calculations();
         module.invoke(query);
       }
       else {
@@ -19754,8 +19756,8 @@ $.fn.visibility.settings = {
   name                   : 'Visibility',
   namespace              : 'visibility',
 
-  debug                  : false,
-  verbose                : false,
+  debug                  : true,
+  verbose                : true,
   performance            : true,
 
   // whether to use mutation observers to follow changes

examples/basic.html

@@ -33,11 +33,21 @@
   <div class="row">
     <div class="column">
       <h1 class="ui header">Buttons</h1>
-      <a class="ui button">Default</a>
-      <a class="ui primary button">Primary</a>
-      <a class="ui basic button">Basic</a>
-      <a class="ui positive button">Success</a>
-      <a class="ui negative button">Error</a>
+      <a class="ui button" tabindex="0">
+        Default
+      </a>
+      <a class="ui primary button" tabindex="0">
+        Primary
+      </a>
+      <a class="ui basic button" tabindex="0">
+        Basic
+      </a>
+      <a class="ui positive button" tabindex="0">
+        Success
+      </a>
+      <a class="ui negative button" tabindex="0">
+        Error
+      </a>
     </div>
   </div>
   <div class="row">
@@ -51,13 +61,13 @@
     <div class="column">
       <h1 class="ui header">Dropdown</h1>
       <div class="ui divider"></div>
-      <div class="ui selection dropdown">Dropdown
+      <div class="ui selection dropdown">
+        <input type="hidden" name="selection">
         <i class="dropdown icon"></i>
+        <div class="default text">Select</div>
         <div class="menu">
-          <div class="item active">Action</div>
-          <div class="item">Another action</div>
-          <div class="item">Something else here</div>
-          <div class="item">One more link</div>
+          <div class="item" data-value="male">Male</div>
+          <div class="item" data-value="female">Female</div>
         </div>
       </div>
       <div class="ui vertical menu">
@@ -420,7 +430,10 @@
 <script>
 $(document)
   .ready(function() {
-    $('.ui.dropdown').dropdown();
+    $('.ui.selection.dropdown').dropdown();
+    $('.ui.menu .dropdown').dropdown({
+      on: 'hover'
+    });
   })
 ;
 </script>

examples/sticky-menu.html

@@ -23,6 +23,10 @@
   <link rel="stylesheet" type="text/css" href="../dist/components/segment.css">
   <link rel="stylesheet" type="text/css" href="../dist/components/dropdown.css">
   <link rel="stylesheet" type="text/css" href="../dist/components/icon.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/transition.css">
+
+  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
+  <script src="../dist/semantic.js"></script>
 
   <style type="text/css">
   body {
@@ -32,7 +36,7 @@
     margin-right: 1.5em;
   }
   .main.container {
-    margin-top: 7em;
+    margin-top: 2em;
   }
   .wireframe {
     margin-top: 2em;
@@ -41,19 +45,41 @@
     margin: 5em 0em 0em;
     padding: 5em 0em;
   }
+  .main.menu {
+    margin-top: 4em;
+    border-radius: 0;
+    border: none;
+    box-shadow: none;
+    transition:
+      box-shadow 0.5s ease
+    ;
+  }
+  .main.menu.fixed {
+    border: 1px solid #DDD;
+    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
+  }
+  .main.menu.fixed + .container {
+    margin-top: 60px;
+  }
   </style>
 
 </head>
 <body>
 
-  <div class="ui fixed inverted menu">
-    <div class="ui container">
+  <div class="ui main text container">
+    <h1 class="ui header">Semantic UI Fixed Template</h1>
+    <p>This is a basic fixed menu template using fixed size containers.</p>
+    <p>A text container is used for the main container, which is useful for single column layouts</p>
+  </div>
+
+
+  <div class="ui main menu">
+    <div class="ui text container">
       <div href="#" class="header item">
-        <img class="logo" src="images/logo.png">
         Project Name
       </div>
       <a href="#" class="item">Home</a>
-      <a href="#" class="ui simple dropdown item">
+      <a href="#" class="ui dropdown item">
         Dropdown <i class="dropdown icon"></i>
         <div class="menu">
           <div class="item">Link Item</div>
@@ -74,10 +100,7 @@
     </div>
   </div>
 
-  <div class="ui main text container">
-    <h1 class="ui header">Semantic UI Fixed Template</h1>
-    <p>This is a basic fixed menu template using fixed size containers.</p>
-    <p>A text container is used for the main container, which is useful for single column layouts</p>
+  <div class="ui text container">
     <img class="wireframe" src="images/wireframe/media-paragraph.png">
     <img class="wireframe" src="images/wireframe/paragraph.png">
     <img class="wireframe" src="images/wireframe/paragraph.png">
@@ -132,6 +155,18 @@
       </div>
     </div>
   </div>
+  <script>
+  $(document)
+    .ready(function() {
+      $('.main.menu').visibility({
+        type: 'fixed'
+      });
+      $('.main.menu  .ui.dropdown').dropdown({
+        on: 'hover'
+      });
+    })
+  ;
+  </script>
 </body>
 
 </html>

src/definitions/modules/transition.js

@@ -1002,7 +1002,7 @@ $.fn.transition.settings = {
 
   // possible errors
   error: {
-    noAnimation : 'There is no css animation matching the one you specified.',
+    noAnimation : 'There is no css animation matching the one you specified. Please make sure your css is vendor prefixed, and you have included transition css.',
     repeated    : 'That animation is already occurring, cancelling repeated animation',
     method      : 'The method you called is not defined',
     support     : 'This browser does not support CSS animations'