Fire JS Bin - microNotes

You can jump to the latest bin by adding /latest to your URL

Find

⟲

Replace

$(document).ready(function () {
  loadNotes();
  $("#addNewLink .link").click(function (e) {
    $(this).select();
  });
  $(".top").click(function () {
    var parent = $(this).parent();
    if (parent.css('height') == "175px") {
      parent.animate({
        "height": "25px"
      });
    } else {
      parent.animate({
        "height": "175px"
      }, "fast", null, function () {
        if (parent.attr("id") == "addNewLink") $("#addNewLink .note").focus();
      });
    }
  });
  $(".add").click(function () {
    addNote(null, "#linkList");
  });
  $(".delete").live("click", deleteNote);
});
$(window).unload(function () {
  saveNotes();
});

function addNote(text, target, append) {
  if ($("#addNewLink .note").text() == "" && text == null) return false;
  var note = $("#addNewLink").clone().removeAttr("id").removeAttr("style");
  note.children("header,.add").remove();
  if (text == null) text = $.trim(convertUrls($("#addNewLink .note").html()));
  note.children(".note").removeAttr("contenteditable").html(text);
  if (!append) $(target).prepend(note);
  else $(target).append(note);
  $("#addNewLink .note").text("");
  $("#addNewLink .top").click();
  $("a[href^='http']").attr('target', '_blank');
}

function deleteNote(e) {
  var section = $(e.target).closest("section");
  section.prependTo("#trashList");
  if ($("#trashList").children().size() > 10) {
    $("#trashList").children("section:last").remove();
  }
}

function convertUrls(text) {
  var exp = new RegExp('[\"\'>]*\b(?:(?:https?|ftp|file)://|www\.|ftp\.)[-A-Z0-9+&@#/%=~_|$?!:,.]*[A-Z0-9+&@#/%=~_|$]');
  return text.replace(exp, "<a href='$1' target='_blank'>$1</a>");
}

<!doctype html>
<html lang="en" class="no-js">
  
  <head>
    <meta charset="utf-8">
    <title>microNotes</title>
    <meta name="author" content="Andrew Anderson">
    <meta name="description" content="A quick and easy way to store notes, links, thoughts, and anything else that can be typed in a text box.">
    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
    <link type="text/css" rel="stylesheet" href="/attach/typekit.css" />
  </head>
  
  <body>
    <div id="container">
      <header>microNotes</header>
      <p>
        A quick and easy way to store notes, links, thoughts, and anything else
        that can be typed in a text box. Notes can be moved to the trash which
        is kept trim at a max number of ten items. Notes, including the ones in
        the trash, are stored using localStorage. URLs in the note text are automatically
        turned into links.
      </p>
      <div id="main">
        <section id="addNewLink">
          <header class="top">Add New</header>
          <div contenteditable="true" class="note"></div>
          <button class="btn add">Add</button>
          <button class="btn delete">Del</button>
        </section>
        <section id="linkList"></section>
        <section id="trashBin">
          <header class="top">Trash</header>
          <div id="trashList"></div>
        </section>
      </div>
    </div>
    
    <footer>
      <p>a <a href="http://www.substratalcode.com">substratal code</a> project.</p>
    </footer>
  </body>

</html>

body { font-size:16px; background-color:#f9f5ec; font-family:Arial, sans-serif }
a:link { color:gray }
header { font-size:72px; text-shadow:1px 2px 2px rgba(10, 10, 10, 0.1); display:block }
section { display:block }
footer { font-size:16px; position:fixed; left:5px; bottom:-15px }
#container { margin:0 auto 50px; padding:0 10px; width:600px }
#main { -moz-box-shadow:0 0 5px #91BDD9; -webkit-box-shadow:0 0 5px #91BDD9; box-shadow:0 0 5px #91BDD9; border:1px solid #91BDD9 }
#addNewLink, #trashBin { background-color:#D0C8B9; height:25px; overflow:hidden; z-index:5; border:1px solid #CCC; margin:5px; padding:5px 10px; border:1px solid #aaa; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px }
#addNewLink:hover, #trashBin:hover { background-color:#F0E3CF }
#trashBin { position:fixed; width:577px; bottom:0; margin:0 }
#trashList { overflow:auto; height:150px; font-size:12px; text-shadow:none }
.top { font-size:28px; text-align:right; border-bottom:1px solid #91BDD9; cursor:pointer }
#linkList section, #trashBin section { border-bottom:1px dashed silver; display:block }
#linkList section:last-child { border:none }
#linkList .note { font-family:arial, serif; padding-left:10px }
#linkList section:hover .delete { display:block }
.btn { float:right; border:none; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; padding:3px; margin:-35px 2px 2px 2px; width:40px; cursor:pointer; color:#EEE }
.btn:hover { color:#FFF }
.delete { display:none; color:#CCC; background-color:#b20000; background-image:linear-gradient(top, #c00000, #9c0000); background-image:-moz-linear-gradient(top, #c00000, #9c0000); background-image:-webkit-gradient(linear, left top, left bottom, from(#c00000), to(#9c0000)) }
.add { background-color:#b20000; background-image:linear-gradient(top, #00b51b, #0e6600); background-image:-moz-linear-gradient(top, #00b51b, #0e6600); background-image:-webkit-gradient(linear, left top, left bottom, from(#00b51b), to(#0e6600)) }
.add { -webkit-gradient(linear, 0% 0%, 0% 100%, from(#118f3f), to(#2cbd61)); gradient(linear, 0% 0%, 0% 100%, from(#118f3f), to(#2cbd61)) }
.note { margin:10px 50px 10px 5px }
#addNewLink .note { height:100px; overflow:auto }
.label { color:#888 }
[contenteditable] { outline:1px dotted #aaa; padding:5px }
[contenteditable]:focus { background-color:#FFF }
[contenteditable]:hover { outline:1px dotted #ccc; background-color: #FFF }

footer,header{ font-family:"reenie-beanie-1","reenie-beanie-2",sans-serif; }

Pop out