Post Reply 

Learn How To Make A Sticky Note Web App

Apr 26, 2011, 21:43
Post: #1
Learn How To Make A Sticky Note Web App
Hey what's up you guys Mike here once again, and today I'm gonna show you guys how to make this sticky notes web application.

NOTE: If you're using IE (Internet Explorer) they'll be certain features that won't be available for you in CSS3 like, drop shadows for example. This web app is best viewing in Chrome, Safari, Firefox, and Opera.

So to start off make a new folder on your desktop called "Sticky Notes" and in that folder make an index.html file, as well as a style.css file. Then create a new folder called JS, and make sure to download JQuery, and put the jquery.js file into that folder, as well as doing the same for JQuery UI.

Part 1: The Style Sheet
For our style sheet (style.css) lets first give it a darkish gray background.
Code:
body {
    background:#3a3a3a;}

We'll now make a div called sticky, and this will be our sticky note, and will hold everything we want inside it. We'll give it a width of 200px, a height on 250px the background color to be a lightish yellow sort to speak for the sticky note. We then wanna tell it to not have a scrollbar, cause the textarea (where the text will be positioned) has a default scrollbar inside it so when we exceed past the amount of space given, it'll display a scrollbar. We then wanna give it a drop shadow as well, and we then want the sticky div to be hidden cause we'll call it to display when we click a button via JQuery.

So this is the code we got for what we want above to startout out sticky div.
Code:
div.sticky {
    width:200px;
    height:250px;
    background:#FFFF99;
    overflow:hidden;
    display:none;
    box-shadow:4px 4px 8px #1c1c1c;
    -webkit-box-shadow:4px 4px 8px #1c1c1c;
    -moz-box-shadow:4px 4px 8px #1c1c1c;
    -o-box-shadow:4px 4px 8px #1c1c1c;}

What we wanna do now is increase the sticky divs drop shadow once it's clicked, and we can simply apply that effect with the code below.
Code:
div.sticky:active {
    box-shadow:8px 8px 16px #1c1c1c;
    -webkit-box-shadow:8px 8px 16px #1c1c1c;
    -moz-box-shadow:8px 8px 16px #1c1c1c;
    -o-box-shadow:8px 8px 16px #1c1c1c;}

We now wanna add a div called stickytop and this div will hold our close button we'll make in a bit, but also the name of our sticky note, and separate the textarea from displaying a drop shadow, giving it a nice sleek smooth interface.

So we want our text on out stickytop div class to align centered, the text to be bold, font to be arial, give it some padding to give the top and bottom parts of the div some spacing, and of course a drop shadow.
Code:
div.stickytop {
    text-align:center;
    font-weight:bold;
    font-family:arial;
    padding:10px 0px 10px 0px;
    box-shadow:0px 4px 4px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow:0px 4px 4px rgba(0, 0, 0, 0.3);
    -moz-box-shadow:0px 4px 4px rgba(0, 0, 0, 0.3);
    -o-box-shadow:0px 4px 4px rgba(0, 0, 0, 0.3);}

What we wanna do now is add a textarea with the class stickynotes which is where our text will go. We wanna give it a width of 100% to fill the width of the div, but a height of 84% so it'll fill the div 's height of where it's positioned. As we still wanna be able to close it, and we'll add our close div next. Now textarea's have a border by default so we wanna get rid of that as well as the background color. They also can be resized and we don't want that either. Additionally from where it'll be positioned. We're also gonna add some padding so we can give the text a little indent, and some spacing from where it'll be positioned to make it look a little nicer.
Code:
textarea.stickynotes {
    width:100%;
    height:84%;
    border:0px;
    resize:none;
    background:transparent;
    padding:10px 0px 0px 8px;}

Now we wanna create an a tag with the class stickyclose so we can have a close button on our sticky notes. We wanna position our close button on the top right side of our sticky note. However we want it to display 4px down from the top, and 5px on the right. We wanna give it a width of 15px, and a height on 14px. We want the font size to be 10px, as we'll be using "X" for the close button, and our font style will be "Times New Roman". We'll then indent that text by 4px to fit inside the div, color the text white, and because it's an a tag it'll state it's a link so we don't want it to be underlined, and we want the hand cursor to be displayed when our cursor goes into that div.

We want the background color to be black, as well as 30% in opacity. Use some drop shadows, and inner shadows for a nice button effect, and also make the div a circle using border-radius.
Code:
a.stickyclose {
    position:absolute;
    top:4px;
    right:5px;
    width:15px;
    height:14px;
    font-size:10px;
    font-family:times new roman;
    text-indent:4px;
    color:#FFF;
    text-decoration:none;
    cursor:hand;
    background-color:rgba(0, 0, 0, 0.3);
    box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25), -1px -1px 2px rgba(255, 255, 255, 1);
    -webkit-box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25), -1px -1px 2px rgba(255, 255, 255, 1);
    -moz-box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25), -1px -1px 2px rgba(255, 255, 255, 1);
    -o-box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25), -1px -1px 2px rgba(255, 255, 255, 1);
    -webkit-border-radius:75px;
    -moz-border-radius:75px;}

We now wanna make it so that when the div is hovered over the opacity of the background will change from 30% to 50%.
Code:
a.stickyclose:hover {
    background-color:rgba(0, 0, 0, 0.5);}

Now when we click the div we want the opacity to change from 50%, to 80%, and adjust our shadows so it'll look like it's pressed in.
Code:
a.stickyclose:active {
    background-color:rgba(0, 0, 0, 0.8);
    box-shadow:0px 0px 8px rgba(0, 0, 0, 1), -1px -1px 2px rgba(255, 255, 255, 1);
    -webkit-box-shadow:0px 0px 8px rgba(0, 0, 0, 1), -1px -1px 2px rgba(255, 255, 255, 1);
    -moz-box-shadow:0px 0px 8px rgba(0, 0, 0, 1), -1px -1px 2px rgba(255, 255, 255, 1);
    -o-box-shadow:0px 0px 8px rgba(0, 0, 0, 1), -1px -1px 2px rgba(255, 255, 255, 1);}

Part 2: The Website
Well we're now done with out style sheet (style.css) we not need to open up out index.html file, and add in our starter code when beginning coding websites, we also need to incorporate JQuery, and JQuery UI. We're adding JQuery UI because we'll be using that to clock and drag the div, and JQuery to make it fade in and out.
We'll also add in our style sheet, and a button with the class stickyopen.
Code:
<html>
<head>
<title>Sticky Notes</title>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
</head>
<body>
    <button class="stickyopen">Open Sticky Notes</button>
</body>
</html>

We now need to add some JQuery (in between our head tags of course) so we can make our sticky div draggable. We also need to add a function so that when we click the stickyopen button, that button will give our sticky div a command to fade in.

We then wanna do the exact opposite to the stickyopen element to the stickyclose element making it so when we click the close button it'll fade out sticky div out.
Code:
<script type="text/javascript">
    $(function() {
        $( ".sticky" ).draggable();
    });
    
    $(function(){
        $(".stickyopen").click(function(){
            $(".sticky").fadeIn(600);
        });
    });
    
    $(function(){
        $(".stickyclose").click(function(){
            $(".sticky").fadeOut(300);
        });
    });
</script>

We now wanna add in our sticky div, and inside our sticky div we wanna add in our stickyclose a element class so we have our close button, we wanna add our stickytop div in after that, and inside that div is where you would put the name of the sticky notes. After that div is closed you then wanna add in your text area, which again where your text/notes for the sticky note will go.
Code:
<div class="sticky">
    <a class="stickyclose">X</a>
    <div class="stickytop">
        Sticky Notes
    </div>
    <textarea class="stickynotes">Text Here</textarea>
</div>

We're now done, and you've finally made the sticky note web app.

Here's the full code! Enjoy! Big Grin
Code:
<html>
<head>
<title>Sticky Notes</title>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript">
    $(function() {
        $( ".sticky" ).draggable();
    });
    
    $(function(){
        $(".stickyopen").click(function(){
            $(".sticky").fadeIn(600);
        });
    });
    
    $(function(){
        $(".stickyclose").click(function(){
            $(".sticky").fadeOut(300);
        });
    });
</script>
</head>
<body>
    <button class="stickyopen">Open Sticky Notes</button>
    <div class="sticky">
        <a class="stickyclose">X</a>
        <div class="stickytop">
            Sticky Notes
        </div>

        <textarea class="stickynotes">Text Here</textarea>
    </div>
</body>
</html>


Attached File(s)
.zip  stickynotes.zip (Size: 71.03 KB / Downloads: 535)

[Image: gimppimp_forum_sig_by_mikethedj4-d39msp7.png]
Visit this user's website Find all posts by this user
Quote this message in a reply
Post Reply 


Possibly Related Threads...
Thread: Author Replies: Views: Last Post
  How to make HD channel art for your Youtube channel FocuzMan 0 363 Aug 13, 2014 05:53
Last Post: FocuzMan
  [Tip] Why to make apng and not gif Wendy Black 0 1,716 Aug 23, 2013 16:18
Last Post: Wendy Black
  How to make animated GIFs in layout? iceepools 4 1,100 Aug 23, 2013 01:29
Last Post: iForStyle007
  Make A Bullet Hole In Gimp revnobody 3 2,769 Aug 12, 2013 21:37
Last Post: revnobody
  Make Android Logo Maannuell 2 904 Jun 26, 2013 20:10
Last Post: Maannuell

Forum Jump:


GIMP ForumPortalArchiveContactTermsRSS