working fader up and running

nolawi · Apr 18, 2017 · 533cdba · 533cdba
1 parent 6704f9e
commit 533cdba
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 55 deletions.
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,17 @@
+
+body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small}select,input,textarea,button{font:99% arial,helvetica,clean,sans-serif}table{font-size:inherit;font:100%}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%}/*
+Copyright (c) 2011, Yahoo! Inc. All rights reserved.
+Code licensed under the BSD License:
+http://developer.yahoo.com/yui/license.html
+version: 2.9.0
+*/
+html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var{font:inherit}del,ins{text-decoration:none}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:baseline}sub{vertical-align:baseline}legend{color:#000}
+
+/*clearfix*/
+.clearfix{zoom:1;}
+.clearfix:after{content:'.';display:block;clear:both;visibility:hidden;height:0;font-size:0;}
+
+/*newsticker*/
+.newsticker{background:#efefe;border-radius:5px;color:#402726;cursor:default;font-family:verdana;font-weight:bold;overflow:hidden;padding:7px 10px 0 10px;width:730px;height:23px;}
+.newsticker:hover{background:#ff9e9a;}
+.newsticker ul li{width:730px;height:30px;overflow:hidden;white-space:nowrap;display:none;}
diff --git a/src/jquery.newsfader.js b/src/jquery.newsfader.js
@@ -6,33 +6,62 @@
  * Licensed under the MIT license.
  */
 
-(function($) {
 
-  // Collection method.
-  $.fn.newsfader = function() {
-    return this.each(function(i) {
-      // Do something awesome to each selected element.
-      $(this).html('awesome' + i);
-    });
-  };
-
-  // Static method.
-  $.newsfader = function(options) {
-    // Override default options with passed-in options.
-    options = $.extend({}, $.newsfader.options, options);
-    // Return something awesome.
-    return 'awesome' + options.punctuation;
-  };
 
-  // Static method default options.
-  $.newsfader.options = {
-    punctuation: '.'
-  };
+(function($) {
+  $.fn.dropdown = function(opts) {
+    // default configuration
+    var config = $.extend({}, { 
+            fadeInTime: 800,
+            fadeOutTime: 800,
+            interval: 5600
+        }, opts);
+    // main function
+    function init(obj) {
+            var dNewsticker = obj;
+            var dFrame = dNewsticker.find('.js-frame');
+            var dItem = dFrame.find('.js-item');
+            var dCurrent;
+            var stop = false;
 
-  // Custom selector.
-  $.expr[':'].newsfader = function(elem) {
-    // Is this element awesome?
-    return $(elem).text().indexOf('awesome') !== -1;
+            dItem.eq(0).addClass('current');
+            dItem.eq(0).show();
+
+            var move = setInterval(function(){
+                if(!stop){
+                    dCurrent = dFrame.find('.current');
+                    dCurrent.fadeOut(config.fadeOutTime, function(){
+                        if(dCurrent.next().length !== 0){
+                            dCurrent.removeClass('current');
+                            dCurrent.next().addClass('current');
+                            dCurrent.next().fadeIn(config.fadeInTime);
+                        }
+                        else{
+                            dCurrent.removeClass('current');
+                            dItem.eq(0).addClass('current');
+                            dItem.eq(0).fadeIn(config.fadeInTime);
+                        }
+                    });
+                }
+            }, config.interval);
+
+            dNewsticker.on('mouseover mouseout', function(e){
+                if(e.type == 'mouseover'){
+                    stop = true;
+                }
+                else{
+                    stop = false;
+                }
+            });
+        }
+    // initialize every element
+    this.each(function() {
+      init($(this));
+    });
+    return this;
   };
-
-}(jQuery));
+  // start
+  $(function() {
+    $('.js-newsticker').dropdown();
+  });
+})(jQuery);
diff --git a/test/newsfader.html b/test/newsfader.html
@@ -11,17 +11,28 @@
   <!-- Load local lib and tests. -->
   <script src="../src/jquery.newsfader.js"></script>
   <script src="newsfader_test.js"></script>
+   <link rel="stylesheet" href="../css/style.css" media="screen">
   <!-- Removing access to jQuery and $. But it'll still be available as _$, if
        you REALLY want to mess around with jQuery in the console. REMEMBER WE
        ARE TESTING A PLUGIN HERE, THIS HELPS ENSURE BEST PRACTICES. REALLY. -->
   <script>window._$ = jQuery.noConflict(true);</script>
+
 </head>
 <body>
   <div id="qunit"></div>
-  <div id="qunit-fixture">
-    <span>lame test markup</span>
-    <span>normal test markup</span>
-    <span>awesome test markup</span>
+  <div id="qunit-fixture" class="newsticker js-newsticker">
+    <ul class="js-frame">
+        <li class="js-item">Google shares top $1,000 after strong earnings.</li>
+        <li class="js-item">Sleep 'cleans' the brain of toxins.</li>
+        <li class="js-item">Amaze project aims to take 3D printing 'into metal age'.</li>
+    </ul>
   </div>
+  <div class="newsticker js-newsticker">
+    <ul class="js-frame">
+        <li class="js-item">Google shares top $1,000 after strong earnings.</li>
+        <li class="js-item">Sleep 'cleans' the brain of toxins.</li>
+        <li class="js-item">Amaze project aims to take 3D printing 'into metal age'.</li>
+    </ul>
+</div>
 </body>
 </html>
diff --git a/test/newsfader_test.js b/test/newsfader_test.js
@@ -33,30 +33,5 @@
     strictEqual(this.elems.newsfader(), this.elems, 'should be chainable');
   });
 
-  test('is awesome', function() {
-    expect(1);
-    strictEqual(this.elems.newsfader().text(), 'awesome0awesome1awesome2', 'should be awesome');
-  });
-
-  module('jQuery.newsfader');
-
-  test('is awesome', function() {
-    expect(2);
-    strictEqual($.newsfader(), 'awesome.', 'should be awesome');
-    strictEqual($.newsfader({punctuation: '!'}), 'awesome!', 'should be thoroughly awesome');
-  });
-
-  module(':newsfader selector', {
-    // This will run before each test in this module.
-    setup: function() {
-      this.elems = $('#qunit-fixture').children();
-    }
-  });
-
-  test('is awesome', function() {
-    expect(1);
-    // Use deepEqual & .get() when comparing jQuery objects.
-    deepEqual(this.elems.filter(':newsfader').get(), this.elems.last().get(), 'knows awesome when it sees it');
-  });
 
 }(jQuery));