|
JavaScript - Help With Javascript To Color Columns
Hi, Looking for some help with something,
I have a table with 20 columns, Im looking to color code column 7,8,9,10,11,12. all of the data is numeric. Here is how they should be colored. column 7 (column header name is test7) if >50 should be red if 41-50 should be yellow if <=40 should be green column 8 (column header name is test8) > 40 should be red 32-40 should be yellow <=31 should be green this is similiar for other colums, if someone could help with this one I could figure out rest. thanks jay Similar TutorialsHi, 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 have created my website and i have one page that has a spry menu bar with 15 columns. I also have a javascript file that is an image gallery. i want to add that javascript file to my html/css website. not only that but i need that java script file to open on the appropriate image depending on what titled column i have clicked on. any help would be greatly appreciated!
when creating a button with javascript, is it possible to change the blue color when you mouse over it? I know its a stupid question but I am curious... I'm new to this javascript stuff..
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? I'm not 100% sure if this can be done (I haven't been particularly successful in my Google searches). I'm using Javascript and forms to create conditional information randomizers for data. An example might be "What should you have to eat?" The person can generate a random result or select restrictions (selecting an allergy to X would eliminate X-related results). I prefer to work with black backgrounds. Even if I end up changing a default site layout to non-black (for audience purposes), I'd want a personalized CSS for myself. I'm running into some difficulty determining how to make my textarea black. Is there a way to apply CSS to textarea boxes (including those related to javascript?) Ideally, I'd like to be able to automatically style every textarea but if that is not possible in relation to javascript, I'd settle for changing the code for individual boxes. I was unsure where to place this topic so feel free to move it if it's better suited for CSS. Thanks *** I figured I didn't need to bump my post needlessly, but Thanks to "devnull69" as the provided solution worked. For some reason, I was confused about how to type that operation in css properly. That's probably one of the problems that arises when one combines staying up late with learning multiple programming languages at the same time. All is well now. 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. Hey guys, I have been trying to get better at my javascript as of late and there is this one particular color fading technique I have found that I am having trouble dissecting. The following code appears to be how they are making a rollover go from a dark gray to a subtle light gray with a nice fade but I can't exactly tell whats going on from the code. Is it just telling it to add a rgb point in so many seconds? Any professional help would be greatly appreciated. Code: colorInit=
true}b.elem.style[a]="rgb("+Math.max(Math.min(parseInt(b.pos*(b.end[0]-b.start[0])+b.start[0],0),255),0)+","+Math.max(Math.min(parseInt(b.pos*(b.end[1]-b.start[1])+b.start[1],10),255),0)+","+Math.max(Math.min(parseInt(b.pos*(b.end[2]-b.start[2])+b.start[2],0),255),0)+")"}});
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 i have an requirement i.e., i need to allow user to select one of color from color pallet and i need to store that color code value in database, how can i do this I am using jsp and js and 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. I'm working on a new custom theme for my WordPress based site, and up until now I've been using the following PHP code to color code links based on whether the post was in the "Wii" category, "Xbox" category, or "PlayStation" category: PHP Code: <li> <?php if (in_category(3) ) { ?> <a style="color:#990000;" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a> <? }elseif (in_category(4) ) { ?> <a style="color:#669900;" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a> <? }elseif (in_category(7) ) { ?> <a style="color:#0099cc;" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a> <? } else { ?> <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a> <? } ?> </li> Thing is, I've now installed a plugin called "Recently Popular" that logs all visits and can output which posts were viewed the most in the past X days/weeks/months/etc. and the author has it set up to only allow HTML formatting via this line: PHP Code: <?php get_recently_popular(1, 'WEEK', 5, 0, 0, '<a href="%post_url%" rel="bookmark" title="%post_title%">%post_title%</a>'); ?> I've tried sticking PHP in the line, but it only takes HTML. I've tried sticking one of these lines in each of the conditional statements above, but realized that this line outputs the entire "Recently Popular" list, not just one item - so everything would end up being the same color still. I contacted the plugin author, who said that without hardcoding there's no way to get around this via the plugin, but that outputting it normally and running it through JavaScript might give me a way to apply CSS styling to it after it's been rendered. I'm not experienced with JavaScript, unfortunately... does anyone know how I can do this? 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! Hi Im taking a course in web design and am working on a basic javascript page. I have a drop down box where you select a item and it opens a new window. How would I get the back ground color to be the same as the web page color (lightblue), what code would I use and where in my code would I put it? [CODE] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>MEG</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var content; var oneWindow; var fullWindow; var oneWindowStatus = false; var fullWindowStatus = false; function closeAllWindows() { if((oneWindowStatus) && (!oneWindow.closed)) oneWindow.close(); if((fullWindowStatus) && (!fullWindow.closed)) fullWindow.close(); oneWindowStatus = false; fullWindowStatus = false; } function productObject(name,description,use,image) { this.name = name; this.description = description; this.use = use; this.image = image; this.displayOne = displayOne; } //Add products here var products = new Array(); products[0] = new productObject("Ears", "Fluffy, pointy, big", "For hearing other dogs near by, for listening to my owner but ignoring her", "images/ears.jpg"); products[1] = new productObject("Eyes", "Shiny, brown, pretty", "To see dogs to bark at, to see when treats are available", "images/eyes.jpg"); products[2] = new productObject("Nose", "Black, wet", "For sniffing out food and squirrels", "images/nose.jpg"); products[3] = new productObject("Mouth", "BIG", "For barking loudly with", "images/mouth.jpg"); products[4] = new productObject("Tongue", "Pink, wet", "To lick you with when you really dont want her to", "images/tongue.jpg"); products[5] = new productObject("Legs", "Short, fluffy", "To run as fast as possible with after squirrels", "images/legs.jpg"); products[6] = new productObject("Paws", "Small", "To raise when I want treats/food of any sort", "images/paws.jpg"); var len = products.length; function displayOne() { content=""; content+="<HTML><HEAD><TITLE>" + this.name + "</TITLE></HEAD>"; content+="<BODY><DIV ALIGN='center'>"; content+="<TABLE WIDTH='90%'><TR><TD COLSPAN='3' ALIGN='center'>"; content+="<H3>Name: " + this.name.bold() + "</H3><HR>"; content+="<TR><TD><B>Name:</B> " + this.name; content+="<TR><TD><B>Description:</B> " + this.description; content+="<TR><TD><B>Use:</B> " + this.use; content+="<TR><TD><IMG SRC= '" + this.image + "' HEIGHT='100' WIDTH='100'>"; content+="</TABLE><FORM>"; content+="<INPUT TYPE='button' VALUE='OK' onClick='window.close();'>"; content+="</FORM></DIV></BODY></HTML>"; oneWindow = open("","OneWindow","width=500,height=400"); newWindow(oneWindow); oneWindowStatus = true; } function showAll() { content=""; content+="<HTML><HEAD><TITLE>All that is Meg</TITLE></HEAD>"; content+="<BODY><DIV ALIGN=center>"; content+="<TABLE WIDTH='90%' BORDER CELLPADDING='2'>"; content+="<TR><TH COLSPAN='2' ALIGN='center'>"; content+="All that is Meg"; content+="<TR><TH>Name<TH>Image"; for (var i = 0; i < len; i++) { content+="<TR><TD>"; content+="<A HREF='javascript:void(window.opener.products[" + i + "].displayOne());'>"; content+=products[i].name + "</A>"; content+="<TD>" + products[i].description; } content+="</TABLE><FORM>"; content+="<INPUT TYPE='button' VALUE='OK' onClick='window.close();'>"; content+="</FORM></DIV></BODY></HTML>"; fullWindow = open("","AllWindow","width=500,height=400,resizable=1"); newWindow(fullWindow); fullWindowStatus = true; } function newWindow(x) { x.document.close(); x.document.open(); x.document.write(content); x.document.close(); x.moveTo(20,20); x.focus(); } //--> </SCRIPT> </SELECT> </HEAD> <BODY onFocus="closeAllwindows();" bgcolor="lightblue"> <DIV ALIGN="center"> <H2>Meg</H2> <HR> <FORM NAME="prodForm"> <TABLE WIDTH="100%"> <TR> <TD WIDTH="50%" ALIGN="right"> <SELECT NAME="itemName"> <SCRIPT LANGUAGE="JavaScript"> <!-- for (var i = 0; i < len; i++) { document.write("<OPTION>" + products[i].name); } //--> </SCRIPT> </SELECT> <TD> <INPUT TYPE="button" VALUE="Get Info" onClick=" var i = document.prodForm.itemName.selectedIndex; products[i].displayOne();"> <TR><TD ALIGN="right"> <TR><TD colspan="2" ALIGN="center"> <TR><TD colspan="2" ALIGN="center"> <INPUT TYPE="button" VALUE="Show All Products" onClick="showAll();"> </TABLE> </FORM> <img src="images/meg1.jpg" "alt="Meg" border="2"/> </DIV> </BODY> </HTML> [CODE] Thanks and hope someone can help Claire Hi all, I have a div element (i.e. <div id="main">) that contains a number of links, each with white background colors and its top and left style properties set to different values. I need to do several things with the anchors when they are clicked: When a white anchor is clicked, its background color is turned yellow and its coordinates (top and left style property values) are added to an array. The coordinates for a single anchor is to be separated by a hyphen; coordinates for multiple anchors are to be separated by a comma (eg. "0-9,0-18") When a yellow anchor is clicked, its background color is turned white and its coordinates are removed from the array. The values in the array are to be the value for a hidden input element, all separated by commas. I'm a Javascript novice and don't know where to begin. Can someone help me with this? Thanks in advance, Dude-Dastic I have been researching like crazy, and I can't find any information that seems to fit what I need! I am looking for a solution for the following problem: We have products that have multiple parts that can be colored separately from each other. In other words, if it was a shirt, the sleeves, graphic, front panel, pocket, and back panel could all be a different color. We have a range of color options available that can be up to 50. So, if I made a single image for each combination, we're looking at thousands of images here. How can I use scripts to build a page that can pick all of these options and combine them together in a product image for the customer? Is it even possible? I have tried layering 4 0r 5 images with relative and absolute positioning, and doing an image swap...but that is not something I can see us using on a regular basis. I must be missing something here. We've been looking around at other sites like Victorias Secret and Old Navy, and like their color changes....but theirs seem to only involve the single color layer. Thanks for any advice! 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 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. 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 |
|||||||