|
JavaScript - Change Color Of Text With Javascript
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 Similar TutorialsHi 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 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? 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;
}
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! 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> 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. 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? 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, I'm faced with a problem trying to set background color under IE7. I have the following Javascript: Code: function showLayer793BKColor(id)
{
var txtObj = document.all(id);
if (txtObj.style.display == 'none')
{
txtObj.style.display = ''
txtObj.style.backgroundColor = 'grey';
}
}
function hideLayer793BKColor(id)
{
var txtObj = document.all(id);
if ( txtObj.style.backgroundColor == 'grey' )
txtObj.style.display = 'none';
}
These functions are used to show or hide div blocks. These blocks are, for example, specified in the following way: Code: <div id="l_gct5tekst" style="display:none"> <b>GCT 5. Eerste verkenning problematiek</b> and, for example, Code: <div id="l_Keuze" style="display:none"> <br/> <b>GCT 5</b> <br/> </div> The whole configuration works smoothly when using IE8. However, when using IE7 I get an error msg like "Invalid value for property". When I use the Color propert iso the BackgroundColor property I get no error anymore but of course I don't have a background color anymore then. In what way can I specify the use of a background color under IE7 ? Or is just not possible in one way or the other. Furthermore, what more differences between JS under IE7 and IE8 do I have to take into account ? Do I also have to rewrite my div block in some way (using some attribs ?) to cope with IE7 ? Thanks in advance, Diederick van Elst 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? 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 ? 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 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! 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? im trying to figure out a script that when someone clicks my checkbox (or onchange/onclick events the span tag that wraps it) it changes the color of the font in the span tag... but then if they click again...for the color to return to normal heres my checkboxes as of the moment... disregard the sloppy multiple classes....i wanted to pad the elements evenly lol Code: <div id="selectform">
<span onclick="id='colorchange'" class="webspace"><input type="checkbox" value="website"> Website Design
</span>
<span class="reverbspace"> <input type="checkbox" value="reverb"> Reverb Nation </span>
<span class="twitspace"><input type="checkbox" value="twitter"> Twitter </span>
<span class="logospace"> <input type="checkbox" value="logo"> Logo/Branding </span>
<span class="soundclickspace"> <input type="checkbox" value="ning"> SoundClick </span>
<span class="photospace"> <input type="checkbox" value="photo"> Photo Retouch </span>
<span class="albumspace"><input type="checkbox" value="Album/Mixtape/DVD"> Mixtape/ DVD Cover</span>
<span class="ningspace"> <input type="checkbox" value="ning"> Ning WebSite </span>
<span class="flyerspace"> <input type="checkbox" value="flyer"> Flyers </span>
<span class="businessspace"> <input type="checkbox" value="Business card"> Business Card </span>
<span class="brochurespace"> <input type="checkbox" value="Brochure"> Brochure </span>
<span class="otherspace"> <input type="checkbox" > Other </span>
</div>
|
|||||||