<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<dl>
<dt>Lorem ipsum</dt>
<dd>Dit is een dummy tekst die wordt gebruikt door veel webdesigners...</dd>
<dt>Grumpy wizard...</dt>
<dd>Deze dummy tekst wordt vaak gebruikt door typedesigners, aangezien deze zin alle letters van het alfabet bevat...</dd>
</dl>
</body>
</html>
dd, dt, dl {
margin: 0;
}
dt {
font-weight: bold;
}
dd {
height: 100px;
display: none;
}
!function() {
// window.requestAnimatieFrame is de nieuwste en beste functie
// voor aniamties. Helaas is deze nog in beta mode, waardoor we
// met prefixes moeten werken. Deze functie lost dit automatisch
// voor ons op.
// Zodra het helemaal niet ondersteund wordt wordt de standaard
// tijd gebruikt, 1000/ 60 miliseconden.
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
// zelfde als hierboven voor het stoppen van een animatie
window.cancelAnimFrame = (function(){
return window.cancelAnimationFrame ||
window.webkitCancelAnimationFrame ||
window.mozCancelAnimationFrame ||
window.oCancelAnimationFrame ||
window.msCancelAnimationFrame ||
function(requestID){
window.clearTimeout(requestID);
};
})();
// haal alle dt elementen op
var dts = document.querySelectorAll('dt');
// forEach loop in JavaScript
[].forEach.call(dts, function(dt, i) {
// zodra erop geklikt wordt
dt.onclick = function(e) {
// e komt van de parameter in het event (zie de callback functie)
// met preventDefault() voorkomen we dat
// de standaard actie => meteen laten zien
// wordt uitgevoerd
e.preventDefault();
// this is het huidge element waarop geklikt
// wordt.
// haal het hierbij horende dd element op
dd = this.nextElementSibling;
// we beginnen met een height van 0
height = 0;
// we gaan naar een height van 100px
toHeight = 100;
// zet de height op de min height
dd.style.height = height + 'px';
// zet de display op block
// element wordt toch nog niet zichtbaar
// aangezien de height 0 is
dd.style.display = 'block';
// met overflow: hidden voorkomen we dat de tekst al zichtbaar wordt
dd.style.overflow = 'hidden';
// functie om te animeren
function animate() {
// ++var betekend variabel += 1
// zolang deze kleiner of groter
// is dan de max height gaan we door
if (++height <= toHeight) {
// set de height tot het volgende element
dd.style.height = height + 'px';
console.log(height);
// maak een animate, roep deze function
// om de x aantal miliseconden aan.
// het browser bepaald wat het beste is
// voor de vloeiendste animatie
animatie = window.requestAnimFrame(animate);
} else {
// stop de animate
window.cancelAnimFrame(animatie);
}
}
// begin met animeren
animate();
return false;
};
});
}();
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. |