Created
July 24, 2013 18:55
-
-
Save EdConnell/6073392 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var Board = function( selector ) { | |
| // Your board related code goes here | |
| // Use $elem to access the DOM element for this board | |
| var $elem = $( selector ); | |
| function initialize() { | |
| $elem.droppable({ | |
| accept: ".post-it", | |
| drop: function(event, ui){ | |
| // $elem.html('<div class="post-it">Surprise, Cockbag!</div>') | |
| } | |
| }) | |
| $elem.on('click', function(event) { | |
| var xCoord = event.pageX - this.offsetLeft; | |
| var yCoord = event.pageY - this.offsetTop; | |
| var postIt = new PostIt($elem, xCoord, yCoord); | |
| }); | |
| }; | |
| initialize(); | |
| }; | |
| var PostIt = function(elem, xCoord, yCoord) { | |
| function initialize(){ | |
| elem.append('<div class="post-it" position=fixed style="left:'+(xCoord - 50)+'; top:'+yCoord+';"><div class="header"><a>X</a></div><div class="content" contenteditable="true"></div></div>') | |
| }; | |
| initialize(); | |
| $(".post-it").on('click', function(event){ | |
| //alert(event); | |
| event.stopPropagation()}); | |
| $('.post-it .header').on('mousedown', function(){ | |
| $('.post-it').draggable(); | |
| }) | |
| $('.post-it .header a').on('click', function(){ | |
| $(this).parent().parent().hide(); | |
| }); | |
| }; | |
| $(document).ready(function() { | |
| // This code will run when the DOM has finished loading | |
| new Board('#board'); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #board { | |
| font-family: monospace; | |
| background-color: #9e8d68; | |
| margin: 0; | |
| padding: 0; | |
| position: relative; | |
| } | |
| .post-it { | |
| position: absolute !important; | |
| width: 160px; | |
| background-color: yellow; | |
| box-shadow: -2px 2px 5px #555; | |
| overflow: hidden; | |
| } | |
| .post-it .header { | |
| background-color: #c2c25b; | |
| text-align: right; | |
| padding: 2px; | |
| } | |
| .post-it .header:hover { | |
| background-color: #a8a860; | |
| } | |
| .post-it .header a, .post-it .header a:visited { | |
| text-decoration: none; | |
| color: black; | |
| font-weight: bold; | |
| } | |
| .post-it .header a:hover { | |
| color: #eee; | |
| cursor: pointer; | |
| } | |
| .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