A simple javascript based dhtml effect to show the focus to the user that a AJAX operation is being performed.
Test the below code in a browser by typing some value in the text box to see the effect.
The code simply blur the background color upon onChange event.
<html>
<head>
<script language="javascript">
function showFocus(){
document.getElementById('mainbody').style.backgroundColor ="#CCCCCC";
document.getElementById('Table1').style.color ="#EEEEEE";
document.getElementById('inputform').style.backgroundColor ="#66CCFF";
document.getElementById('inputform').style.color ="#3300ff";
document.getElementById('message').innerHTML ="<i>Please wait....Checking username using AJAX.i>";
}
script>
head>
<body>
<div id="mainbody" style="BACKGROUND-COLOR: #66ccff";>
<TABLE id="Table1" cellSpacing="1" cellPadding="1" width="100%" border="1" style="COLOR: #3300ff">
<TR>
<TD style="HEIGHT: 16px" colSpan="2">
<P align="center">HeaderP>
TD>
TR>
<TR>
<TD style="WIDTH: 174px">
<P>Left Menu1P>
<P>Left Menu2P>
TD>
<TD>
<P>BodyP>
<div id="inputform">
<form><b>Sample Input formb><br>
Check username: <INPUT id="Text1" type="text" name="Text1" onchange="showFocus();"><br>
<span id="message">span>
form>
div>
TD>
TR>
TABLE>
div>
body>
html>
