ClarityWEB Article
Elastic jQuery text box for use on websites
Every now and again we're shown a neat piece of code that is very simple yet very effective. Today was one such occasion.
Before we look at it, let's look at the scenario in which we feel it proves its worth. Imagine that you've got a web page on which you have an address box; a standard text entry field that feeds a database to gather customer information.
Most of us would design a box of a set height. If space was at a premium you'd simply restrict the height of the box and users would see their text scroll up and out of sight once they get beyond the visible bottom border of the box. We find this rather irritating.
You don't know how many users will type 3 lines for an address (especially if you've got the postcode in a seperate field) or how many will type 8 lines.
Elastic jQuery text box allows for that. You set the height as shallow as you want to, and you set the width too. However, if a user gets beyond the point at which the text would normally start to scroll up - this code expands the box. It's a fluid box that only becomes fluid when it needs to. You'll have seen this before if you use Facebook, but the execution of it in this code is excellent and now you can use it on your own website.
So, you keep your original page design intact on loading and it'll only change when the need arises. It's perfect. Very clever and a credit to the writer in our opinion.
Jan Jarfalk's Elastic jQuery PluginSpread the Word
Web design ideas
Aviation enthusiast or writing a website for an airline, airport or associated industry?
If the above applies to you then you're going to love another little piece of code from Jan Jarfalk. His 'Airport' jQuery plugin delivers that wonderful effect that used to be commonplace in airports when the letters would flick over each other (we miss that!)
Another simple piece of jQuery you might find useful is the character limit one. If you have a text box that only allows, say, 255 characters, this plugin visually shows the number of characters you have remaining.
Please Retweet
If you like our articles, please retweet them. We're always looking for new ideas too, so if you think you've found something that deserves a mention, drop us a line.
First Time Online?
Can you remember the first time you used the internet?
