Keeping with the theme of my recent JavaScript posts, here are a couple of simple JavaScript functions that are extremely useful for creating a clean user interface. The scripts themselves are simple, but together they allow you to create the effect of a div that expands and collapses to show or hide its contents.
Writing about JavaScript the other day got me thinking about some of the other JavaScript code that has helped me solve design problems in the past. Below is a script that limits the number of characters in a text area to a maximum value and also displays the number of characters that can still be added to the text area. This is useful when text area data will be stored in a database VARCHAR field which has a 255 character maximum. It allows the user to craft their response to match the allowable length before the form is submitted.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <script type="text/javascript"> var current_count = 0; var max_count = 255; function textCounter(field, target) { if (field.value.length > max_count) { field.value = field.value.substring(0, max_count); } else { current_count = max_count - field.value.length; target.value = current_count; } } </script> <form> <p>255 character maximum, <input readonly type="text" name="current_count" value="255" size="3" /> characters remaining.</p> <textarea name="fieldname" cols="60" rows="4" onkeyup="textCounter(this, this.form.current_count);"></textarea> </form> |
The textCounter script runs once after each key stroke is complete (”key up”) and takes two arguments. The first is the field being monitored, the second is the target field that will be updated with the “characters remaining” value.
Note that we don’t add 1 and subtract 1 for each keystroke. Instead we use the current field length because it is possible to paste text into the field or to select and remove more than one character with a single delete keystroke.
I don’t write a lot of JavaScript. Every now and then I need it to use it solve a design problem. Recently, I needed JavaScript that would make sure that only three checkboxes could be checked at once. Here’s what I came up with in case it’s helpful to someone else.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <script type="text/javascript" language="javascript"> var current_count = 0; var max_count = 3; function maxCheckbox(item) { if(item.checked) { if(current_count >= max_count) { item.checked=false; alert('You may only choose '+max_count+' checkboxes.'); } else { current_count += 1; } } else { current_count -= 1; } } </script> <input name="checkbox1" onclick="maxCheckbox(this)" type="checkbox" value="1" /> One <input name="checkbox2" onclick="maxCheckbox(this)" type="checkbox" value="1" /> Two <input name="checkbox3" onclick="maxCheckbox(this)" type="checkbox" value="1" /> Three <input name="checkbox4" onclick="maxCheckbox(this)" type="checkbox" value="1" /> Four <input name="checkbox5" onclick="maxCheckbox(this)" type="checkbox" value="1" /> Five |
Each time a box is clicked the script runs. If a check mark is being added then the script tests to see if the running total (current_count) is larger than the defined maximum (max_count). If so, then it undoes the checkmark and displays an alert, but if not, then it allows the check and adds one to the current tally. When a box is unchecked, the tally simply decreases by one.
Save the Developers! is hoping to make the lives of web developers easier, while also improving the experience for web users. Their current campaign is Say No To IE 6! which is an attempt to rid the world of Internet Explorer 6.
How? By getting developers to put a bit of JavaScript on their website. Developers can either link to their external JavaScript file or download the script and host it themselves. (I added it to this site.)
If the JavaScript detects the the user’s browser is IE 6, then a small window appears suggesting that they upgrade. Clicking takes the user to their website which contains links to the latest versions of IE 7, Firefox, Safari and Opera.
They acknowledge that it may take awhile, maybe even a few years, but their goal is to reduce IE 6 usage as much as possible to help usher it into permanent retirement. I think that’s a goal all web developers share.
It is simple, effective and—best of all—won’t bother most users because they won’t see it. Their website will let you preview the effect, even if you don’t have IE 6. If you don’t like the look, just modify the JavaScript to fit your site design. If you don’t want users leaving your site, you can adapt the JavaScript so that the window links to an upgrade page on your own site.
Remember: Every time you upgrade a browser, a developer gets his wings.
Firefox has implemented httpOnly cookies in version 2.0.0.5.
What’s the big deal? How are they different? Basically, httpOnly cookies are mostly just regular cookies, usable in the standard cookie ways, but also tagged so that browsers keep them invisible to JavaScript. That means that if you have an XSS hole (Cross-site scripting, a technique for inserting JavaScript into sites and databases) in your website, it will be harder for malicious evil-doers to view cookies and to hijack user sessions. They can only be accessed by a HTTP request (which is probably what you as a developer intended).
In terms of technical implementation, it simply adds “HttpOnly” to the cookie header.
1 2 3 4 5 6 7 | <pre> # Standard cookie header Set-Cookie: person_id=42; expires=Wednesday, 31-Dec-07 23:59:59 GMT; # httpOnly cookie header Set-Cookie: person_id=42; expires=Wednesday, 31-Dec-07 23:59:59 GMT; HttpOnly </pre> |
Internet Explorer added support for httpOnly cookies in IE 6.0. Safari and Opera still do not support them, but it’s planned for Opera version 9.5. I couldn’t find any hints online as to Safari’s plans.
PHP added support for setting httpOnly cookies and sessions in version 5.2. Ruby on Rails has a patch (#8895) ready that will hopefully make it into the next version.
< Return to Null is Love homepage >
Kevin Skoglund is the lead web developer at Nova Fabrica and an instructor specializing in Ruby on Rails, PHP, SQL, HTML, and CSS.
You are currently browsing the archives for the JavaScript category.
Unless otherwise stated, all original material included on this weblog is copyright Nova Fabrica, Inc. and licensed under a Creative Commons License. (For non-commercial uses, but giving credit is love.)
