JavaScript - How To Change Bg Color Of A Div, By Clicking A Table Cell
Hello,
Can someone please show me how to do the following in Javascript. I basically want the background color of a div (banner) to change when the user clicks a green or blue table cell. So if they click the blue table cell, the backgound color of the div changes to blue (its green by default). Also, when they have picked what color they want, I'd like the color to be stored in the value of the form 'BannerBGColor' so I can post their banner color to database. Any help is greatly appreciated. Many thanks -------------------------------------------------------------------------- Banner: <div style="width:400px; float:center; background:#00FF00; border-color:#000000; border-style: solid; border-width: 2px;"> <p>This is a banner.</p></div>'; -------------------------------------------------------------------------- Colour picker table to change colour of Banner above: <table width="300" border="1" cellspacing="1" cellpadding="1"> <tr> <td colspan="2">Pick a color below to change banner background:</td> </tr> <tr> <td bgcolor="#00FF00">Green</td> <td bgcolor="#00FFFF">Blue</td> </tr> </table> ------------------------------------------------------------------------- Form field to insert chosen Banner Background colour when form is submitted - <input type="text" name="BannerBGColor" value="'.$_POST['BannerBGColor'].'"> Similar TutorialsHi, I have a php script that displays database data in a web table. I also have a javascript code which is supposed to compare the value entered in a web form to that hard coded in the script and change the color to green if its below, amber if its equal and red if its greater than. Below is my javascript code: Code: <script type="text/javascript"> function hallo(){ var value1=200 var inputVal = window.document.getElementById("one").value; //alert(negNum); if(inputVal > value1){ window.document.getElementById("color").style.color="red"; } else if(inputVal < value1) { window.document.getElementById("color").style.color="green"; } else if(inputVal == value1) { window.document.getElementById("color").style.color="#FF7E00"; } } </script> And below is my php script that displays the data in a web table. Code: <body> <form> Value1: <input type="text" name="one" id="one" ><br/> Value2: <input type="text" name="two" id="two" value="" onClick="hallo();"> <br/> Value3: <input type="text" name="three" id="$cell" value="test data"> </form> <?php require_once("database.php"); $CustID=$_POST['CustomerID']; $query="SELECT c.*,r.Meter_No,r.January,r.February,r.March,r.April,r.May,r.June FROM customer AS c,readings AS r WHERE c.CustomerID=r.CustomerID AND c.CustomerID='".$CustID."'"; $result=mysql_query($query); $num=mysql_numrows($result); mysql_close(); ?> <table border="0" cellspacing="2" cellpadding="2"> <tr> <th><font face="Arial, Helvetica, sans-serif">CustomerID</font></th> <th><font face="Arial, Helvetica, sans-serif">Title</font></th> <th><font face="Arial, Helvetica, sans-serif">First_Name</font></th> <th><font face="Arial, Helvetica, sans-serif">Last_Name</font></th> <th><font face="Arial, Helvetica, sans-serif">Meter_No</font></th> <th><font face="Arial, Helvetica, sans-serif">January</font></th> <th><font face="Arial, Helvetica, sans-serif">February</font></th> <th><font face="Arial, Helvetica, sans-serif">March</font></th> <th><font face="Arial, Helvetica, sans-serif">April</font></th> <th><font face="Arial, Helvetica, sans-serif">May</font></th> <th><font face="Arial, Helvetica, sans-serif">June</font></th> </tr> <?php $i=0; while ($i < $num) { $f1=mysql_result($result,$i,"CustomerID"); $f2=mysql_result($result,$i,"Title"); $f3=mysql_result($result,$i,"First_Name"); $f4=mysql_result($result,$i,"Last_Name"); $f5=mysql_result($result,$i,"Meter_No"); $f6=mysql_result($result,$i,"January"); $f7=mysql_result($result,$i,"February"); $f8=mysql_result($result,$i,"March"); $f9=mysql_result($result,$i,"April"); $f10=mysql_result($result,$i,"May"); $f11=mysql_result($result,$i,"June"); ?> <tr> <td><font face="Arial, Helvetica, sans-serif"><?php echo $f1; ?></font></td> <td><font face="Arial, Helvetica, sans-serif"><?php echo $f2; ?></font></td> <td><font face="Arial, Helvetica, sans-serif"><?php echo $f3; ?></font></td> <td><font face="Arial, Helvetica, sans-serif"><?php echo $f4; ?></font></td> <td><font face="Arial, Helvetica, sans-serif"><?php echo $f5; ?></font></td> <td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f6; ?></font></td> <td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f7; ?></font></td> <td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f8; ?></font></td> <td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f9; ?></font></td> <td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f10; ?></font></td> <td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f11; ?></font></td> </tr> <?php $i++; } ?> </body> As you can see from my javascript, i am getting the elements by id (getElementById("color")). Currently, only the first <td> with id='color' is changing when the value is entered. How do I make the text in other table cells with id='color' change color when the comparison value is entered? I am working on a project where I have 5 XML files that I bring into HTML and display the tables on one browser page. I would like for the row of the tables to change depending on what is in the "status" field. There will only be the following inputs in that column - "IS" which is in stock(green), "OS" which is out of stock(red), and "PO" which is Pre-Order(blue). Code: !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=iso-8859-1" /> <title>ABC Book Store</title> <style type="text/css"> <!-- .style1 { font-size: 10pt; } --> </style> <script> function ld_fiction() { var doc=nb_fiction.XMLDocument; doc.load("fiction.xml"); document.getElementById("head_id").innerHTML="Fiction "; } function Id_nfiction() { var doc_s=nb_nfiction.XMLDocument; doc_s.load("nfiction.xml"); document.getElementByID("head_id_d").innerHTML="NonFiction"; } function ID_selfhelp() { var doc_t=nb_selfhelp.XMLDocument; doc_t.load("selfhelp.xml"); document.getElementByID("head_id_e").innerHTML="SelfHelp"; } function ID_reference() { var doc_u=nb_ref.XMLDocument; doc_u.load("ref.xml"); document.getElementByID("head_id_f").innerHTML="Reference"; } function ID_mags() { var doc_v=nb_mags.XMLDocument; doc_v.load("mags.xml"); document.getElementByID("head_id_g").innerHTML="Mags"; } </script> <XML id="nb_fiction" src="fiction.xml"></XML> <XML id="nb_nfiction" src="nfiction.xml"></XML> <XML id="nb_selfhelp" src="selfhelp.xml"></XML> <XML id="nb_ref" src="ref.xml"></XML> <XML id="nb_mags" src="mags.xml"></XML> <object id="nb_fiction" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" width="0" height="0"></object> <object id="nb_nfiction" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" width="0" height="0"></object> <object id="nb_selfhelp" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" width="0" height="0"></object> <object id="nb_ref" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" width="0" height="0"></object> <object id="nb_mags" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" width="0" height="0"></object> <body> <table width="30%" border="0" align="left" cellspacing="1" font size="10"> <tr bgcolor="#CCCCCC"> <td colspan="2"> <table id="FICTIONTABLE" table width="100%" datasrc="#nb_fiction" font size="1" border="0" align="center" bordercolor="#FFFFFF"> <caption> <span>Fiction </span> </caption> <thead> <tr> <th span class="style1">Stock No.</th></span> <th span class="style1">Title</th></span> <th span class="style1">Author</th></span> <th span class="style1">Status</th></span> <th span class="style1">Price</th></span> <th span class="style1">Publisher</th></span> <th span class="style1">Year of Release</th></span> </tr> </thead> <tbody> <tr> <td><span class="style1" datafld="stock"></td></span> <td><span class="style1" datafld="title"></td></span> <td><span class="style1" datafld="author"></td></td></span> <td><span class="style1" datafld="status"></td></span> <td><span class="style1" datafld="price"></td></span> <td><span class="style1" datafld="publisher"></td></span> <td><span class="style1" datafld="year"></td></span> </tr> </tbody> </table> </td> </tr> </body> </html> I only included the first part of the html code along with the first table, but there is a table for each xml file. You can also probably tell how the XML files are structured by looking at the way they are displayed in the tables. I think what I want to do can be accomplished with JavaScript, but I have no idea how to do it and it's the only thing I have left before I'm done. Any help would really be appreciated and thanks in advance. <script language="JavaScript"> function changeColor(cell_id){var state1="#dde6ed"; var state2="#ffc20e"; var cellid = new Array ("id1", "id2", "id3", "id4", "id5", "id6"); for(var i = 0; i < cellid.length; i++){var nav = document.getElementById(cellid[i]); if(cellid == nav.id){nav.style.backgroundColor=state2;} else {nav.style.backgroundColor=state1;}}} </script> Can anyone tell me what is wrong with this script. I put an onClick= changeColor(this);" in my <td> tag to call the script but still not working. Hello, I am trying to change the background color of a table based on the value of a picklist. For instance. if the picklist value was "1", then the background color of the table should be red. Not sure where I went wrong in my code. Code: <html> <body> <script type="text/javascript"> if (level="1") { levelColor = #FF0000; } </script> <select name="level"> <option value="1">1 <option value="2">2 <option value="3">3 <option value="4">4 <option value="5">5 </select> <br><br> <center> <table name="levelColor" width="700px" height="100px" cellspacing="0" cellpadding="0" border="1"> <tr> <td><center>This is the level.</center></td> </tr> </table> </center> </body> </html> Please help. Thank you. Hi! New to JS... have been trying to rework this to call additional, independent sets of colors to cycle through (so it would loop thru a set of grays, a set of primary colors, etc). I would use perhaps a different function name in the HTML to call different sets of colors. If this is more complex than I think it is, I think 3 sets would be plenty. Would be hugely grateful for any help, thanks so much in advance. (demo link of script in current state at bottom) Code: <html><head><title></title> <script language=javascript> colors = ["#cacdca", "#b2b4b2", "#969896", "#7d7f7d", "#ffff00"]; cRGB = []; function toRGB(color){ var rgb = "rgb(" + parseInt(color.substring(1,3), 16) + ", " + parseInt(color.substring(3,5), 16) + ", " + parseInt(color.substring(5,7), 16) + ")"; return rgb; } for(var i=0; i<colors.length; i++){ cRGB[i] = toRGB(colors[i]); } function changeColor(target){ var swapper = navigator.appVersion.indexOf("MSIE")!=-1 ? toRGB(document.getElementById(target).style.backgroundColor) : document.getElementById(target).style.backgroundColor; var set = false; var xx; for(var i=0; i<cRGB.length; i++){ if(swapper == cRGB[i]){ if(((i+1)) >= cRGB.length){ xx = 0; }else{ xx = i+1; } document.getElementById(target).style.backgroundColor = colors[xx]; document.getElementById(target).style.backgroundImage.show; set = true; i=cRGB.length; } } set ? null : document.getElementById(target).style.backgroundColor = colors[1]; } </SCRIPT> </head> <body bgcolor="#333333"> <div> <div id="a1" onmouseover=changeColor(this.id); style="left: 120px; background-image: url(background1.png); width: 180px; background-repeat: no-repeat; position: relative; height: 80px; background-color: none"></div> <div id=a2 onmouseover=changeColor(this.id); style="left: 120px; background-image: url(background2.gif); width: 180px; background-repeat: no-repeat; position: relative; height: 80px; background-color: #666633"></div> <div id=a3 onmouseover=changeColor(this.id); style="left: 120px; background-image: url(background3.png); width: 180px; background-repeat: no-repeat; position: relative; height: 80px; background-color: #666633"></div></div> </body> </html> Demo: http://theclutch.com/rollover_color_..._bgndimage.htm I tried to word the question as best as possible, but here is what I want to do. I am creating a calculator online and it is getting more and more extensive, which is good b/c I'm learning a lot. Here is what I'm trying accomplish now. I am using "input" to get information from the user in the top section of my calculator and that will always stay the same. The part that will change is the results section (bottom part of the calc) based on a few different variations or setups, so I want to be able have them click on a few different options. Option 1 Option 2 Option 3 Depending on which one they click I want the javascript that is run for the results section to correspond to the option chosen. I also, want to be able to have a default option displayed the first time the page is loaded and then have it change if a different option is chosen. I don't think reloading the page is necessary, but I'm new to this and could use a little direction. I hope what I'd like to do makes a little sense. I'm not asking for any code written that will do this, but naturally something hints or tips that could get me going. I don't know how to "monitor" a link and return a value to a variable, so that it can be put into a an if statement in the results section. After that, it would be continually monitored or somehow restarted if the variable does change. Again, I don't know if this is the best way to go at it, but I'm not sure at all. Any help would be awesome. I have looked at "onclick", but I'm not completely sure how I can tie it all together of if I should use another method. Thanks for any suggestions/ideas/help. Hi all, I currently have this javascript that will change the cell to green with one click... Code: <script type="text/javascript"> function ColorChange(obj){ obj.style.color='#FFFFFF'; obj.style.backgroundColor='#66CC33'; obj.parentNode.style.backgroundColor='#66CC33'; } </script> echo "<td align=\"center\" bgcolor=\"#EEEEEE\"><a href=\"#\" onclick=\"ColorChange(this)\">$day_num</a></td>"; the problem is that I need around 3 different colors to be possible.. e.g. 1 click turns cell green | 2 turns is red | 3 turns it orange. I'm not sure how to take this javascript further? Would someone be kind enough to point me in the right direction? Many thanks, Greens85 Hi All I'm trying to get a drop down box to change the colour of more than 1 td cell at a time. I can get the boxes to work with single cells but not more than one. I've tried giving the additional cell the same id but that doen't seem to work It's probably simple but I just can't seem to see it. Thanks in anticipation. Mike http://www.blandfordsac.co.uk/ Code: <script type="text/javascript">function changeColor(bg) {document.getElementById("a").style.backgroundColor = bg;}</script> <script type="text/javascript">function changeColorb(bg) {document.getElementById("b").style.backgroundColor = bg;}</script> <script type="text/javascript">function changeColorc(bg) {document.getElementById("c").style.backgroundColor = bg;}</script> <script type="text/javascript">function changeColord(bg) {document.getElementById("d").style.backgroundColor = bg;}</script> Code: <tr><!-- row 1 --> <td id="a" height="205" width="345"><p align="center"> <a href="images/bd8/bd8n.jpg" target="_self" rel="wplightbox~#~~#~"> <img src="images/bd8/bd8n%20(WinCE).jpg" width="240" height="160" border="0" title="" alt="bd8n.jpg"> </a> </td> <td height="205" width="246" colspan="3"><h1 align="center"><span style="font-weight: 400"><font face="Arial">Bd 8</font></span></h1></td> <td id="b" height="205"><p align="center"> <a href="images/bd8/bd8e.jpg" target="_self" rel="wplightbox~#~~#~"> <img src="images/bd8/bd8e%20(WinCE).jpg" width="240" height="160" border="0" title="" alt="bd8e.jpg"> </a> </td> </tr> <tr><!-- row 2 --> <td> <p align="center"> <select name="level" onChange="changeColor(value)"> <option value="">Choose</option> <option value="#FFFFFF">White</option> <option value="#33FF00">Green</option> <option value="#000000">Black</option> <option value="#FF0000">Red</option> </select> </td> <td height="59" width="246" colspan="3"> </td> <td> <p align="center"> <select name="level" onChange="changeColorb(value)"> <option value="">Choose</option> <option value="#FFFFFF">White</option> <option value="#33FF00">Green</option> <option value="#000000">Black</option> <option value="#FF0000">Red</option> </select> </td> </tr> Hi friends, What I have been trying to achieve is, On my index.htm, I have a horizontal cell named "memberarea" which originally shows username & password input fields. After the user logs in, this area changes itself to a "Welcome Name, Lastname" field. I want that this cell displays again the username and password input fields in case of the session of the user has expired. I have tried it with the following code (within the Iframe in index.htm): ----------------------------------------- <script> if ("<%=session("LoginFirstName")%>" == "") { var m = " <p align="center"> <font style="font-size: 8pt; font-weight: 700" face="arial"> Username:</font> <span style="font-size: 1pt"> <input type="text" name="uid" id="uid" size="14" style="width: 65; height: 17; font-size: 8pt"></span><font face="arial" style="font-size: 8pt"> </font><font style="font-size: 8pt; font-weight: 700" face="arial">Password:</font><font face="arial" style="font-size: 8pt"> </font><span style="font-size: 1pt"> <input type="password" name="pwd" id="pwd" maxlength="10" size="14" style="width: 65; height: 17; font-size: 8pt"></span><span style="font-size: 1px"> </span> <input type="submit" value="Enter" name="B1" style="width: 35; height: 17; font-size:9px" onclick="return login()">"; window.parent.document.getElementById('memberarea').innerHTML=m; } </script> -------------------------------------------------- This code gives me the error that on the 12xx'the line (which does not exist-the whole code is 5xx lines). there is a ";" missing which I could not found. Any ideas how to achieve this? Thank you for your comments For Script http://www.dynamicdrive.com/dynamici...htmlticker.htm How do I change the "subject" color above each message from the default black to white ? I am using a great script i downloaded at http://kryogenix.org/code/browser/sorttable/ to sort tables by the header. my problem is I want to add to this that everyother row should have a gray background. I now do it by assigning a different class to every other row but when you sort it keeps the class. -- is there a way to change the background color of every other row in javascript that I can use with the above script? Still need assistance, thanks Okay, so here's an example code of what I'm needing: Code: <html> <head> <title></title> <style type="text/css"> #greenrow { background-color:#090; } #redrow { background-color:#F00; } </style> <script type="text/javascript"> if (calculate.level.value >= calculate.getElementById('shrimp').value){ class = greenrow; } else { class = redrow; } </script> </head> <body> <form name="calculate"> <table> <tr> <td><label> Level<input name="level" type="text" size="5" /></label> </td> </tr> <tr id="shrimp"> <td>Shrimp</td> <td align="center"><label> <input type="text" name="shrimp" /> </label></td> <td colspan="3" align="left">10</td> </tr> </table> </form> </body> </html> Okay so what I want to be done is to get information from the input text area "level" and IF "level" is >= 10...for this one certain row, I want it to get the class #greenrow. Else, class = #redrow. Thanks Clearly I'm doing something wrong. Here's my external javascript: Code: document.getElementById('maincontent').style.backgroundColor = "#660000"; Here's my external CSS Code: #maincontent { background-color: #999; } Here's my HTML: Code: <div id="container"> <div id="maincontent"> <p>blah blah blah</p> </div> </div> Nothing happens. What am I doing wrong? Can this be done? Change background color a row of depending on cell data on that row. e.g Items <table border="1"> <tr> <td><b>Cost</b></td> <td><b>Item</b></td> </tr> <tr> <td>12</td> <td>hats</td> </tr> <tr> <td>34</td> <td>socks</td> </tr> <tr> <td>12</td> <td>hats</td> </tr> <tr> <td>12</td> <td>hats</td> </tr> <tr> <td>24</td> <td>gloves</td> </tr> </table> Any pointers in the right direction please I have a number var number = 1,235.326232 I need to display it like following with the last 4 numbers in red. 1,235.32 6232 I have tried number.slice(0,-4)+"<font color='red'>"+number.substr(number.length-5,4); however it keeps messing up the comma and decimal placement. Due to a long story which we don't need to go into here I am trying to change the color of a link after it has been clicked on WITHOUT using CSS. When the link is clicked some javascript is called. I can do this in IE by adding this "this.style.color = 'black'". However this doesn't work in other browsers. Anyone know how I could get this to work in other browsers? I've spend hours on this... Thanks for yuor time! here is my problem i need to set the color of a text here is what i need to change Code: <div style="position:absolute; left:10px; top:100px; width:250px; text-align:center;"> <font color="lightgreen" size="6"><b>* Mileage *</b></font><b> <font color="black" size="6"><div id="bullet4">Not Specified</div></font><br></b> <font color="lightgreen" size="6"><b>* Gearbox *</b></font><b> <font color="black" size="6"><div id="bullet5">Not Specified</div></font><br></b> <font color="lightgreen" size="6"><b>* Engine size *</b></font><b> <font color="black" size="6"><div id="bullet6">Not Specified</div></font><br></b> <font color="lightgreen" size="6"><b>* Body style *</b></font><b> <font color="black" size="6"><div id="bullet7">Not Specified</div></font><br></b> </div> now i need to set the color from a text file server side so far i can set the contents of the div serverside but the customer needs to be able to change the color of the innerhtml . now i would like to store the color in a text file color.txt i can make the code to change the txt file myself inside the color.txt would be "lightgreen" or other color how would i go about this. so in basic terms i need to set the color of the text from a color.txt file sat next to the index.html I am trying to figure out how to change certain text's font color, in the text area. I have been looking everywhere, but I haven't found a solution. Any help would be great, thanks, mazzzzz Hi guys, Am creating a web page in which a user searches a customer using customer id. The results are then displayed in a table. This is working fine. In addition to this, I have created another form in which a user enters a value in a textbox. This value is then compared to the results obtained in the previous table.The values below should be shown in green and those above in red (identical values may be shown in amber). This should be acomplished using javascript. My code is as shown below: PHP Code: <!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>Search Script</title> <script type="text/javascript"> function hallo(){ var value1=200 var inputVal = window.document.getElementById("one").value; //alert(negNum); if(inputVal > value1){ window.document.getElementById("color").style.color="red"; } else if(inputVal < value1) { window.document.getElementById("color").style.color="green"; } else if(inputVal == value1) { window.document.getElementById("color").style.color="#FF7E00"; } } </script> </head> <body> <form> Value1: <input type="text" name="one" id="one" ><br/> Value2: <input type="text" name="two" id="two" value="" onClick="hallo();"> <br/> Value3: <input type="text" name="three" id="$cell" value="test data"> </form> <?Php require_once("database.php"); $CustID=$_POST['CustomerID']; $query="SELECT c.*,r.Meter_No,r.January,r.February,r.March,r.April,r.May,r.June FROM customer AS c,readings AS r WHERE c.CustomerID=r.CustomerID AND c.CustomerID='".$CustID."'"; $result=mysql_query($query) ; //If no matching records are found in the database,the code below will display a customized error message $num=mysql_numrows($result)or die("No Matching Records Found In The Database!"); $fields_num = mysql_num_fields($result); echo "<h3>Historical Meter Readings</h3>"; echo "<table border='0'cellspacing='5' cellpadding='5' id ='three'><tr>"; // printing table headers for($i=0; $i<$fields_num; $i++) { $field = mysql_fetch_field($result); echo "<td >{$field->name}</td>"; } echo "</tr>\n"; // printing table rows while($row = mysql_fetch_row($result)) { echo "<tr id='color'>"; // $row is array... foreach( .. ) puts every element // of $row to $cell variable foreach($row as $cell) echo "<td align='center' <font face='Arial, Helvetica, sans-serif' >$cell</td>"; echo "</tr >\n"; } mysql_free_result($result); ?> </body> </html> Currently my javascript code changes the entire row in the table, which is not I desired. How do I edit this script so that only values in particular CELL in a row e.g CELL 5, is changed and not the entire row? Thank you. Hi , I have 5 or 6 textboxes and all of them are required ( have required field validators ) .. I want to change their background color to yellow when they are left blank and when the box is filled the backgorund color to white ..Is it possible to do via javascript ..I am a beginer so any help is greatly appreciated |