Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<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.marqueeObj;
         
        if (marquee && marquee.constructor == Marquee.prototype.constructor) {
          if (options) _private.customizeMarquee.call(marquee, options);
          return marquee;
        } else {
          marquee = new Marquee(elem, options);
          elem.marqueeObj = marquee;
          return marquee;
        }
      },
      customizeMarquee: function(options) {
        this.options = options || {};
        for (var optKey in _private.defaults) {
          if (!this.options[optKey]) {
            var dataDefault = this.elem.getAttribute('data-marquee-' + optKey);
            if (dataDefault) {
              this.options[optKey] = dataDefault;
            } else {
              this.options[optKey] = _private.defaults[optKey];
            }
          }
        }
        this.direction = this.options.direction;
      },
      moveItMoveIt: function() {
        var currentLeft = parseInt(this.elem.style.left, 10);
        if (currentLeft > window.innerWidth) {
          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.style.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.style.position = 'relative';
      this.elem.style.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) {
      if (elem.marqueeInitialized) {
        return;
      } else {
        elem.marqueeInitialized = 1;
      }
      var marqueeElems = elem.querySelectorAll('[data-marquee]');
      for (var i = 0; i < marqueeElems.length; i++) {
        _public(marqueeElems[i]);
      }
    };
    
    _public.start(document.body);
    
    return _public;
  };
  
  
  if (typeof define === "function" && define.amd) {
    define([], function() {
      return MarqueeModule();
    });
  } else if (typeof window !== "undefined" && typeof ender === "undefined") {
    window.Marquee = MarqueeModule();
  }
  
})(window);
var marquee = new Marquee(document.getElementById('marquee-me'));
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