Balaji's blog - Javascript focus for AJAX Operation

<< repository | Home | Online colloborators >>

Permalink
[Software Development] Javascript focus for AJAX Operation

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">Header</P>
				</TD>
			</TR>
			<TR>
				<TD style="WIDTH: 174px">
					<P>Left Menu1</P>
					<P>Left Menu2</P>
				</TD>
				<TD>
					<P>Body</P>
					<div id="inputform">
					<form><b>Sample Input form</b><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>

TrackBacks[0] Comments[0] Posted by balajidl on 14 September 2006 16:00:11 CEST

Add a comment

TrackBack to http://radio.javaranch.com/balajidl/addTrackBack.action?entry=1158242411350

Title
Body	HTML : b, i, blockquote, br, p, pre, a href="", ul, ol, li
Math Quiz 5 + 4 =	(Helps stop blog spam)
Name
E-mail address
Website
Remember me	Yes No
E-mail addresses are not publicly displayed, so please only leave your e-mail address if you would like to be notified when new comments are added to this blog entry (you can opt-out later).