<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style type="text/css">
#container {
width: 320px;
height: 240px;
position: relative;
margin: 0;
padding: 0;
}
.border { background: silver; position: absolute; }
.borderh { height: 0px; border: 1px solid black; }
.borderv { width: 0px; border: 1px solid black; }
#topbar {
left: 0px; top: 0px;
}
#rightbar {
right: 0px; top: 0px;
}
#bottombar {
right: 0px; bottom: 0px;
}
#leftbar {
left: 0px; bottom: 0px;
}
#content {
position: absolute;
top: 2px;
left: 2px;
/* border-divs are 0px wide with 1px border all around, thus have a width & height of 2px (twice the border-width) -- 2 border-divs = 4 less pixels for the content ! */
width: 316px;
height: 236px;
background: whitesmoke;
overflow: auto;
text-shadow: 0 0 1px #555;
text-align: justify;
}
</style>
</head>
<body>
<div id="container">
<div class="border borderh" id="topbar"></div>
<div class="border borderv" id="rightbar"></div>
<div class="border borderh" id="bottombar"></div>
<div class="border borderv" id="leftbar"></div>
<div id="content">
<p>Lorem ipsum dolor sit amet, patris super pariter irrationabile navium praesentari ad per animum pares terris quod tamen ait. Convivium meum filiam sunt amore nec appellarer in deinde cepit roseo ruens sed dominum vidit Dionysiadi. Magna aliter nata dum autem quod non solutionem innocentem tantusque amorem infirmata dictum in fuerat construeret in lucem. Fulgor infaustissimi eum istam vero diam dominum vidit Dionysiadi. Athenagoram homo certe est se ad te ad per accipere! Ardalio nos in modo invenit quasi nomen accidentia sibi adsedit. Stet consequat eiusdem ea communia ei. Bene ventis non coepit contingere vasculo usque vero rex ut diem finito servis rex Stranguillio ut a.</p>
</div>
</div>
</body>
</html>
$(function() {
$(".border, #content").hide();
$("#topbar").show();
$("#topbar").animate({width: "318px"},1000, function() {
$("#rightbar").show();
$("#rightbar").animate({height: "238px"},1000, function() {
$("#bottombar").show();
$("#bottombar").animate({width: "318px"},1000, function() {
$("#leftbar").show();
$("#leftbar").animate({height: "238px"},1000, function() {
$("#content").fadeIn(1000);
});
});
});
});
});
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. |