<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
#page {
width: 600px;
height: 450px;
padding: 20px;
border: 1px solid #333;
overflow: hidden;
}
#page p {
margin-bottom: 1em;
}
#page p:last-child {
background: yellow;
}
</style>
</head>
<body>
<div id="page">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec molestie semper convallis. Vivamus laoreet eros quis massa faucibus a posuere lacus volutpat. Ut vitae turpis pretium mauris vulputate volutpat. Nulla eget neque nec arcu auctor sollicitudin quis quis lectus. Aliquam magna orci, pulvinar ut ullamcorper quis, ornare eget justo. Ut vitae ligula nec diam fermentum imperdiet. Integer id semper arcu. Aenean congue tellus sit amet enim pulvinar consequat. Suspendisse auctor laoreet dui sed luctus. Cras facilisis condimentum metus eu feugiat. Nulla in eros id turpis pretium interdum vel sit amet justo. Vestibulum sed tincidunt lacus. Donec nec purus nibh, vel dapibus libero. Praesent convallis, urna sed dignissim tincidunt, risus risus dictum ante, eget elementum ligula sem vitae purus.
</p>
<p>
Suspendisse quis mi blandit sapien congue euismod. Nunc eu tortor ante, quis eleifend neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque tempor libero et enim dictum sit amet auctor turpis bibendum. Fusce arcu quam, gravida a rutrum vitae, interdum quis ante. Mauris ac augue sit amet dolor lacinia placerat a posuere metus. Vestibulum in dolor a velit semper varius vitae non neque. Donec nulla erat, pretium eleifend dapibus at, facilisis at orci. Nulla elementum dolor sed ante porttitor at accumsan felis gravida. Duis lacinia turpis a nunc imperdiet sed hendrerit felis aliquam.
</p>
<p>
Curabitur feugiat nisi in orci sollicitudin congue. In quis viverra velit. Vestibulum ultricies bibendum libero, ut hendrerit justo elementum vel. In neque ligula, suscipit ac mollis eu, convallis sit amet elit. Aenean nec nulla sem, vitae pulvinar quam. Donec molestie vestibulum viverra. Sed odio augue, pretium ullamcorper feugiat eu, pretium a arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean posuere, est in venenatis egestas, massa velit aliquam enim, in facilisis est turpis ac justo. Fusce ut tristique justo. Suspendisse molestie ipsum sed urna ultrices sit amet vulputate arcu commodo. Aliquam erat volutpat. Vivamus eu erat vitae lectus gravida fermentum sed vitae felis. Nam sollicitudin commodo auctor. Vestibulum id nisl vel turpis pellentesque convallis quis ac magna. Duis dictum, turpis sit amet gravida tincidunt, sem quam gravida leo, scelerisque commodo lorem neque et lectus. Proin ut nibh ac libero viverra suscipit nec id ipsum. Nulla dignissim tincidunt iaculis. In at gravida leo. Curabitur ac nunc nibh.
</p>
<p>
Phasellus egestas suscipit lobortis. Suspendisse in enim ut neque venenatis consequat. Donec aliquet mauris ultricies sem aliquam sed adipiscing ipsum auctor. Vestibulum condimentum, sapien at vestibulum porttitor, neque dolor malesuada augue, eu viverra nulla velit sed nulla. Integer non dolor enim, vel convallis massa. Maecenas in lacus sit amet massa facilisis dignissim sit amet at nunc. In hac habitasse platea dictumst. Donec arcu ante, pellentesque sed pellentesque vel, viverra eu nisi. Suspendisse ac arcu nec eros blandit egestas non vel lorem. Maecenas mi est, eleifend ac pharetra tincidunt, dapibus luctus ipsum. Donec a augue ac mauris volutpat posuere a quis nibh. Sed malesuada placerat mi at volutpat. Donec eleifend euismod molestie. Integer molestie ullamcorper arcu, ut pharetra nibh commodo nec. Mauris leo libero, porta nec condimentum in, ultricies vitae felis. Etiam nisi nunc, volutpat non ultricies ut, tristique a sapien. Ut suscipit rhoncus lectus, blandit imperdiet justo dapibus ut. Mauris venenatis posuere gravida. Sed et massa vitae lorem laoreet sagittis.
</p>
<p>
Nam et ante mauris. Donec laoreet mi id massa vestibulum quis tristique mauris commodo. Duis commodo mi ut nibh malesuada et pellentesque ligula vestibulum. Suspendisse porttitor, nulla eget tincidunt lacinia, libero felis lacinia sem, sit amet euismod mauris arcu vel neque. Suspendisse nibh massa, pharetra id accumsan vel, ornare quis nibh. Quisque diam sem, vehicula in blandit id, imperdiet vel eros. Maecenas risus mauris, eleifend rutrum dapibus non, lacinia eu velit. Duis malesuada dignissim urna, sed fringilla odio ullamcorper vitae. Sed ut urna a urna interdum tristique. Etiam eu pellentesque massa. Proin consectetur bibendum justo at condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla interdum posuere augue a fringilla. Pellentesque eget turpis sapien.
</p>
<p>
Nullam scelerisque leo et enim sodales lobortis. Aliquam egestas sagittis leo quis lobortis. Pellentesque aliquet, neque et suscipit adipiscing, mi diam venenatis eros, nec scelerisque eros elit vitae diam. Morbi sagittis dui eu enim placerat fringilla. Integer sed arcu vitae dui semper eleifend. Praesent fermentum posuere enim, sit amet viverra ipsum consectetur id. Proin eget neque nunc. Sed eu tortor eget ligula interdum adipiscing. Aenean vitae erat lectus, sed dapibus risus. Aenean eget lorem vitae libero vulputate lacinia.
</p>
<p>
Ut id felis at libero semper aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus sed nulla sed arcu dapibus posuere. Aenean at imperdiet est. Vivamus sem tortor, posuere sit amet faucibus lacinia, sollicitudin in urna. Ut at pulvinar sem. Nulla imperdiet consectetur bibendum. Praesent vehicula est in purus dignissim consectetur. Etiam et elit sit amet risus tempor commodo ut a orci. Nullam viverra facilisis urna eget commodo. Nunc eu quam vel massa congue ultrices vitae quis urna.
</p>
<p>
Vestibulum consectetur dui a metus ullamcorper aliquam. Aenean lacus tellus, ullamcorper id aliquam ac, scelerisque id quam. Fusce nisl quam, semper sed placerat nec, eleifend vel lacus. Suspendisse est nibh, dignissim at porttitor vel, ornare nec lectus. Nunc pretium felis vel urna sollicitudin sit amet vestibulum arcu iaculis. Sed commodo dictum lacus ac dictum. Nunc arcu quam, aliquet vitae vulputate ut, vehicula id felis. Morbi dictum lobortis dictum. Vestibulum dignissim est sit amet leo faucibus interdum aliquet elit sodales. Nam imperdiet lorem vitae urna vulputate vel porttitor purus euismod.
</p>
<p>
Aenean augue dui, volutpat id gravida sed, gravida at nisi. Nulla tempus tortor sed ligula aliquam vehicula. Pellentesque vestibulum, neque eget vulputate suscipit, lacus odio consequat nisi, placerat iaculis diam libero eu urna. Vivamus ullamcorper pulvinar porttitor. Nam accumsan urna non nisi laoreet et laoreet nisi blandit. Quisque pellentesque eros ac turpis mattis porta. Vivamus commodo, sapien sed mollis venenatis, risus tortor tincidunt nibh, sed accumsan justo quam eu metus. Proin at volutpat leo. Nullam nibh libero, malesuada a porta vitae, bibendum in enim. Ut eu nisi nunc, id consectetur urna. Curabitur pretium dignissim enim ac consectetur. Phasellus a leo urna, sed fermentum purus. Nunc egestas ante ac magna sagittis iaculis. Fusce ultricies justo eget nisi semper eu ultricies est gravida. Quisque sem nisl, mattis posuere lobortis vitae, ullamcorper vestibulum mi. Sed vel nisl neque. Donec sapien erat, dapibus at dictum ac, auctor at elit. Ut vel commodo leo. Pellentesque massa libero, sagittis nec iaculis eu, semper sed dui. Nullam mollis dui a metus mollis sodales.
</p>
<p>
Etiam eu justo nunc. Donec sem metus, lobortis ac dignissim et, pellentesque nec elit. Praesent a tellus nisl, in feugiat odio. Nullam sit amet turpis nulla. Sed vitae enim erat. Sed iaculis sapien quis nisl hendrerit venenatis. Pellentesque volutpat tristique nunc id vulputate. Aenean porta elementum nulla sed adipiscing. Sed dictum malesuada metus a tempus. Quisque faucibus, neque non pharetra pharetra, risus dolor congue turpis, id ullamcorper quam massa et ipsum. Sed sollicitudin facilisis lacus ac condimentum. Morbi aliquet condimentum vulputate. Sed et dui turpis, quis sollicitudin purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi sed tristique nisl. Vivamus dictum pulvinar leo, id pretium lectus pretium vel. Nullam interdum, arcu id volutpat pellentesque, nisl nisi pretium orci, et ultrices purus velit eget augue. Duis sem risus, aliquet vehicula malesuada a, tincidunt non magna. Aliquam erat volutpat.
</p>
<p>
Proin justo nisi, scelerisque et dictum porttitor, suscipit in purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pulvinar nisi eget eros consectetur nec vulputate odio tempus. Quisque ut fringilla nulla. Cras non gravida ante. Proin feugiat, sapien a facilisis egestas, lectus lectus fringilla purus, fermentum lobortis elit ipsum vitae urna. Vivamus id nisi nec erat iaculis gravida condimentum sed mi. Sed sagittis arcu fringilla orci tempus molestie. Vestibulum in est mi. Sed aliquet felis vel lacus dapibus gravida. Nullam aliquam tristique nibh eu eleifend.
</p>
</div>
</body>
</html>
var pageScroll = (function() {
var $page,
$next,
$prev,
canScroll = true,
textHeight,
scrollHeight;
var init = function() {
$page = $('#page');
// reset text
$page.scrollTop(0);
textHeight = $page.outerHeight();
scrollHeight = $page.attr('scrollHeight');
if (textHeight === scrollHeight) { // not enough text to scroll
return false;
};
$page.after('<div id="page-controls"><button id="page-prev">prev</button><button id="page-next">next</button></div>');
$next = $('#page-next');
$prev = $('#page-prev');
$prev.hide();
$next.click(scrollDown);
$prev.click(scrollUp);
};
var scrollDown = function() {
if ( ! canScroll) return;
canScroll = false;
var scrollTop = $page.scrollTop();
$prev.fadeIn(500);
if (scrollTop == textHeight) { // can we scroll any lower?
$next.fadeOut(500);
}
$page.animate({ scrollTop: '+=' + textHeight + 'px'}, 500, function() {
canScroll = true;
});
};
var scrollUp = function() {
$next.fadeIn(500);
$prev.fadeOut(500);
$page.animate({ scrollTop: 0}, 500);
};
$(document).ready(init);
return {
scrollDown: scrollDown
};
}());
$(function() {
$('body').append('<span id="push">PUSH ME</span>');
$('#push').click(function() {
pageScroll.scrollDown();
});
});
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. |