|
JavaScript - How To Change Color Of Text In A Table Cell Using Javascript
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? 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'].'"> 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. 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 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. <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, I want to make a piece of text fade from black to white while someone puts their mouse over it and change it back to black when they move their mouse away. I did it with the following code, but I'm wondering if anyone would do some (or all) of it a different way. Thanks! Code: //convert RGB values to hexidecimal
function RGBtoHex(color) {
var digits = /(.*?)rgb\((\d+), (\d+), (\d+)\)/.exec(color);
var R = parseInt(digits[2]);
var G = parseInt(digits[3]);
var B = parseInt(digits[4]);
Hex = new Array(R, G, B);
return Hex;
}
// Start the text fading
function FadeStart(id, FadeTo) {
Element = document.getElementById(id);
OriginalColor = getComputedStyle(Element, null).color;
Start = RGBtoHex(FadeTo);
rgb = RGBtoHex(OriginalColor);
red = (Start[0] - rgb[0])/16;
green = (Start[1] - rgb[1])/16;
blue = (Start[2] - rgb[2])/16;
BeginFading = true;
Fade();
}
//Actually do the fading
function Fade() {
var Complete = (BeginFading == true && rgb[0] != Start[0] && rgb[1] != Start[1] && rgb[2] != Start[2]);
if (BeginFading == true && rgb[0] != Start[0] && rgb[1] != Start[1] && rgb[2] != Start[2]) {
rgb[0] += red;
rgb[1] += green;
rgb[2] += blue;
var ChangeColor = "rgb(" + Math.round(rgb[0]) + ", " + Math.round(rgb[1]) + ", " + Math.round(rgb[2]) + ")";
Element.style.color = ChangeColor;
time = setTimeout("Fade()", 500);
}
}
//Return text to original color
function FadeStop() {
BeginFading = false;
clearTimeout(time);
if (Element != null) Element.style.color = OriginalColor;
}
I currently have a table where the current cell (cursor hover) is highlighted along with the top cell in that column and first cell in row. I want to assign the values in these cells to input text fields. The first column cell is identified by Col1Cell[0] where Cell is the top table data cell of the current column. I can access the value of the cell by Col1Cell[0].innerHTML But when I try to assign this value to a text field nothing happens. I have Code: document.getElementById("tableID").fieldID.value = Col1Cell[0].innerHTML
Any ideas? Hi sorry if this is a very simple question but how do I change the font color for certain elements of this javascript code that the client sees on their brower? This is a count down script and I have made the code red that I am trying to change - any idea how to do this? Thanks v much!!!! <script type="text/javascript"> var today=new Date() //Enter the occasion's MONTH (1-12) and DAY (1-31): var theoccasion=new Date(today.getFullYear(), 03, 21) //Customize text to show before and on occasion. Follow grammer below: var beforeOccasionText="until this event" var onOccasiontext="Event is Today!" var monthtext=new Array("Jan","Feb","Mar","April","May","June","July","Aug","Sep","Oct","Nov","Dec") theoccasion.setMonth(theoccasion.getMonth()-1) //change to 0-11 month format var showdate="("+monthtext[theoccasion.getMonth()]+" "+theoccasion.getDate()+")" //show date of occasion var one_day=1000*60*60*24 var calculatediff="" calculatediff=Math.ceil((theoccasion.getTime()-today.getTime())/(one_day)) if (calculatediff<0){ //if bday already passed var nextyeartoday=new Date() nextyeartoday.setFullYear(today.getFullYear()+1) calculatediff=Math.ceil((nextyeartoday.getTime()-today.getTime())/(one_day)+calculatediff) } //Display message accordingly var pluraldayornot=(calculatediff==1)? "day" : "days" if (calculatediff>0) document.write("<b>"+calculatediff+" "+pluraldayornot+" "+beforeOccasionText+" "+showdate+"</b>") else if (calculatediff==0) document.write("<b>"+onOccasiontext+" "+showdate+"!</b>") </script> Hi, I am trying to work out a code where I can change the background colour of an HTML page via external JS page. Please note that I will be using different HTML pages with different colours so have to use Arrays. Here is what I have so far!!! here is my function, <script language="JavaScript"> var backColor = new Array(); backColor[0] = '#000000'; backColor[1] = '#111111; backColor[2] = '#222222'; backColor[3] = '#333333'; function changeBG(whichColor){ document.bgColor = backColor[whichColor]; } </script> ------------------------------------- What I need is to apply changeBG function to my HTML page using colour [0] Any help would be greatly appreciated! Hello everybody! This is my first post at CodingForums! I'm currently designing a wordpress theme, and I require a bit of javascript for a hover effect. I'm using Wordpress Jquery + Jquery Color Animations plugin. The structu I use a div (class="post") as a container for the wordpress post, and within the "post" div, I have a span (class="title") which I use to display the title of the post. What I want to do is: when the user hovers over (OnMouseOver) "post" div: ".title" spans's background color fades from black to red. when the user hovers out (OnMouserOut) "post" div: ".title" spans's background color fades back to black. The Code Code: $j(document).ready(function(){
$j(".posts").hover(function(){
$j (".posts .title").animate({ backgroundColor: "#FF0062" }, 300);
},function(){
$j(".posts .title").animate({ backgroundColor: "#231F20" }, 300);
});
});
The Problem The code works, except when the user hovers over any "post" div, all "title" span change color. So my question is, how do I target the code to address ONLY the "title" span in the "post" div that is in hover state? Any help would be greatly appreciated, Cheers, Drew. Hello, I am new to JavaScript. I have stuck up at a point. I have generated a table of given dimensions (say 5x5) using JavaScript. Using Mouse events, I want to add a functionality which would display the position of the cell in that table whenever mouse pointer hovers over a particular cell. Here's what I have done. Code: <html>
<body>
<h1 align="center"><u>ITA Tutorial</u></h1>
<h3>Problem Statement</h3>
<p>Prepare the table of 5 X 5. On the cursor movement over the table, display the table cell no with row X column value.</p>
<br><br>
<table border="1" align="center" cellpadding="2">
<script type="text/JavaScript">
var i, j
for (i=1;i<6;i++)
{
document.write("<TR>")
for(j=1;j<6;j++)
document.write("<TD> </TD>")
document.write("</TR>")
}
</script>
</table>
</body>
</html>
I tried adding onMouseover event in the <TD> tag but somehow the whole table disappears when I do that. Please help. I have a background slide show from codelifter.com that normally runs in the body - I would like to use it as the background in a table cell. Thanks in advance for any help, Cyber-guys Here is the code: [CODE] <html> <head> <style> body{ background-repeat: no-repeat; background-position: 200 100;} </style> <script language="JavaScript"> <!-- // (C) 2006 CodeLifter.com var speed = 3000; var crossFadeDuration = 2; var Pic = new Array(); Pic[0] = 'slideshow1_1.jpg'; Pic[1] = 'slideshow1_2.jpg'; Pic[2] = 'slideshow1_3.jpg'; Pic[3] = 'slideshow1_4.jpg'; Pic[4] = 'slideshow1_5.jpg'; var t; var j = 0; var p = Pic.length; var preLoad = new Array(); for (i = 0; i < p; i++){ preLoad[i] = new Image(); preLoad[i].src = Pic[i];} function runSlideShow(){ if (document.all){ document.body.style.filter="blendTrans(duration=crossFadeDuration)"; document.body.filters.blendTrans.Apply(); document.body.filters.blendTrans.Play();} if (document.body){ document.body.background = Pic[j]; j = j + 1 if (j > (p-1)) j=0 t = setTimeout('runSlideShow()', speed)} } //--> </script> <title> CodeLifter.com :: Background Image Slideshow With Crossfade </title> </head> <body onload="runSlideShow()" bgcolor="#000000"> <table border="0" width="444" cellpadding="0" cellspacing="0"> <tr> <td> <font size="2" face="Verdana,Arial" color="#FFFFFF"> Lorem ipsum dolor situm amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer... </font> </td> </tr> </table> </body> </html> i have a javascript running on my web page, however the text in the input field is white, on a white background. making it unreadable. is there a way to change the text color for the script. site can be viewed he www.barren-county.net the script running is the toolbar at the bottom, more specifically the "Connect" app on the right, if you open it you see that the text field is white and text is invisible. here is the code i have: Code: <head>
{S_HEADER_TAGS}
<link rel="stylesheet" type="text/css" href="{THEME_PATH}/style/style.css" />
<!-- IF S_MAIN_MENU or S_ADMIN_CSSMENU -->
<link rel="stylesheet" type="text/css" href="{THEME_PATH}/style/cpgmm.css" />
<!-- ENDIF -->
{CSS_IE}
<script src="http://cdn.wibiya.com/Toolbars/dir_0585/Toolbar_585555/Loader_585555.js" type="text/javascript"></script>
</head>
<body>
can you help? Hello Everyone, I'm new to JavaScript and I need some help, What I'm trying to do is type a background color for the content area of a table by using the prompt box. This is the code I had but it didn't work: <html> <head><title>Practice</title> <script type="text/javascript"> //content color var table = prompt("Choose a color for the content area", "white "); document.write("<table BGCOLOR=" + table + " >"); </script> </head> <body bgcolor="black"> <table bgcolor="" width="600px" height="600px" cellpadding="15" border="0" align="center"> <!-- ============ HEADER ============== --> <tr> <td height="35px" colspan="2" align="center"><p align="center"><a href="http://www.youtube.com/">YouTube</a> | <a href="http://www.facebook.com/">Facebook</a> | <a href="http://www.twitter.com/">Twitter</a> | <a </td></tr> <!-- ============ LEFT COLUMN (CONTENT) ============== --> <tr> <td rowspan="6" width="500" valign="top"><td></tr> <input type="file" onclick="disp_prompt()" value="Display a prompt box" /> <script type="text/javascript"> var <!-- ============ RIGHT COLUMN ============== --> <tr><td width="174px" valign="top"> </td></tr> <!-- ============ FOTTER ============== --> <tr> <td height="35px" colspan="2" align="center"> </td></tr> </body> </html> Here's the code a friend gave me but it didn't work either: <script type="text/javascript"> var contentbg = prompt("What background color would you like your content to be?", "White"); document.write("<table align=\"center\" border=\"1\" cellpadding=\"15\" width=\"600\" height=\"600\" bgcolor=\"" + contentbg + "\">"); </script> Please! help me out. Thanks. 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 am creating a photography website and am almost there with coding a very simple image viewer with clickable thumbnails etc. I have used the following script to change the images; Code: <script>
function changeImage(filename)
{
document.mainimage.src = filename;
}
</script>
the main image is like this; Code: <img name="mainimage" src="../Images/wedding-photo-01-bride-getting-ready.JPG" title="bride getting ready"/> And the links/images are like this..... Code: <a href="javascript:changeImage('../Images/wedding-photo-01-bride-getting-ready.JPG')">
<img class="thumbbox" id="mainimage" src="../Images/wedding-photo-01-bride-get-thumb.JPG" alt="wellis photography logo" title="bride getting ready">
</a>
This works fine, but I would also like a caption underneath the main image that changes at the same time. Is there a way to do this simply? Perhaps using some variation of the following script? Code: <script type="text/javascript">
document.write(document.getElementById('myimage').title);
</script>
Also, one other thing - is it possible to add a 'fade' transition to my 'changeimage' function? Thanks in advance Hi - I'm working in ASP.Net 2.0. My page has a GridView control, which is populated by a SQLDataSource. The GridView has one Button control per row. The button has a client-side javascript function (ShowDelete) attached to its OnClientClick event on DataBinding of the GridView. This event fires some javascript. The javascript does 3 things: - It changes the text of the button from "Hide" to "Create" - It changes the background color of the button from red to green - It assigns a new onClientClick event to the button: "ShowAvailable" The text and the color of the button change with no problem. After I change the OnClientClick event, I send an alert with the button's OnClientClick event and it reports it to be "ShowAvailable". However, when I click on the button, it doesn't fire ShowAvailable, it fires the original onClientClick event (ShowDelete). Also, when I do View Source, it shows the button's text, color and OnClientClick event as their original settings, i.e., "Hidden", "Red" and "ShowDelete", even though I'm looking at a green button that says "Create." What's going on here? Here's the code I use to attach the OnClientClick event on DataBinding of the GridView: Code: foreach (GridViewRow row in this.gvLocation.Rows)
{
if (row.RowType == DataControlRowType.DataRow || row.RowType == DataControlRowType.EmptyDataRow)
{
int rowindex = row.RowIndex + 1; //to exclude the header which is counted as a row when we get to javascript
btnAction.OnClientClick = "ShowDelete(" + rowindex.ToString() + "); return false";
}
}
Here's the javascript for ShowDelete: Code: function ShowDelete(rowindex)
{
var locationgridID = '<%= gvLocation.ClientID %>';
locationgrid = document.getElementById(locationgridID);
if (locationgrid != null)
{
action_cell = locationgrid.rows[rowindex].cells[3];
for (k = 0; k < action_cell.childNodes.length; k++)
{
if (typeof(action_cell.childNodes[k].id) == 'string')
{
action_cell.childNodes[k].value = "Create";
action_cell.childNodes[k].style.backgroundColor = "Green";
action_cell.childNodes[k].onclientclick = "ShowAvailable(" + rowindex + "); return false";
alert(action_cell.childNodes[k].onclientclick); // reports the OnClientClick event is ShowAvailable
}
}
}
}
Any thoughts are greatly appreciated! 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 |
|||||||