jsFiddle
bogotobogo.com site search:
jsFiddle
jsFiddle is an online IDE that's running a browser allowing users to create and execute code written in JavaScript, html, and css. It has features enabling users to learn and demonstrate how JavaScript, HTML, and CSS work together.
Tutorial is available
at doc.jsfiddle.net/tutorial.html.
jsFiddle sample
The following sample is also available from http://jsfiddle.net/khong/8tfwA/1/.
One second after all of the 8 box colored in blue, the javascript timer triggers a event to set the color to red.
html:
<body>
<table>
<tr>
<td><div class="box"></div></td>
<td><div class="box"></div></td>
<td><div class="box"></div></td>
</tr>
<tr>
<td><div class="box"></div></td>
<td></td>
<td><div class="box"></div></td>
</tr>
<tr>
<td><div class="box"></div></td>
<td><div class="box"></div></td>
<td><div class="box"></div></td>
</tr>
</table>
<div class="green"></div>
</body>
jQuery file:
$(document).ready(function(){
$('.box').click( function() {
$(this).addClass("blue");
var n = $("div.box.blue").length;
// check if all boxes are in blue
if (n > 7)
// 1 sec after the last one clicked, make all box red
setTimeout(function() {
$("div.box.blue").css("background", "red");
}, 1000);
} );
} );
cs file
.box{
height:100px;
width:100px;
border:1px solid #000;
margin:10px;
}
.blue{
background:#6A5ACD;
}
.red{
background:#f00!important;
}
.green{
height:24px;
width:24px;
background:#0f0;
position:absolute;
top:185px;
left:185px;
}
Ph.D. / Golden Gate Ave, San Francisco / Seoul National Univ / Carnegie Mellon / UC Berkeley / DevOps / Deep Learning / Visualization
My YouTube channel