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 declarative defaults" />
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
  <div id="marquee-me" data-marquee-direction="backwards" data-marquee-distance="5">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';
        } else if (currentLeft < 0) {
          this.direction = 'forwards';
        }
        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';
      }
    };
    
    var Marquee = function(elem, options) {
      this.elem = elem;
      
      this.elem.style.position = 'relative';
      this.elem.style.left = '0px';
      
      _private.customizeMarquee.call(this, options);
      
      var self = this;
      this.moveTimer = window.setInterval(function() {_private.moveItMoveIt.call(self);}, 50);
    };
    
    Marquee.prototype.stop = function() {
      window.clearInterval(this.moveTimer);
    };
    
    var _public = function(el, options) {
      return _private.getOrMakeMarquee(el, options);
    };
    return _public;
  };
  
  window.Marquee = MarqueeModule();
    
})(window);
   
var marquee = new Marquee(document.getElementById("marquee-me"));
Output

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

Dismiss x
public
Bin info
pamelafoxpro
0viewers