Archive for the 'Interface' Category

Resizable textarea with a slider

The next beta of Factory Nova will feature a new interface element which was invented in our R&D department (read: by me and Ivan).

Due to our design restrictions we wanted to display an input field for a description of the uploaded file as a one line text box. Usually this size is more then enough for a short file description. But, as we’ve discovered our beta testers were not using the description like we did (no surprise here) and they wanted to be able to enter several lines of text in the description. In other words they wanted a textarea field.

So after some experiments we’ve invented a new interface element — an auto-resizable-with-a-slider textarea. The main idea is that at first textarea looks like a usual one line text field (and takes the same amount of space on the screen, which was very important to us), but then as you type it can become bigger and turn into a real textarea — and with a nice slider effect too.

Here is how it works: Video (2.8 Mb)

Radio buttons could be defeated

I always wondered why is it not possible to uncheck a radio button? Sometimes this is very inconvenient. If at first all radio buttons on the page were unchecked then why the browser does not allow a user to uncheck a radio button after it was checked?

So, anyway, with a very simple javascript (radioObj.checked = false) it is very easy to achieve.

See how it works in this short video in which I show how I defeated radio buttons:

QuickTime movie (785 Kb).

Updated two and a half years later.

The original version of the code that I posted in the comments didn’t actually work correctly in a situation when a group of radio buttons had the same name (which is of course the most common use scenario for radio buttons, but I happened to call them differently originally when I’ve created the unchecking code).

So here is a fixed version of the code (as it appears the click event only is not enough for this to work correctly, we have to assign a handler to a mousedown event as well).

Pure JS version

<input type="radio" name="name" value="value"
onmousedown="this.__chk = this.checked"
onclick="if (this.__chk) this.checked = false"/>

jQuery version

If you are using jQuery on your site then this version is for you, it will make ALL radio buttons uncheckable on the page, no need to specify any special code in each radio button.

Just place this code in the HEAD of your page, after jQuery main library inclusion and you are set –

<script type="text/javascript">
$(document).ready(function() {
  $("input[type=radio]").mouseup(function() {
    this.__chk = this.checked;
  }).click(function() {
    if (this.__chk) this.checked = false;
  });
});
</script>