<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
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. |