This tutorial 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.
Download this tutorialStep 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>
<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/>
<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;
}
}
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>
idEl= idElement;
statusMenu = document.getElementById('msgstatus');
if(statusMenu.value==1){
statusMenu.value=0;
Effect.toggle('msg'+idEl, 'appear'); return false;
}
}</script>
How you can see code and structure are very simple to understand and ready to reuse in your projects. Download the zip file with the full code, including CSS and Scriptaculous framework.
Download this tutorial
No comments:
Post a Comment