JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

change background color and font color

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply
1 2

•
•
Join Date: Feb 2009
Posts: 9
Reputation: eawade is an unknown quantity at this point 
Solved Threads: 0
eawade eawade is offline Offline
Newbie Poster

change background color and font color

 
0
  #1
Feb 11th, 2009
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.
Reply With Quote Quick reply to this message  
•
•
Join Date: Oct 2008
Posts: 6
Reputation: access@123 is an unknown quantity at this point 
Solved Threads: 0
access@123 access@123 is offline Offline
Newbie Poster

Re: change background color and font color

 
0
  #2
Feb 11th, 2009
Could you be more specific as to where you are getting error. Could you send the code or javascript, which you are using..
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: change background color and font color

 
0
  #3
Feb 12th, 2009
Here's a simple demo, that you can work with.
Hope it helps...
javascript Syntax (Toggle Plain Text) 
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5. <head profile="http://www.w3.org/2005/10/profile">
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  8. <meta http-equiv="Content-Style-Type" content="text/css" />
  9. <title>Manipulating Background color using textfield's</title>
  10. <style type="text/css">
  11. /* <![CDATA[ */
  12. body, div, html {
  13.    border: none;
  14.    font: normal normal normal 100%/115% "Trebuchet MS", Verdana, Arial, sans-serif; }
  15. caption {
  16.    caption-side: top;
  17.    display: table-caption;
  18.    margin-bottom: .5em;
  19.    text-align: left; }
  20. body {
  21.    background-color: #eee;
  22.    color: #006;
  23.    text-align: center;
  24.    width: 100%; }
  25. body div#tube {
  26.     background-color: inherit;
  27.     color: inherit;
  28.     left: 1.2em;
  29.     position: relative;
  30.     top: 2em;
  31.     width: 96%; }
  32. body div#wrapper {
  33.     background-color: #fff;
  34.     color: #696969;
  35.     margin: 0 auto;
  36.     min-height: 16.5em;
  37.     overflow: hidden;
  38.     position: relative;
  39.     width: 98%; }
  40. div {
  41.    margin: 0;
  42.    padding: 0; }
  43. html {
  44.    min-width: 60em;
  45.    width: auto; }
  46. label { display: block; }
  47. input { display: inline-block; vertical-align: middle; }
  48. table {
  49.    border: none;
  50.    border-collapse: collapse;
  51.    color: #696969;
  52.    margin: 0;
  53.    padding: 0;
  54.    text-align: left;
  55.    white-space: nowrap;
  56.    min-width: 30em; }
  57. tr { line-height: 130%; }
  58. td { border: thin solid; padding: .5em 1em .5em 1em; width: auto; vertical-align: middle; }
  59. th { border-top: medium solid; padding-left: 1em; }
  60. /* ]]> */
  61. </style>
  62. <script type="text/javascript">
  63. /* <![CDATA[ */
  64.  
  65. var hexdec = /^[\#]{1}[\d-a-fA-F]{6}$/;
  66. function demo(thisValue,thisRef,txtBg) {
  67.  
  68. var rows = document.getElementsByTagName('td');
  69.  
  70. var fields = document.forms['frm'];
  71.  
  72. if(!hexdec.test(thisValue.value)){do { 
  73. var val = prompt('Please enter a valid  Hexdec Value\n(e.g. #000AAA)');  } 
  74. while(!hexdec.test(val));
  75. eval('fields.' + thisValue.id + '.value=val');
  76. } 
  77.  
  78. if ( txtBg ) {
  79. rows[thisRef].style.backgroundColor = thisValue.value; }
  80. else { rows[thisRef].style.color = thisValue.value; }
  81. }
  82. /* ]] */
  83. </script>
  84. </head>
  85. <body>
  86. <div id="wrapper">
  87. <div id="tube">
  88. <form action="#" id="frm" onsubmit="return false;">
  89. <table summary="JavaScript Demo">
  90. <caption>JavaScript Demo</caption>
  91. <tr>
  92. <th><label>Text Colour</label></th>
  93. <th><label>Background Colour</label></th>
  94. </tr>
  95. <tr>
  96. <td id="row1" colspan="2">Designated to TextField 1(colour) and 2(bgcolour)</td>
  97. </tr>
  98. <tr>
  99. <td id="row2" colspan="2">Designated to TextField 3(colour) and 4(bgcolour)</td>
  100. </tr>
  101. <tr>
  102. <td><label>Colour: <input type="text" id="colour1" name="colour1" value="textfield 1" onchange="demo(this,'row1');" /></label></td>
  103. <td><label>BgColour: <input type="text" id="bgcolour1" name="bgcolour1" value="textfield 2" onchange="demo(this,'row1',true);" /></label></td>
  104. </tr>
  105. <tr>
  106. <td><label>Colour: <input type="text" id="colour2" name="colour2" value="textfield 3" onchange="demo(this,'row2');" /></label></td>
  107. <td><label>BgColour: <input type="text" id="bgcolour2" name="bgcolour2" value="textfield 4" onchange="demo(this,'row2',true);" /></label></td>
  108. </tr>
  109. </table>
  110. </form>
  111. </div>
  112. </div>
  113. </body>
  114. </html>
  115.  
Last edited by essential; Feb 12th, 2009 at 1:22 am.
Reply With Quote Quick reply to this message  
•
•
Join Date: Feb 2009
Posts: 9
Reputation: eawade is an unknown quantity at this point 
Solved Threads: 0
eawade eawade is offline Offline
Newbie Poster

Re: change background color and font color

 
0
  #4
Feb 13th, 2009
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"
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: change background color and font color

 
0
  #5
Feb 13th, 2009
This code is tested in IE 6+ and Opera8. What's your browser?
Dev.Opera — FOLLOW THE STANDARDS, BREAK THE RULES...
Reply With Quote Quick reply to this message  
•
•
Join Date: Feb 2009
Posts: 3
Reputation: yellowc is an unknown quantity at this point 
Solved Threads: 0
yellowc yellowc is offline Offline
Newbie Poster

Re: change background color and font color

 
0
  #6
Feb 13th, 2009
great!!!

http://bbs.jiyifa.cn/?u=52803
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: change background color and font color

 
0
  #7
Feb 13th, 2009
This look a bit more complicated than other one. But this will fix the issue. Enjoy...
javascript Syntax (Toggle Plain Text) 
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5. <head profile="http://www.w3.org/2005/10/profile">
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  8. <meta http-equiv="Content-Style-Type" content="text/css" />
  9. <title>Manipulating Background color using textfield's</title>
  10. <style type="text/css">
  11. /* <![CDATA[ */
  12. body, div, html {
  13.    border: none;
  14.    font: normal normal normal 100%/115% "Trebuchet MS", Verdana, Arial, sans-serif; }
  15. caption {
  16.    caption-side: top;
  17.    display: table-caption;
  18.    margin-bottom: .5em;
  19.    text-align: left; }
  20. body {
  21.    background-color: #eee;
  22.    color: #006;
  23.    text-align: center;
  24.    width: 100%; }
  25. body div#tube {
  26.     background-color: inherit;
  27.     color: inherit;
  28.     left: 1.2em;
  29.     position: relative;
  30.     top: 2em;
  31.     width: 96%; }
  32. body div#wrapper {
  33.     background-color: #fff;
  34.     color: #696969;
  35.     margin: 0 auto;
  36.     min-height: 16.5em;
  37.     overflow: hidden;
  38.     position: relative;
  39.     width: 98%; }
  40. div {
  41.    margin: 0;
  42.    padding: 0; }
  43. html {
  44.    min-width: 60em;
  45.    width: auto; }
  46. label { display: block; }
  47. input { display: inline-block; vertical-align: middle; }
  48. table {
  49.    border: none;
  50.    border-collapse: collapse;
  51.    color: #696969;
  52.    margin: 0;
  53.    padding: 0;
  54.    text-align: left;
  55.    white-space: nowrap;
  56.    min-width: 30em; }
  57. tr { line-height: 130%; }
  58. td { border: thin solid; padding: .5em 1em .5em 1em; width: auto; vertical-align: middle; }
  59. th { border-top: medium solid; padding-left: 1em; }
  60. /* ]]> */
  61. </style>
  62. <script type="text/javascript">
  63. /* <![CDATA[ */
  64. var hexdec = /^[\#]{1}[\d-a-fA-F]{6}$/;
  65.  
  66. var ua = { ref : function( id ) {
  67.    if ( document.all ) {
  68.    return document.all[id]; }
  69.    else if ( document.getElementById ) {
  70.    return document.getElementById(id); }
  71.    else { 
  72.    return document.layers[id];      } 
  73.   } 
  74. }
  75.  
  76. function demo(e) {
  77. e = e ? e : window.event;
  78. t = e.target ? e.target : e.srcElement;
  79.  
  80. if (( ua.ref ) && ( t.tagName.toLowerCase() == 'input' )) { 
  81. if ( !hexdec.test(t.value) ) {
  82. do {
  83. var msg = prompt('Please enter a valid hexdec value!\n(e.g. #000AAA)'); }
  84. while(!hexdec.test(msg)); 
  85. t.value = msg; }
  86. for ( var x = 0; x <= 1; x++ ) {
  87. if ( t.name == (('colour') + x ) ) { ua.ref((('row') + x)).style.color = t.value; }
  88. if ( t.name == (('bgcolour') + x )) { ua.ref((('row') + x)).style.backgroundColor = t.value; 
  89.       }
  90.     } 
  91.   } 
  92. }
  93. if (document.addEventListener) 
  94. document.addEventListener('change',demo,false);
  95.  
  96. else if (document.attachEvent) 
  97. document.attachEvent('onchange',demo);
  98.  
  99. else 
  100. document.onchange = demo;
  101.  
  102. /* ]]> */
  103. </script>
  104. </head>
  105. <body>
  106. <div id="wrapper">
  107. <div id="tube">
  108. <form action="#" id="frm" onsubmit="return false;">
  109. <table summary="JavaScript Demo">
  110. <caption>JavaScript Demo</caption>
  111. <tr>
  112. <th><label>Text Colour</label></th>
  113. <th><label>Background Colour</label></th>
  114. </tr>
  115. <tr>
  116. <td id="row0" colspan="2">Designated to TextField 1(colour) and 2(bgcolour)</td>
  117. </tr>
  118. <tr>
  119. <td id="row1" colspan="2">Designated to TextField 3(colour) and 4(bgcolour)</td>
  120. </tr>
  121. <tr>
  122. <td><label>Colour: <input type="text" id="colour0" name="colour0" value="textfield 1" /></label></td>
  123. <td><label>BgColour: <input type="text" id="bgcolour0" name="bgcolour0" value="textfield 2" /></label></td>
  124. </tr>
  125. <tr>
  126. <td><label>Colour: <input type="text" id="colour1" name="colour1" value="textfield 3" /></label></td>
  127. <td><label>BgColour: <input type="text" id="bgcolour1" name="bgcolour1" value="textfield 4" /></label></td>
  128. </tr>
  129. </table>
  130. </form>
  131. </div>
  132. </div>
  133. </body>
  134. </html>
  135.  
Reply With Quote Quick reply to this message  
•
•
Join Date: Feb 2009
Posts: 9
Reputation: eawade is an unknown quantity at this point 
Solved Threads: 0
eawade eawade is offline Offline
Newbie Poster

Re: change background color and font color

 
0
  #8
Feb 13th, 2009
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.
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: change background color and font color

 
0
  #9
Feb 13th, 2009
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:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. if (ua.ref && t.id) {
hope this will finalized the issue. Good day to you...
Reply With Quote Quick reply to this message  
•
•
Join Date: Feb 2009
Posts: 9
Reputation: eawade is an unknown quantity at this point 
Solved Threads: 0
eawade eawade is offline Offline
Newbie Poster

Re: change background color and font color

 
0
  #10
Feb 14th, 2009
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.
Reply With Quote Quick reply to this message  
Reply
1 2

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



acid2 ajax ajaxcode ajaxhelp animate array automatically beta box bug calendar cart checkbox class codes column cookies createrange() css cursor date debugger decimal design dom download dropdown editor element enter error events explorer firefox focus form frameworks getselection google gwt html htmlform iframe image() images index internet java javascript jawascriptruntimeerror jquery jsf jsfile jsp jump listbox maps masterpage math menu microsoft mimic mp4 object onmouseover parent php player post problem programming progressbar prototype rating redirect regex runtime safari scale scriptlets search select session shopping size sql starrating text textarea toggle validation variables w3c web website window windowofwords windowsxp wysiwyg \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC