This week only. Pastebin PRO Accounts Christmas Special! Don't miss out!Want more features on Pastebin? Sign Up, it's FREE!
Guest

re: Stackoverflow 9457416

By: a guest on Feb 26th, 2012  |  syntax: HTML 5  |  size: 2.01 KB  |  views: 41  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  5.  
  6.         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  7.         <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  8.  
  9.         <style>
  10.                 #corkboard { position: relative; }
  11.                 #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; }
  12.                 #corkboard img { position: absolute; }
  13.  
  14.                 .corkboard-item {
  15.                         position: absolute;
  16.                         float: left;
  17.                         width: 500px;
  18.                         height: 500px;
  19.                 }
  20.         </style>
  21.  
  22.         <script>
  23.                 $( document ).ready( function() {
  24.                         // Create our corkboard item
  25.                         //
  26.                         $corkboard_item = $( '<div></div>' );
  27.                         $corkboard_item
  28.                                 .addClass( 'corkboard-item' )
  29.                                 .append( '<img src="http://www.bookofsam.com/corkboard/Sticky_Note.png" />' )
  30.                                 .append( '<textarea name="comments" x-webkit-speech="x-webkit-speech">Enter your note</textarea>' );
  31.  
  32.                         // Counter goodness
  33.                         $x = 1;
  34.  
  35.  
  36.                         // Make sure the one we click is always at the top
  37.                         //
  38.                         $( 'img, textarea' ).live( 'click', function( e ) {
  39.                                 e.preventDefault();
  40.  
  41.                                 $( '.corkboard-item' ).each( function() {
  42.                                         $( this ).css({ 'z-index':1 });
  43.                                 });
  44.  
  45.                                 $( this )
  46.                                         .parent()
  47.                                         .css({
  48.                                                 'z-index':2
  49.                                         })
  50.                         });
  51.  
  52.  
  53.                         // Add one when we click the button
  54.                         //
  55.                         $( 'a.add-item' ).live( 'click', function( e ) {
  56.                                 e.preventDefault();
  57.  
  58.                                 var item = $corkboard_item.clone();
  59.                                 $( item )
  60.                                         .find( 'textarea' )
  61.                                         .attr({
  62.                                                 'name' : ( 'comment-' + $x )
  63.                                         });
  64.  
  65.                                 $x++;
  66.  
  67.                                 $("#corkboard").append( $( item ).draggable() );
  68.                         });
  69.                 });
  70.         </script>
  71. </head>
  72. <body>
  73.         <p>CORKBOARD TEST - 0.8.555 </p>
  74.  
  75.         <a href="#" class="add-item"><img src='http://www.bookofsam.com/corkboard/Note_Scale.png' align="right" /></a>
  76.  
  77.         <div id="corkboard"></div>
  78. </html>
clone this paste RAW Paste Data