Sticky note ♡

solielios

Sep 20th, 2021

3,120

Never

Add comment

Not a member of Pastebin yet? Sign Up, it unlocks many cool features!

text 2.76 KB | None | 1 0

raw download clone embed print report

<body>
<div id="stickynote1">
<div class="closestickynote1">X</div>
<div class="dragstickynote1">> sticky note 1</div>
<div class="stickynotecontent">
Type what you want to put in your sticky note here.
</div>
</div>
</body>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#stickynote1" ).draggable({ handle: "div.dragstickynote1" });
$(".closestickynote1").click(function(){$("#stickynote1").fadeOut();});
});
</script>
</head>
<style>.
#stickynote1 {
width: 180px;
margin-bottom: 20px;
position: fixed;
z-index: 100000000000;
top: 30px; /** position from top of screen **/
left: 30px; /** position from left of screen **/
}
#stickynote1 {
width: 180px; /** width of your sticky note **/
background-color: rgba(165,216,216,0.7); /** background colour **/
}
.dragstickynote1 {
font-family: consolas;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
padding: 10px;
background-color: rgba(255,255,255,0.4);
}
.closestickynote1 {
cursor: pointer;
margin-left: 148px;
width: 32px;
height: 32px;
line-height: 32px;
font-family: arial;
font-size: 10px;
position: absolute;
text-align: center;
float: right;
background-color: rgba(255,255,255,0.4);
}
.stickynotecontent {
padding: 10px;
font-family: consolas;
font-size: 10px;
}
.stickynotecontent b,strong {
color: #000000; /** colour of bolded text **/
}
.stickynotecontent i,em {
color: #666666; /** colour of italic text **/
}
.stickynotecontent a {
text-decoration: underline;
color: #666666; /** colour of linked text **/
}
.stickynotecontent a:hover {
color: #aaaaaa; /** colour of hovered linked text **/
}
</style>
<br><br>
You can add more sticky notes by first editing the scripts from the script in the head tag to apply to the added sticky notes. You should find two lines from the step 01 code that look like the ones below. Just duplicate them and change the number 1 to 2. It should look like:<br><br>
$( "#stickynote1" ).draggable({ handle: "div.dragstickynote1" });
$(".closestickynote1").click(function(){$("#stickynote1").fadeOut();});
$( "#stickynote2" ).draggable({ handle: "div.dragstickynote2" });
$(".closestickynote2").click(function(){$("#stickynote2").fadeOut();});

Add Comment

Please, Sign In to add comment