Skip to content

Instantly share code, notes, and snippets.

@shmeadyy
Created November 5, 2013 19:25
Show Gist options
  • Save shmeadyy/7324662 to your computer and use it in GitHub Desktop.
Save shmeadyy/7324662 to your computer and use it in GitHub Desktop.
Creating Post-its with Javascript
<html>
<head>
<title>Post-It Board</title>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body id="board">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script src="post-it.js"></script>
</body>
</html>
var postNumber = 0
var Board = function( selector ) {
var $elem = $( selector );
function initialize() {
$elem.on("click", newPostIt);
};
initialize();
};
var PostIt = function() {
function initialize() {
$("#board").append('<div class="post-it" id="'+postNumber+'"><div class="header"><a href="#">X</a></div><div contenteditable="true" class="content"></div></div>')
$("#"+postNumber).css({'top': event.pageY, 'left': event.pageX});
$(".post-it").draggable({handle: ".header"});
$(".content").on("click", stopPostItCreation);
$("a").on("click", deletePostIt);
};
function stopPostItCreation(e){
e.stopPropagation();
};
function deletePostIt(e){
e.stopPropagation();
var $parent = $(this.parentElement.parentElement);
$parent.remove();
};
initialize();
};
$(function() {
new Board('#board');
});
function newPostIt() {
new PostIt;
postNumber += 1;
};
#board {
font-family: monospace;
background-color: #96CDCD;
margin: 0;
padding: 0;
position: relative;
}
.post-it {
position: absolute !important;
width: 160px;
background-color: #FEF1B5;
box-shadow: -2px 2px 5px #555;
overflow: hidden;
}
.post-it .header {
background-color:#FEE5AC;
text-align: right;
padding: 2px;
}
.post-it .header:hover {
background-color: #FFFACD;
}
.post-it .header a, .post-it .header a:visited {
text-decoration: none;
color: #603311;
font-weight: bold;
}
.post-it .header a:hover {
color: #D19275;
}
.post-it .content {
padding: 10px;
min-height: 70px;
outline: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment