This Artical explains how to improve form usability adding an auto message which appears and disappears with a nice fade-in and fade-out effect when an user select a field. I used Scriptaculous toggle effect to implement it. For more info download the full code or take a look at how it works.

Step 1: include scriptaculous libraries
Create a new page index.html and add a link to prototype.js and scriptaculous.js in the <head> tag of your page:

<script src=“scriptaculous/lib/prototype.js” type=“text/javascript”></script>
<
script src=“scriptaculous/src/scriptaculous.js” type=“text/javascript”></script>

Step 2: HTML code
Add an input search field with an hidden input field with ID msgstatus to “save” the actual status of auto message (0=hidden; 1=visible):

<input type=“text” name=“name” id=name onfocus=javascript:showMsg(1)/>
<input id=“msgstatus” type=“hidden” value=“0” />
<div class=”msg” id=msg1 style=“display:none;”>
…some html code here…
<a href=“#” onClick=javascript:hideMsg(1)> Close </a>
<div/>

<input type=“text” name=“email” id=email onfocus=javascript:showMsg(2)/>
<input id=“msgstatus” type=“hidden” value=“0” />
<div class=”msg” id=msg2 style=“display:none;”>
…some html code here…
<a href=“#” onClick=javascript:hideMsg(2)> Close </a>
<div/>

If you want to add other input fields remember to use a progressive numeration for each message ID (id=”msg1″, id=”msg2″, id=”msg3″, id=”msg4″…) and change the value of the parameter in input to hideMsg() and showMsg() functions.

Step 3: JavaScript functions
Now, in order to enable Scriptaculous fade-in and fade-out effects, add this code into the page on your page for the function showMsg() which displays an auto message when an user click on input field:

<script language=“javascript”>
function showMsg(idElement){
idEl= idElement;
statusMenu = document.getElementById(‘msgstatus’);
if(statusMenu.value==0){
statusMenu.value=1;
Effect.toggle(‘msg’+idEl, ‘appear’); return false;
}
}

…and this code for hideMsg() function to hide the menu when an user click on the link “close”:

function hideMsg(idElement){
idEl= idElement;
statusMenu = document.getElementById(‘msgstatus’);
if(statusMenu.value==1){
statusMenu.value=0;
Effect.toggle(‘msg’+idEl, ‘appear’); return false;
}
}</script>
Advertisements