|
JavaScript - What Color Text
I'm going to try to explain this without sounding like a total idiot. I'm not even sure if this is the language for this. If not and someone could point me in the direction of a better language, please feel free.
Lets say I have a word document, somthing.docx. This document includes text of varying colors. What I am trying to figure out is if there is a way of 'detecting' what color each word is. I would like the output be a txt file, which stores the text and description of formatting, which I can easily do myself. I really just have no idea how to figure out what color the text is, programmatically. Thanks for any help, ~Dave Similar Tutorialsi 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? 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. 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, As you will see with the code below when the text ONE and TWO are clicked on it displays a background color. When ONE is activated TWO is off. When TWO is activated ONE is off. But when the page loads I want ONE to display the background color. When ONE displays the background color after the page has loaded, I want to click on TWO to display it's background color and ONE should turn off as it does now. I can't figure out how to activate the background color for ONE when the page loads. Then if it is activated when the page loads, how to turn off ONE and turn on TWO when clicked on and visa versa. 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>Untitled Document</title>
<script language="javascript" type="text/javascript">
var btn = function () {
var active = null, bcolor = '#84DFC1';
if (this.attachEvent) this.attachEvent('onunload', function () {
active = null;
});
return function (element) {
if ((active != element) && element.style) {
if (active) active.style.backgroundColor = '';
element.style.backgroundColor = bcolor;
active = element;
}
};
}();
</script>
</head>
<body>
<div onclick="btn(this);">ONE </div>
<div onclick="btn(this);">TWO </div>
</body>
</html>
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? I have a text box for a search. I have lightened the font color to a shade of grey with a default value describing what the box does. Everything works except the font color does not change to black onfocus, it remains grey. Html: Code: <!-- Row 3, Col 2 - Search this website --> <td colspan="1"><form action="http://www.google.com/search" target="_blank" method="get" onsubmit="googleSearch(this)"> <input name="q" type="hidden" /> <input name="qfront" type="text" size="20" style="color: #bbbbbb; background-color: #00FF77; text-align: center;" value="Search SA Yorkies" onfocus="Focus(this);" onblur="Blank(this);" /><br /> <img src="site_graphics/powered_google.gif" alt="google pic" width="90" height="25" style="float: left;" /><input type="submit" value="Search" /> </form></td></tr> JavaScript: Code: // If box clicked value within disappears
function Focus(element) {
if (element.value == element.defaultValue) {
element.value = '';
}
}
// If nothing typed and box onblur the default value is restored within
function Blank(element) {
if (element.value == '') {
element.value = element.defaultValue;
}
}
I have entered a CSS style that when the focus is on the box a blue border shows and am trying to get the text to show black again with the same code as below: Code: input[type="text"]:focus {
border: 2px solid #0000ff;
color: #000000;
}
Any ideas, I want to keep it simple. 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 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 As of right now I have a code that will work in IE but wont work in FireFox...go figure. Basically what I want to have happen is when you type in an area code it will provide an output in a predetermined area of the page. For Example: Input- 512 Output - Austin, TX The code that I have doesn't work with firefox and I was just wondering if there was a code that would allow that to happen. Thanks! Hi, I have a form with 9 text fields and a text area. What I want to do is replace the text in the text area depending on how many fields contain text. For example my text boxes are named 1 to 9, if the user enters text in the first five boxes I want the text area to auto fill with 'you have selected boxes 1 to 5' if the user selects all nine it will say 'you have selected 1 to 9', therefore, the user must complete the text boxes in order. I have it working with an onchange event but i have a button on the form to also auto fill the text boxes and it does not work if this is clicked. Any help would be appreciated! Hi all, Thanks for reading. I'm having an issue trying to accomplish the following - I have a text field (field1) already displayed on the HTML page. However, there's a link where you can add additional text fields to the page as well. When the link is clicked, the second text field is added successfully (field2), and when the link is clicked again, the third text field (field3) is added successfully. However, the third field does not add itself to the page, and the text for anything greater than a third field also isn't displayed after. This obviously means that my "fields" variable is not working right, so I'm wondering, would anyone be able to assist me to help me get that variable processing correctly? Code: <script language="javascript">
fields = 1;
function addMore() {
if (fields = 1) {
document.getElementById('addedMore').innerHTML = "<input type='text' name='field2' size='25' /> <span>Field 2.</span>";
fields = 2;
} else if (fields = 2) {
document.getElementById('addedMore').innerHTML = "<input type='text' name='field3' size='25' /> <span>Field 3.</span>";
fields = 3;
} else {
document.getElementById('addedMore').innerHTML = "Only 3 fields are allowed.";
document.form.add.disabled=true;
}
}
</script>
Here is the code in my HTML - Code: <input type="text" name="field1" size="25" /> <span>Field 1.</span> <div id="addedMore"></div> <p class="addMore"><form name="add"><a onclick="addMore()">Add another field.</a></form></p> Thank you very much. I am using an external style sheet to set the color of my calculator to gray. However, when I open my javascript in Google Chrome, the calculator is red. I've checked the style sheet code and it's correct. Can anyone tell me why this is happening? I posted both the html and css code below. 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>Calculator</title>
<link rel="stylesheet" type="text/css" href="assignment2.css" />
<div align="center">
<script type="text/javascript">
var title = "<strong>Calculator</br> Aughtman, Zackary</strong>"
document.write(title.fontsize(5));
</script>
</div>
</head>
<body>
</br>
</br>
<div align="center">
<table align = "center" border="1" bordercolor="div1" bgcolor="div2">
<tr>
<td colspan="4">
<input type="text" value="" id="results" class="results" />
</td>
</tr>
<tr>
<td>
<input type="button" style="width:30px" value="7" onclick="EnterNumber(this.value)">
</td>
<td>
<input type="button" style="width:30px" value="8" onclick="EnterNumber(this.value)">
</td>
<td>
<input type="button" style="width:30px" value="9" onclick="EnterNumber(this.value)">
</td>
<td>
<input type="button" style="width:30px" value="/" onclick="EnterOperator(this.value)">
</td>
</tr>
<tr>
<td>
<input type="button" style="width:30px" value="4" onclick="EnterNumber(this.value)">
</td>
<td>
<input type="button" style="width:30px" value="5" onclick="EnterNumber(this.value)">
</td>
<td>
<input type="button" style="width:30px" value="6" onclick="EnterNumber(this.value)">
</td>
<td>
<input type="button" style="width:30px" value="*" onclick="EnterOperator(this.value)">
</td>
</tr>
<tr>
<td>
<input type="button" style="width:30px" value="1" onclick="EnterNumber(this.value)">
</td>
<td>
<input type="button" style="width:30px" value="2" onclick="EnterNumber(this.value)">
</td>
<td>
<input type="button" style="width:30px" value="3" onclick="EnterNumber(this.value)">
</td>
<td>
<input type="button" style="width:30px" value="-" onclick="EnterOperator(this.value)">
</td>
</tr>
<tr>
<td>
<input type="button" style="width:30px" value="0" onclick="EnterNumber(this.value)">
</td>
<td>
<input type="button" style="width:30px" value="N" onclick="EnterNumber(this.value)">
</td>
<td>
<input type="button" style="width:30px" value="L" onclick="EnterNumber(this.value)">
</td>
<td>
<input type="button" style="width:30px" value="+" onclick="EnterOperator(this.value)">
</td>
</tr>
<tr>
<td>
<input type="button" style="width:30px" value="" onclick="EnterNumber(this.value)">
</td>
<td>
<input type="button" style="width:30px" value="" onclick="EnterNumber(this.value)">
</td>
<td>
<input type="button" style="width:30px" value="=" onclick="EnterNumber(this.value)">
</td>
<td>
<input type="button" style="width:30px" value="C" onclick="EnterOperator(this.value)">
</td>
</tr>
</table>
</br>
<script type="text/javascript">
document.write("<strong>Instructions</strong></br>");
document.write("Click a number, then an action, then another number, then the equals button.</br>");
document.write("Press C when ready to start over.</br>");
document.write("The N button makes your previous number a negative.</br>");
document.write("The L button requires one number to be available,</br>");
document.write("it will loop through that numberto ten plus that number</br>");
document.write("and add all values and display.</br>");
document.write("For example: 1+2+3+4+5+6+7+8+9+10=55</br></br>");
document.write("<strong>Navigator Info</strong></br>");
document.write("App Name: Netscape</br>");
document.write("Cookes Enable: true</br>");
document.write("User agent Mozilla 5.0 Windows NT 5.1; rv:6.0 Gecko 20100101 Firefox 6.0</br>");
</script>
</div>
</body>
</html>
Code: #div1 {color:#999999}
#div2 {color:#999999}
Hi, I have the following javascript codes. I have two textboxes with id "pano" and "pano2" My function creates numbers randomly and that if random number==1 let the background of textbox2 be pink and if random number==2 textbox1 be red. The code works fine for document.bgColor but it does not work for textboxes how can I modify the code so that I can change the background color of any textboxes ? thanks.. <script> aaa=setInterval("letsgo()",500); function letsgo() { rno=Math.floor(Math.random()*3)+1; document.getElementById("counter").value=rno; if(rno==3) { document.bgColor="green"; } if(rno==2) { var pano=document.getElementById("pano"); document.pano.bgColor="red"; } if(rno==1) { var pano2=document.getElementById("pano2"); document.pano2.bgColor="pink"; } } </script> <input type="text" id="counter" style="position:absolute;top:10px;left:50px;width:60px;height:20px;"> <input type="text" id="pano" style="position:absolute;top:100px;left:100px;width:200px;height:200px;"> <input type="text" id="pano2" style="position:absolute;top:100px;left:400px;width:200px;height:200px;"> 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 ? Hi! all I have a js which change the background color onclick event. This is the code Code: function changeBackground2() {
document.body.style.backgroundColor = '#C6DB2B';
document.getElementById("logo").style.backgroundColor = '#2299EE';
document.getElementById("nav_bar").style.backgroundColor = '#C6DB2B';
document.getElementById("current-ex3").style.backgroundColor = '#2299EE';
document.getElementById("foot").style.backgroundColor = '#2299EE';
document.getElementById("ahead").style.backgroundColor = '#C6DB2B';
}
but i want it to occur slowly like in 3 seconds. I think it can be done with animate but not know how i am not a js expert. Thanks for your help. 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? Hello everyone, I have written a color tween script based off of istallkizza's script that he provided for someone else in a different thread (http://codingforums.com/showpost.php...20&postcount=5.) It works, but the more it is used, the faster it runs, can anyone help me diagnose the problem? Code: var colorArr = new Array();
var colorSym = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
var colorInt;
for (i=0;i<colorSym.length;i++)
{
for (n=0;n<colorSym.length;n++)
{
colorArr.push(colorSym[i]+colorSym[n]);
}
}
function colorTween(celem,r,g,b,time){
initColor = colorToHex(document.getElementById(celem).style.backgroundColor);
origColor = splitColor(initColor);
currColor = splitColor(initColor);
targetColor = [colorArr[r], colorArr[g], colorArr[b]]
colorIncs = [Math.round(diffBetween(origColor[0],targetColor[0])/time),Math.round(diffBetween(origColor[1],targetColor[1])/time),Math.round(diffBetween(origColor[2],targetColor[2])/time)];
startColorFade();
function stopInt() {
if (colorInt) { clearInterval(colorInt); }
}
function startColorFade() {
stopInt();
var colorInt = setInterval("this.colorFader()",time);
}
this.colorFader = function() {
currColor[0] = colorArr[arrayIndex(colorArr,currColor[0]) + colorIncs[0]];
currColor[1] = colorArr[arrayIndex(colorArr,currColor[1]) + colorIncs[1]];
currColor[2] = colorArr[arrayIndex(colorArr,currColor[2]) + colorIncs[2]];
document.getElementById(celem).style.backgroundColor = "#"+currColor.join("");
if (Math.abs(diffBetween(currColor[0],targetColor[0])) <= Math.abs(colorIncs[0])) {
currColor = splitColor("#"+targetColor.join(""));
document.getElementById(celem).style.backgroundColor = "#"+targetColor.join("");
stopInt()
}
}
function arrayIndex(arr,check){
for (var i=0;i<=arr.length;i++)
{
if (arr[i] === check) { return i; }
}
return false;
}
function diffBetween(c1,c2){
var num1 = arrayIndex(colorArr,c1);
var num2 = arrayIndex(colorArr,c2);
return num2-num1;
}
function splitColor(color){
return [color.substring(1,3),color.substring(3,5),color.substring(5,7)];
}
function colorToHex(nhcolor) {
if (nhcolor.substr(0, 1) === '#') {
return nhcolor;
}
var digits = /(.*?)rgb\((\d+), (\d+), (\d+)\)/.exec(nhcolor);
var red = parseInt(digits[2]);
var green = parseInt(digits[3]);
var blue = parseInt(digits[4]);
var rgb = blue | (green << 8) | (red << 16);
return digits[1] + '#' + rgb.toString(16);
}
}
The script can be viewed in action he http://www.webskethio.com/websites/index.php I am writing a greasemonkey userscript that simply just takes the underlying width of a td tag, and prints the text in white font over the table so it is viewable to everyone. I wrote the following code Code:
function main()
{
var page = document.getElementById("container");
var td = page.getElementsByTagName("td");
for(i=0; i<td.length; i++)
{
if(td[i].background-color != "")
{
td[i].style.color = "#ffffff";
td[i].innerHTML = td[i].width;
}
}
}
however, When i installed the script.. firefox tells me that "color" is not defined. Is there another way of doing this? Just wanting the width is white font. |
|||||||