<html>
<head>
<meta name="description" content="Marquee library with declarative constructor" />
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="marquee-me" data-marquee 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);
};
_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;
};
window.Marquee = MarqueeModule();
})(window);
Output
You can jump to the latest bin by adding /latest
to your URL
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |