Bad Design Question

gamerland · Mar 1, 2004

Hi,
I have an end user that wants data entry fields on the web form to flash, preferable in yellow, blue, and red. I would like to show a simple HTML example, as a picture is worth 1000 words in this case. However, I cannot get the field background to flash. Any samples out there?

Regards ---

tviman · Mar 1, 2004

You could use CSS & javascript to do this but I think it would be extremely cumbersome. Flash would be a better way to do this.

There's always a better way. The fun is trying to find it!

WartookMan · Mar 1, 2004

This example cycles 3 fields in changing colors...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>Cycling colors...</title>
<style>
.type0 { background-color: #99ffff; }
.type1 { background-color: #ff99ff; }
.type2 { background-color: #ffff99; }
</style>
<script type="text/javascript">
function cycle() {
	var arr=new Array("first", "second", "third");
	var f=document.forms[0].length;
	for(var x=0; x<f;x++) {
		obj=document.forms[0].elements[x];
		var val=obj.className.charAt(obj.className.length-1);
		val=((val*1)+1)%3;
		obj.className="type"+val;
	}
	setTimeout("cycle();",250);
}
</script>
</head>
<body onload="setTimeout('cycle()',1000);">
<form>
First field:<input class="type0" name="first" type="text"><br>
Second field:<input class="type1" name="second" type="text"><br>
Third field:<input class="type2" name="third" type="text"><br>
</form>
</body>
</html>

Or alternatively, this one will make the input fields flash between white and red/green/blue:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>Cycling colors...</title>
<style>
.type0 { background-color: #99ffff; }
.type1 { background-color: #ff99ff; }
.type2 { background-color: #ffff99; }
.type0A, .type1A, .type2A { background-color: #ffffff; }
</style>
<script type="text/javascript">
function cycle() {
	var arr=new Array("first", "second", "third");
	var f=document.forms[0].length;
	for(var x=0; x<f;x++) {
		obj=document.forms[0].elements[x];
		var val=obj.className.charAt(obj.className.length-1);
		if(val=="A") {
			obj.className=obj.className.substring(0,obj.className.length-1);
		} else {
			obj.className=obj.className+"A";
		}
	}
	setTimeout("cycle();",250);
}
</script>
</head>
<body onload="setTimeout('cycle()',1000);">
<form>
First field:<input class="type0" name="first" type="text"><br>
Second field:<input class="type1" name="second" type="text"><br>
Third field:<input class="type2" name="third" type="text"><br>
</form>
</body>
</html>

Hope this helps.

Pete.

Web Developer & Aptrix / Lotus Workplace Web Content Management (LWWCM) Specialist
w:

http://www.lclimited.co.uk/

e: Pete.Raleigh(at)lclimited.co.uk

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Bad Design Question

gamerland

Programmer

tviman

Programmer

WartookMan

Technical User

Similar threads

Part and Inventory Search

Sponsor