change background color and font color

Question

eawade 0 Newbie Poster

15 Years Ago

Hey Guys,

I am frustrated with this matter and therefore need some help. I will try to keep this as simple as possible. I really need some help performing something that should be relatively simple in Javascript. I have a form which contains FOUR text fields (e.g. TEXTFIELD1, TEXTFIELD2, TEXTFIELD3 & TEXTFIELD4). Each text field holds a HEX,DEC color value. ABOVE this form I have a table with TWO ROWS (ROW1 and ROW2). ROW1 should correspond with TEXTFIELD1, so that when the VALUE in TEXTFEILD1 is changed the background color of ROW1 will change to match the HEX,DEC VALUE entered in TEXTFIELD1. The same would happen with TEXTFIELD2 and ROW2. TEXTFIELD3 should be used to change the color of the TEXT inside ROW1 and TEXTFIELD4 should change the color of the TEXT in ROW2. I also wanted to know if it would be possible to achieve this without clicking any button. If doing this without clicking a button is overly complicated, i havinga button is not a problem.

------------------------------------------------------------------
| ROW1 | TEXT IN ROW 1
------------------------------------------------------------------
| ROW2 | TEXT IN ROW 2
------------------------------------------------------------------

TEXTFIELD1 <----HEXDEC VALUE GOES HERE to change color of ROW1---->
TEXTFIELD2 <----HEXDEC VALUE GOES HERE to change color of ROW2---->
TEXTFIELD3 <----HEXDEC VALUE GOES HERE to change color of TEXT IN ROW1---->
TEXTFIELD4 <----HEXDEC VALUE GOES HERE to change color of TEXT in ROW2---->

Hope this makes sense.

Thanks,
E.A.

javascript

5 Contributors
12 Replies
244 Views
4 Days Discussion Span
Latest Post 15 Years Ago Latest Post by essential

essential 84 Posting Shark

15 Years Ago

Here's a simple demo, that you can work with.
Hope it helps...

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Manipulating Background color using textfield's</title>
<style type="text/css">
/* <![CDATA[ */
body, div, html {
   border: none;
   font: normal normal normal 100%/115% "Trebuchet MS", Verdana, Arial, sans-serif; }
caption {
   caption-side: top;
   display: table-caption;
   margin-bottom: .5em;
   text-align: left; }
body {
   background-color: #eee;
   color: #006;
   text-align: center;
   width: 100%; }
body div#tube {
    background-color: inherit;
    color: inherit;
    left: 1.2em;
    position: relative;
    top: 2em;
    width: 96%; }
body div#wrapper {
    background-color: #fff;
    color: #696969;
    margin: 0 auto;
    min-height: 16.5em;
    overflow: hidden;
    position: relative;
    width: 98%; }
div {
   margin: 0;
   padding: 0; }
html {
   min-width: 60em;
   width: auto; }
label { display: block; }
input { display: inline-block; vertical-align: middle; }
table {
   border: none;
   border-collapse: collapse;
   color: #696969;
   margin: 0;
   padding: 0;
   text-align: left;
   white-space: nowrap;
   min-width: 30em; }
tr { line-height: 130%; }
td { border: thin solid; padding: .5em 1em .5em 1em; width: auto; vertical-align: middle; }
th { border-top: medium solid; padding-left: 1em; }
/* ]]> */
</style>
<script type="text/javascript">
/* <![CDATA[ */

var hexdec = /^[\#]{1}[\d-a-fA-F]{6}$/;
function demo(thisValue,thisRef,txtBg) {

var rows = document.getElementsByTagName('td');

var fields = document.forms['frm'];

if(!hexdec.test(thisValue.value)){do { 
var val = prompt('Please enter a valid  Hexdec Value\n(e.g. #000AAA)');  } 
while(!hexdec.test(val));
eval('fields.' + thisValue.id + '.value=val');
} 

if ( txtBg ) {
rows[thisRef].style.backgroundColor = thisValue.value; }
else { rows[thisRef].style.color = thisValue.value; }
}
/* ]] */
</script>
</head>
<body>
<div id="wrapper">
<div id="tube">
<form action="#" id="frm" onsubmit="return false;">
<table summary="JavaScript Demo">
<caption>JavaScript Demo</caption>
<tr>
<th><label>Text Colour</label></th>
<th><label>Background Colour</label></th>
</tr>
<tr>
<td id="row1" colspan="2">Designated to TextField 1(colour) and 2(bgcolour)</td>
</tr>
<tr>
<td id="row2" colspan="2">Designated to TextField 3(colour) and 4(bgcolour)</td>
</tr>
<tr>
<td><label>Colour:&#32;<input type="text" id="colour1" name="colour1" value="textfield 1" onchange="demo(this,'row1');" /></label></td>
<td><label>BgColour:&#32;<input type="text" id="bgcolour1" name="bgcolour1" value="textfield 2" onchange="demo(this,'row1',true);" /></label></td>
</tr>
<tr>
<td><label>Colour:&#32;<input type="text" id="colour2" name="colour2" value="textfield 3" onchange="demo(this,'row2');" /></label></td>
<td><label>BgColour:&#32;<input type="text" id="bgcolour2" name="bgcolour2" value="textfield 4" onchange="demo(this,'row2',true);" /></label></td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>

essential 84 Posting Shark

15 Years Ago

This code is tested in IE 6+ and Opera8. What's your browser?

essential 84 Posting Shark

15 Years Ago

This look a bit more complicated than other one. But this will fix the issue. Enjoy...

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Manipulating Background color using textfield's</title>
<style type="text/css">
/* <![CDATA[ */
body, div, html {
   border: none;
   font: normal normal normal 100%/115% "Trebuchet MS", Verdana, Arial, sans-serif; }
caption {
   caption-side: top;
   display: table-caption;
   margin-bottom: .5em;
   text-align: left; }
body {
   background-color: #eee;
   color: #006;
   text-align: center;
   width: 100%; }
body div#tube {
    background-color: inherit;
    color: inherit;
    left: 1.2em;
    position: relative;
    top: 2em;
    width: 96%; }
body div#wrapper {
    background-color: #fff;
    color: #696969;
    margin: 0 auto;
    min-height: 16.5em;
    overflow: hidden;
    position: relative;
    width: 98%; }
div {
   margin: 0;
   padding: 0; }
html {
   min-width: 60em;
   width: auto; }
label { display: block; }
input { display: inline-block; vertical-align: middle; }
table {
   border: none;
   border-collapse: collapse;
   color: #696969;
   margin: 0;
   padding: 0;
   text-align: left;
   white-space: nowrap;
   min-width: 30em; }
tr { line-height: 130%; }
td { border: thin solid; padding: .5em 1em .5em 1em; width: auto; vertical-align: middle; }
th { border-top: medium solid; padding-left: 1em; }
/* ]]> */
</style>
<script type="text/javascript">
/* <![CDATA[ */
var hexdec = /^[\#]{1}[\d-a-fA-F]{6}$/;

var ua = { ref : function( id ) {
   if ( document.all ) {
   return document.all[id]; }
   else if ( document.getElementById ) {
   return document.getElementById(id); }
   else { 
   return document.layers[id];      } 
  } 
}

function demo(e) {
e = e ? e : window.event;
t = e.target ? e.target : e.srcElement;

if (( ua.ref ) && ( t.tagName.toLowerCase() == 'input' )) { 
if ( !hexdec.test(t.value) ) {
do {
var msg = prompt('Please enter a valid hexdec value!\n(e.g. #000AAA)'); }
while(!hexdec.test(msg)); 
t.value = msg; }
for ( var x = 0; x <= 1; x++ ) {
if ( t.name == (('colour') + x ) ) { ua.ref((('row') + x)).style.color = t.value; }
if ( t.name == (('bgcolour') + x )) { ua.ref((('row') + x)).style.backgroundColor = t.value; 
      }
    } 
  } 
}
if (document.addEventListener) 
document.addEventListener('change',demo,false);

else if (document.attachEvent) 
document.attachEvent('onchange',demo);

else 
document.onchange = demo;

/* ]]> */
</script>
</head>
<body>
<div id="wrapper">
<div id="tube">
<form action="#" id="frm" onsubmit="return false;">
<table summary="JavaScript Demo">
<caption>JavaScript Demo</caption>
<tr>
<th><label>Text Colour</label></th>
<th><label>Background Colour</label></th>
</tr>
<tr>
<td id="row0" colspan="2">Designated to TextField 1(colour) and 2(bgcolour)</td>
</tr>
<tr>
<td id="row1" colspan="2">Designated to TextField 3(colour) and 4(bgcolour)</td>
</tr>
<tr>
<td><label>Colour:&#32;<input type="text" id="colour0" name="colour0" value="textfield 1" /></label></td>
<td><label>BgColour:&#32;<input type="text" id="bgcolour0" name="bgcolour0" value="textfield 2" /></label></td>
</tr>
<tr>
<td><label>Colour:&#32;<input type="text" id="colour1" name="colour1" value="textfield 3" /></label></td>
<td><label>BgColour:&#32;<input type="text" id="bgcolour1" name="bgcolour1" value="textfield 4" /></label></td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

access@123 0 Newbie Poster · Answer 1 · 2009-02-11T21:54:01+00:00

Could you be more specific as to where you are getting error. Could you send the code or javascript, which you are using..

eawade 0 Newbie Poster · Answer 2 · 2009-02-13T13:32:06+00:00

Hello Essential,

First and foremost I REALLY appreciate the demo code. The only issue that I'm having is that when I try the demo the none of the colours are changing (neither text nor background). I enter valid HEX,DEC values but the colours fail to change. Is there any reason why this is happening?

Your help is greatly appreciated.

Thanks
E.A.
"From Java to LAMP, a few miles to go and I'll be totally AMPED"

yellowc 0 Newbie Poster · Answer 3 · 2009-02-13T15:49:15+00:00

yellowc 0 Newbie Poster

15 Years Ago

great!!!

http://bbs.jiyifa.cn/?u=52803

eawade 0 Newbie Poster · Answer 4 · 2009-02-13T23:15:34+00:00

Essential,
Wow, you are right! To be honest, i was testing this code using the lastest Firefox browser and Google's chrome. Maybe this is much to ask but how would I go about making this code compatible with other browsers, particularly Firefox... and Chrome if possible?

I really appreciate your help/feedback. I am a Java guy but I am getting into LAMP now. Thanks for everything.

E.A.

essential 84 Posting Shark Featured Poster · Answer 5 · 2009-02-14T05:54:47+00:00

The best way to do this is to use the navigator object to detect different types of browser including versions.
In line 80 simply replace the statement block with this:

if (ua.ref && t.id) {

hope this will finalized the issue. Good day to you...

eawade 0 Newbie Poster · Answer 6 · 2009-02-15T02:26:34+00:00

Hey Essential,

Once again, you are super. Thanks a bunch. Just a couple of points I wanted to mention. The first set of code that you posted, as per your message, works perfectly in IE and Opera. The second code that you posted, however, doesn't seem to work at all. I'm wondering if it is something that I'm doing wrong. When I tested the second (most recently posted) modification, none of the colors changed - not even in IE 6. On that note, I really appreciate the help you provided about how to make the code work for other browsers. If I can get the second code to work I think I'll be able to work with what you have showed me. I really appreciate your help in this matter, as it is very important that I get past this hurdle. Thanks a million

E.A.

mschroeder 251 Bestower of Knowledge Team Colleague · Answer 7 · 2009-02-15T05:59:19+00:00

I built this on the jQuery library, its a very simple example with a lot of duplicated code that could be turned into a function or two. Hopefully some people with some older browsers can verify that it works, but it works in FF3, Opera 9.6, IE7 and Safari 3.2.1 without a problem.

I also changed the regex to support #FFF and #FFFFFF
Full source is provided below.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
	var regex = '^[\#]{1}(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6})$';

	$('#colour0').bind("keyup", function() {
		//Changes the text color of row 1
		var val = $(this).val();
		if( val.match(regex) )
		{
			$('#row0').css('color', $(this).val());
		}
	});
	$('#colour1').bind("keyup", function() {
		//Changes the text color of row 2
		var val = $(this).val();
		if( val.match(regex) )
		{
			$('#row1').css('color', $(this).val());
		}
	});
	$('#bgcolour0').bind("keyup", function() {
		//Changes the background color of row 1
		var val = $(this).val();
		if( val.match(regex) )
		{
			$('#row0').css('background-color', $(this).val());
		}
	});
	$('#bgcolour1').bind("keyup", function() {
		//Changes the background color of row 2
		var val = $(this).val();
		if( val.match(regex) )
		{
			$('#row1').css('background-color', $(this).val());
		}
	});
	
});
</script>

FULL SOURCE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
	var regex = '^[\#]{1}(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6})$';

	$('#colour0').bind("keyup", function() {
		//Changes the text color of row 1
		var val = $(this).val();
		if( val.match(regex) )
		{
			$('#row0').css('color', $(this).val());
		}
	});
	$('#colour1').bind("keyup", function() {
		//Changes the text color of row 2
		var val = $(this).val();
		if( val.match(regex) )
		{
			$('#row1').css('color', $(this).val());
		}
	});
	$('#bgcolour0').bind("keyup", function() {
		//Changes the background color of row 1
		var val = $(this).val();
		if( val.match(regex) )
		{
			$('#row0').css('background-color', $(this).val());
		}
	});
	$('#bgcolour1').bind("keyup", function() {
		//Changes the background color of row 2
		var val = $(this).val();
		if( val.match(regex) )
		{
			$('#row1').css('background-color', $(this).val());
		}
	});
	
});
</script>
</head>
<body>
<table summary="JavaScript Demo">
<caption>JavaScript Demo</caption>
<tr>
<th><label>Text Colour</label></th>
<th><label>Background Colour</label></th>
</tr>
<tr>
<td id="row0" colspan="2">Designated to TextField 1(colour) and 2(bgcolour)</td>
</tr>
<tr>
<td id="row1" colspan="2">Designated to TextField 3(colour) and 4(bgcolour)</td>
</tr>
<tr>
<td><label>Colour: <input type="text" id="colour0" name="colour0" value="textfield 1" /></label></td>
<td><label>BgColour: <input type="text" id="bgcolour0" name="bgcolour0" value="textfield 2" /></label></td>
</tr>
<tr>
<td><label>Colour: <input type="text" id="colour1" name="colour1" value="textfield 3" /></label></td>
<td><label>BgColour: <input type="text" id="bgcolour1" name="bgcolour1" value="textfield 4" /></label></td>
</tr>
</table>
</body>
</html>

eawade 0 Newbie Poster · Answer 8 · 2009-02-16T00:33:56+00:00

Hello Essential,

Thanks a mil. The code works well and I have successfully tested it in most browsers (including Chrome). This is a big help and I have learned so much. In closing I have what I promise to be one final question. :) I am attempting to use a javascript color picker (e.g. RGB ColorPicker 1.1) that will allow people to input the HEX, DEC value by using a color picker. Each picker I have used doesn't seem to workout well. Even if the events are changed from onKeyup to onChange. Some color pickers seem to include the '#' symbol and others don't. I'm wondering if this is the reason why I am unable to get the picker to work with the examples that you so generously provided. Any ideal about why?

Thanks again,
E.A.

essential 84 Posting Shark Featured Poster · Answer 9 · 2009-02-16T06:50:48+00:00

Have you tried the setAttribute('style', value) method? Here try this link