JavaScript - Don't Know How To Change Table's Row Color Depending On Cell Contents; Html And Xml
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. Similar TutorialsHello, 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'].'"> Hi, 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? 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 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 <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. I'm using javascript to change the color of certain words in an html document. Right now it uses <font> to make the change. I would like to use a CSS class named "alert" from an external style sheet to make the change. I've tried multiple things but no luck (className="alert", setClassName="alert" ) What is the correct way to replace the font part with a CSS class? Here is the working script: Code: <script type = "text/javascript"> window.onload = function (){ var text = document.getElementsByTagName('body')[0].innerHTML; text = text.replace(/disabled/gi, "<font color=red>Disabled</font>" ); text = text.replace(/\blocked/gi, "<font color=red>Locked</font>" ); document.getElementsByTagName('body')[0].innerHTML = text; } </script> I need to make a javascript that when I am at a page within a game I play and click the javascript, it will get the value of a table cell, separate them to x and y variables and then put the values into a link that opens. The open link is of a php script that uses $_GET for the values of the variables to query my database. I am terrible at javascript and have been trying to do this for 2 days now with no success. So I hope I can find help here. Here's the scripts so it is easier to understand: This is part of the html page that is from the game. I need to have the javascript get 432|608 and assign x=432 and y=608 in this case, although those number change, the place in the table that that they are displayed do not change. <td>Coordinates:</td> <td><a href="game.php?village=19392&s=map&x=432&y=608">432|608</a></td> <html> <head> <title></title> <meta http-equiv="Content-Language" content="de"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Page-Enter" content="revealTrans(Duration=0.1,Transition=4)"> <link rel="stylesheet" type="text/css" href="kingsage.css"> <link rel="shortcut icon" href="favicon.ico" type="image/ico"> <script src="js/kingsage.js?hash=1e4c479f8ba66202f3b1bfb74414eef4" type="text/javascript"></script> <script src="js/mootools-1.2-core-nc.js?hash=1e4c479f8ba66202f3b1bfb74414eef4" type="text/javascript"></script> <script src="js/mootools-1.2-more.js?hash=1e4c479f8ba66202f3b1bfb74414eef4" type="text/javascript"></script> <script src="js/map_src.js?hash=1e4c479f8ba66202f3b1bfb74414eef4" type="text/javascript"></script> </head> <body> <script type="text/javascript"> //<![CDATA[ lang = new Array(); lang['DAY'] = 'Day'; lang['DAYS'] = 'Days'; //]]> </script> <div style="background: rgb(0, 0, 0) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;" align="center"> <table style="border-collapse: collapse; height: 100%;" width="100%" cellpadding="0" cellspacing="0"> <tbody> <tr valign="top"> <td width="50%" align="right"> <br> </td> <td style="width: 840px;"> <table style="border-collapse: collapse; width: 840px; height: 100%;" cellpadding="0" cellspacing="0"> <tbody> <tr> <td class="lay_content" valign="top"><a name="head2"></a> <div class="contentpane"> <table class="borderlist" style="width: 420px;"> <tbody> <tr> <th colspan="2">Abandoned settlement</th> </tr> <tr> <td>Coordinates:</td> <td><a href="game.php?village=19392&s=map&x=432&y=608">432|608</a></td> </tr> <tr> <td>Points:</td> <td>390</td> </tr> <tr> <td>Player:</td> <td><br> </td> </tr> <tr> <td>Alliance:</td> <td><a href="game.php?village=19392&s=info_ally&id="></a><br> </td> </tr> </tbody> </table> <br> </div> </td> </tr> </tbody> </table> </td> <td width="50%" align="left"> <br> </td> </tr> </tbody> </table> </div> <div id="settlement" style="display: none;"></div> <script type="text/javascript"> //<![CDATA[ startCounter(); //]]> </script> </body> </html> Here's the php script that will process the x and y Code: <?php putenv("TZ=Europe/Berlin"); session_start(); include("includes/config.php"); $username = $_GET['username']; $pass = $_GET['pass']; $x = $_GET['x']; $y = $_GET['y']; $now = time(); //confirm user can make claim global $conn; $q = "SELECT password FROM users WHERE username = '$username' AND active = 1"; $result = mysql_query($q,$conn); if(!$result || (mysql_numrows($result) < 1)) { $data = "Your identity can not be authenticated"; } else { $dbarray = mysql_fetch_array($result); if($pass == $dbarray['password']) { $continue = true; } else { $data = "Your password can not be authenticated"; } } //if can claim then check the village if($continue) { $q = "SELECT * FROM `claims` WHERE x = '$x' AND y = '$y' AND state = 1"; $village = mysql_query($q, $conn); $result = mysql_fetch_assoc($village); if(!$result) { $can_claim = true; } elseif($result) { if($result['username'] == $username) { $data = "You already have an active claim on ($x|$y)"; } elseif($result['username'] <> $username) { $claimer = $result['username']; $data = "$claimer already has an active claim on ($x|$y)"; } } if($can_claim == true) { global $conn; $claim_made = time(); $claim_expires = $claim_made + 432000; $state = 1; $q = "INSERT INTO `claims` (x, y, username, claim_made, claim_expires, state) VALUES ('$x', '$y', '$username', '$claim_made', '$claim_expires', '$state')"; $add_claim = mysql_query($q, $conn); if($add_claim) { $data = "Success! You claimed ($x|$y)"; } else { $data = "Error: Your claim on ($x|$y) did not complete."; } } echo "<SCRIPT>alert(\"$data\");</SCRIPT>"; } ?> The javascript should link to this php script and send the variables like this: 'http://twv-kingsage.tw-family.us/auto_add_claim.php?username=username&pass=md5_password&x="+x+"&y="+y' Can someone tell me how to extract the values for x and y from the page and get them to the link? Thanks for the help, it is much appreciated. 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 Is there a way to resize an iframe dynamically so that you never get the scroll bar and essentially hide that there is an iframe? Better integration really. Basically I want to iframe a forum into my site so that the design down the sides and top which my friend does using iweb are not messed with. We have a central area which can be longer or shorter depending on the forum. I have recently installed google custom search on a page- using the iframe selection, so I can have control over the look of the page and it isn't a google branded page. The problem is- with JS disabled, this form doesn't work. However, the option to display results on a google hosted page does work. This is very important for accessibility for this site, so what I am wanting to do is have the basic search show ONLY if there is no JS enabled. But for everyone else- it displays as I intended. JS isn't my bread and butter, but I think it's the tool to use here. Could someone offer some guidance? Main Form Code: <div style="float:right"> <script type="text/javascript" src="/js/main.js"></script> <div id="searchBox" class="searchBoxTopLevelNav"> <form name="search" id="search" action="search.php?"> <label for="q" style="display:none";>Site Search</label> <input onclick="javascript:SearchClear(this);" onkeypress="javascript:OverrrideForms(this);" name="q" id="q" autocomplete="off" class="GoogleSearchTextBox" value="Search" /> <input name='btnG' onclick="javascript:SearchGoogle($(this).prev('input.GoogleSearchTextBox:first'));return false;" type='image' value='Search' src='../img/icons/search-gray.gif' alt='Go' align="top"/> </form> </div> Form to display only if JS is not enabled Code: <form action="http://www.google.com/cse" id="cse-search-box"> <div> <input type="hidden" name="cx" value="#" /> <input type="hidden" name="ie" value="UTF-8" /> <input type="text" name="q" size="31" /> <input type="submit" name="sa" value="Search" /> </div> </form> <script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script> I'm trying to use javascript to have my webpage black at night and bright blue (#2A7FFF) in the day time. How would I go about this? :/ I have also tried to use javascript to change a picture depending on the time of day, this is what I have used. IN THE <head> Code: <script type="text/javascript"> var hourofday = thedate.getUTCHours(); function sun() { // return TRUE if it's day if (hourofday > 7 && hourofday < 10) { return true; } return false; } </script><script type="text/javascript"> var hourofday = thedate.getUTCHours(); function sun() { // return TRUE if it's day if (hourofday > 7 && hourofday < 10) { return true; } return false; } </script> IN THE <body> Code: <div id="layer1" style="position:absolute; top:5px; left:5px; width:190px; height:190px; z-index:1; padding:5px; border:#000000 2px solid;background:color:#000000;"> <script type="text/javascript"> if (sun()) { document.write("<img src="www.oliverbinns.webs.com/images/sun.png" />"); } else { document.write("<img src="www.oliverbinns.webs.com/images/moon.png" />"); } </script> </div> Hi.. Im currently working on my project and I have a big problem with changing the layout of tabs. Basically, when I launch my GUI, it will display "No Data Available" in my view tab. In my Add tab, I have the admin panel whereby the user enters the data to be stored and display. the problem now lies when displaying. It is a juke ringtone gallery whereby when there are data being stored in the database, it will display the following in a Gridlayout; I applied the ChangeListener to the JTabbedPane which is tp. I added tabs using tp.add. I declared this in my ChangeListener: if(tp.getSelectedIndex() == 0) createViewPanel(); else if(tp.getSelectedIndex()==1) createAddPanel(); where createViewPanel() is for the View tab and createAddPanel() is for the Add tab. i also called the respective tabs using frameView = (JPanel)tp.getComponent(0); to get the layout for View tab and frameAdd = (JPanel)tp.getComponent(1); to get the layout for the Add tab. What methods need I use so that I can display the different data in the specific GridLayout to be displayed in the View tab or what other ways can I do it? Hello everyone Background I have an electronics site on which I have a code generator. Im an stuck on how to acheive something. I will simplify what I want to do, so I can then adapt it to my code. I have a paragraph of text on the web page, on which I want to change some words with in the paragraph depending on 2 radio buttons. Example (radio buttons & short paragraph): (Radio Button) Apples (checked) (Radio Button) Bananas "Welcome to jakes fruit shop. You have selected apples today" (apples being the word that would change if the banana radio button is checked) Here is the code generator if your interested. http://www.jakeselectronics.net/conf...erator877A.php What I actually want to do is put other 'fixed' text in the input text area (near botton of page) with only the config line changing. And If I can be shown how to do the short example above, i think I will be able to edit my generator and get it to do what i want it to do. I'm still a relative noob and i'm wondering if anyone can help. items use a structured form, so any item in that category will display on the same form when selected i want to have the save button run its normal save on all items except 1 specific item - on the 1 item i want to have it function as a save as copy (while still having "save" as its visible text), the current code set in a drop down list is $options[] = array( 'text' => 'JSAVE', 'task' => $this->getName() . '.save'); $options[] = array( 'text' => 'Save as new project', 'task' => $this->getName() . '.save2copy', 'options' => array('access' => ($this->item->id > 0))); can anyone offer any suggestions? really stuck on this one Hello. The code below lets a user select a drop down option and a picture changes depending on the selection. I am trying to make it so when you select an option on the dropdown the picture shows up in the center of the screen and in the background behind the text. Here is the code. Code: <html> <head> <style type='text/css'> #txt {background-repeat:no-repeat;width:200px;height:200px;} </style> <script type='text/javascript'> function div_bg(team){ document.getElementById('txt').style.backgroundImage="url(images/" + team + ".jpg)"; } </script> </head> <body> <select name='team' onChange='div_bg(this.value);'> <option name='arsenal' value='arsenal'>Arsenal</option> <option name='liverpool' value='liverpool'>Liverpool</option> </select> <div id='txt'></div> </body> Thanks in advance!! 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 there, I basically need script that will detect if the user is using Internet Explorer, and then display a different page to the one that would be loaded for any other browser.
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 I have a multipage form. I can put data entered in hidden form elements from previous pages. I want to show or hide table rows depending on this data value. For example, I collect a list of names in first form, but if some names are blank I dont want to show the table row associated with that name to collect more data. I have seen loads of code to toggle rows but cant find any which shows me how to toggle on a variable. Thanks in advance. Hi, How I build a table based on a list under a <DIV></DIV> like this? printing: 1 and: 3 typesetting: 2 industry: 2 has: 2 been: 1 s: 1 standard: 1 ever: 1 since: 1 1500s: 1 when: 1 an: 1 unknown: 1 printer: 1 took: 1 a: 2 galley: 1 type: 3 scrambled: 1 Regards Bob |