So here is the list of albums that I bought in January 2010

1. I Got You On Tape – I Got You On Tape
2. Spinning for the Cause – I Got You On Tape
3. 2 – I Got You On Tape
4. This Is for the White In Your Eyes – Choir of Young Believers
5. Trespassers – Kashmir ( Actualy I didn’t buy this one, but I got it from Kashmir with there signatures )
6. Ghost of a Chance – Turboweekend
7. Night Shift – Turnoweekend
8. The Life and Death of a Male Body – The Rumour Said Fire

Well that was all for this time. Let me know what you thing about all this great music by leaving a comment or a msg on Twitter ( @Saucerdk)

I did some minor bug fix here and there, so there is not much to say. I’m still looking for some feedback about this plugin so that I can try to make it better or even add some more functions.

Click here to get the latest version of Form Highlighter

If you want to be sure that you always get the latest updates about this plugin, then please follow me on twitter (@Saucerdk)

What is FormHighlighter ?
jQuery Plugin to attach focus,blur and keydown effect on your form fields.

Before I run away I’ll like to thank everyone for feedback and “@UsejQuery” from Twitter for spreading the word about this plugin.

If you want to be sure that you always get the latest updates about this plugin, then please follow me on twitter (@Saucerdk)

As you can se I’v also updated the design template since I was realy tired and bored with the last one I had, and thanks to Wordpress it took me 23sec to make that change, nice!

Please let me know what you think about FormHeighlighter and what you think would make the plug-in even better. Thanks!

Enjoy making cool websites and let me know if I can improve my plug-in with your ideas.

I’v maid some small improvements + added a needed function that placed the “pointer” at the beginig of the field.

So much for this time. Take care and enjoy the show…

Layout

Lets say that you wanna make a simple website with 2 columns. One for yur navigation and the other for the content area.

1
2
3
4

<div id="master">
<div id="navigation"></div>
<div id="content"></div>
</div>

CSS

Lets just make up something quick, after all it is just a demo :)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

#master {
width:500px;
height:600px;
border:2px solid #000000;
}
#navigation {
float:left;
width:200px;
height:600px;
border-right:1px solid #000000;
background-color:#eeeeee;
}
#content{
float:left;
width:300px;
height:600px;
}

So, what we have here is basicly a very simple setup, where our columns have 600px heigh.
The height is static and if we make our #content heigher or lower then our #navigation then
our #navigation won’t be effected, since it’s height is not dynamic and our <div>’s arnt linked
together. Now this is the place where some webdevelopers start to use all kind of tricks with
JavaScripts, but there is a very simple and easy way of making this just by using CSS as we know it.

CSS step 2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

#master {
width:500px;
min-height:600px;
border:2px solid #000000;
overflow:hidden;
}
 
#navigation {
float:left;
width:200px;
min-height:600px;
border-right:1px solid #000000;
background-color:#eeeeee;
margin-botttom:-32000px;
padding-bottom:32000px;
}
 
#content{
float:left;
width:300px;
min-height:600px;
margin-botttom:-32000px;
padding-bottom:32000px;
}

Explanation

As you can see the code is very simple and what we basicly did was just to make the #master with overflow:hidden and maid our heights dynamic by using min-height + our two columns have a small trick with margin and padding, that makes a 32000px height “buffer” wich is hidden by the overflow:hidden on our #master. Now the reason why our #master now is dynamic is because we havent sat a static height on it. So eachtime our colums get longer the overflow will show more and more of our 32000px buffer.

At the end I wanna wish you all happy coding!