<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style>
#corkboard { position: relative; }
#corkboard textarea { position: absolute; width: 380px; height: 300px; top: 100px; left: 60px; background: none; border: none; font-size: 24px; color: #03f; font-family: 'comic sans ms', serif; }
#corkboard img { position: absolute; }
.corkboard-item {
position: absolute;
float: left;
width: 500px;
height: 500px;
}
</style>
<script>
$( document ).ready( function() {
// Create our corkboard item
//
$corkboard_item = $( '<div></div>' );
$corkboard_item
.addClass( 'corkboard-item' )
.append( '<img src="http://www.bookofsam.com/corkboard/Sticky_Note.png" />' )
.append( '<textarea name="comments" x-webkit-speech="x-webkit-speech">Enter your note</textarea>' );
// Counter goodness
$x = 1;
// Make sure the one we click is always at the top
//
$( 'img, textarea' ).live( 'click', function( e ) {
e.preventDefault();
$( '.corkboard-item' ).each( function() {
$( this ).css({ 'z-index':1 });
});
$( this )
.parent()
.css({
'z-index':2
})
});
// Add one when we click the button
//
$( 'a.add-item' ).live( 'click', function( e ) {
e.preventDefault();
var item = $corkboard_item.clone();
$( item )
.find( 'textarea' )
.attr({
'name' : ( 'comment-' + $x )
});
$x++;
$("#corkboard").append( $( item ).draggable() );
});
});
</script>
</head>
<body>
<p>CORKBOARD TEST - 0.8.555 </p>
<a href="#" class="add-item"><img src='http://www.bookofsam.com/corkboard/Note_Scale.png' align="right" /></a>
<div id="corkboard"></div>
</html>