Done designing, started scripting

I’ve finished designing the todo list, it took me couple of hours since i’m not that good with CSS, but still better than before i guess. Here’s where i got so far :

Of course a lot of what you’re seeing is going to change as i propagate more in this project. For example i’m making the top panel to slide up/down by default when user hover on it, so it doesn’t take up much space.

Actually i’ve achieved that, you can check it in my Github repo , Here’s how is it after adding all the scripting for that top panel :

Lessons learnt : 

First, for the CSS :

To make a DIV fully vertically stretched along the entire page:

html {
    height :100%; /*did this to get wrapper fully vertically streched*/

body {
    height: 100%; /*body is contained inside html, so needs that too*/

#mainWrapper {
    height : 100%;   /*finally mainWrapper is inside body which is inside html*/
    margin : auto;


And for jQuery, i ran into a problem in the textbox used to enter task name, it is inside the upper panel that’s gets hidden at every mouseout event.

The problem is when the user is typing some task, but moves his mouse away, the panel will automatically slide up, which will disrupt the task input process.

After the help of StackOverflow guys, i found out that i can check inside the mouseout event, whether if the active element id is mainTask  which is the id of the textbox. And if not, the mouseout event get executed normally, here’s the code :

    //when the DOM loads the top panel start visible and after 400ms it slides up
    //so the user know that there's a hidden panel
    $("#taskInput").delay(400).animate({top:-80}, 500);
            $(this).stop().animate({top:0}, 200);
            //if textbox is active, stop sliding it back up
            //this is carried out by that if statement
            if( !== 'mainTask'){
                $(this).stop().animate({top:-80}, 200);


Now, i’m going to work on the task addition mechanism, wish me luck.



  1. Amir Raouf · August 24, 2012

    Good article

  2. rafaeladel · August 24, 2012

    Thanks 🙂

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s