Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<meta name="description" content="Marquee library with jQuery dependency" />
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
  <div id="marquee-me">Yo Wassssup!</div>
  
  
</body>
</html>
 
(function(wndw) {
  var MarqueeModule = function($) {
    
    var _private = {
      defaults: {
        'direction': 'forwards',  // 'forwards' or 'backwards',
        'distance' : '10' // any integer
      },
      getOrMakeMarquee: function(elem, options) {
        var marquee = $(elem).data('marquee.object');
        if (marquee && marquee.constructor == Marquee.prototype.constructor) {
          if (options) _private.customizeMarquee.call(marquee, options);
          return marquee;
        } else {
          marquee = new Marquee($(elem), options);
          $(elem).data('marquee.object', marquee);
          return marquee;
        }
      },
      customizeMarquee: function(options) {
        var dataDefaults = {};
        for (var optKey in _private.defaults) {
          dataDefaults[optKey] = this.$elem.attr('data-marquee-' + optKey);
        }
        this.options = $.extend({}, _private.defaults, dataDefaults, options);
        this.direction = this.options.direction;
      },
      moveItMoveIt: function() {
        var currentLeft = parseInt(this.$elem.css('left'), 10);
        if (currentLeft > $(window).width()) {
          this.direction = 'backwards';
          this.fire('reverse');
        } else if (currentLeft < 0) {
          this.direction = 'forwards';
          this.fire('reverse');
        }
        if (this.direction == 'forwards') {
          newLeft = (currentLeft + parseInt(this.options.distance, 10));
        } else {
          newLeft = (currentLeft - parseInt(this.options.distance, 10));
        }
        this.$elem.css('left', newLeft + 'px');
      }
    };
    
    
    function EventTarget(){
      this._listeners = {};
    }
    EventTarget.prototype = {
      
      constructor: EventTarget,
      
      on: function(type, listener){
        if (typeof this._listeners[type] == "undefined"){
          this._listeners[type] = [];
        }
        this._listeners[type].push(listener);
      },
      
      fire: function(eventName){
        event = {type: eventName};
        if (!event.target){
          event.target = this;
        }
        
        if (this._listeners[event.type] instanceof Array){
          var listeners = this._listeners[event.type];
          for (var i=0, len=listeners.length; i < len; i++){
            listeners[i].call(this, event);
          }
        }
      }
    };
    
    var Marquee = function(elem, options) {
      this.$elem = $(elem);
      
      this.$elem.css('position', 'relative');
      this.$elem.css('left', '0px');
      
      EventTarget.call(this);
      
      _private.customizeMarquee.call(this, options);
      
      var self = this;
      this.moveTimer = window.setInterval(function() {_private.moveItMoveIt.call(self);}, 50);
    };
    
    Marquee.prototype = new EventTarget();
    Marquee.prototype.constructor = Marquee;
    
    Marquee.prototype.stop = function() {
      window.clearInterval(this.moveTimer);
    };
    
    var _public = function(el, options) {
      return _private.getOrMakeMarquee(el, options);
    };
    _public.start = function(elem) {
      var $elem = $(elem);
      if ($elem.data('marquee-initialized')) {
        return;
      } else {
        $elem.data('marquee-initialized', 1);
      }
      $elem.find('[data-marquee]').each(function(elem) {
        _public(elem);
      });
    };
    
    _public.start(document.body);
    
    return _public;
  };
  
  
  if (typeof define === "function" && define.amd) {
    define(["jquery"], function($) {
      return MarqueeModule($);
    });
  } else if (typeof window !== "undefined" && typeof ender === "undefined") {
    wndw.Marquee = MarqueeModule(wndw.$);
  }
  
})(window);
var marquee = new Marquee(document.getElementById('marquee-me'), {direction: 'forwards'});
marquee.on('reverse', function() {
  document.getElementById('marquee-me').innerHTML = marquee.direction;
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
pamelafoxpro
0viewers