JavaScript - Table Background Color

Hey, been racking my brain for about an hour now, and cant seem to work this one out...

I need to in javascript, get the HEX value (#FFFFFF) of a div's background color...

Code:

style.backgroundColor

doesnt seem to work...

But it seems to be different in every browser, and i cant seem to make it work...
(it must work in IE, FF, Chrome, Safari)

I have tried using a couple of examples, but nothing seems to work...

Any ideas?
Thanks

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'm just trying to do something pretty simple which is an alert box which will give me the background color. So simple...that it doesn't want to work, that is!

The line the body is onmouseover:
Code:

<p id="metallic" onMouseOver="switchElementColour('metallic');">metallic c-prints</p>

The function is as follows
Code:

function switchElementColour(elementName){
	var tryId = document.getElementById(elementName);
	var yrf = tryId.style.backgroundColor;
	alert(yrf);

}

I've tried a number of different variations, including:
messing with the quotes 'hard coding' the id ("metallic") in the function (although I don't want to leave it there) changing the code around based on stuff found online
...but I keep coming back to the above.

The result is a blank alert box (no errors, just blank).
The element name is getting passed, because when I create an alert box in the function that looks like this:
Code:

alert(elementName);

The result is an alert box that says metallic (no quotation marks).

Au secours por favore?

Hey everyone! My goal here is to have the user type in a color and have that color display as the background of the page. I don't believe the switch statement is being executed by the first function.

I think I am overthinking the process - as always!

Any help pointing out my mistake(s) would be greatly appreciated.

Code:

function show_color()

{
var show_prompt = prompt("Please enter a color name");

var change_body = document.getElementById("body");;

show_prompt = change_body;

change_body = change(this.id);


}


function change(id)
    {

        switch (id)
        {
            case 'red':
                document.body.bgColor = "red";
                break;

            case 'green':
                document.body.bgColor = "green";
                break;

            case 'yellow':
                document.body.bgColor = "yellow";
                break;    

            case 'blue':
                document.body.bgColor = "blue";
                break;

             case 'pink':
                document.body.bgColor = "pink";
                break;
        }
    }

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

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?

HI
i have a complete web site . now , how can do the work that all the textboxes in the page have the style that when the users click on it , the background of them geta color .

i don't want to insert this code one by one onclick="this.style.backgroundColor='#eeeeee';"

thanks

hi im trying to make the background color change to white after the iframe is triggered. right now it sits transparent on the page but after the iframe is triggered i want the background to be white. is there a way to do this? i dont know much about java but im assuming this would be something to use java for. Thanks


Code:

<iframe name="result" style="border: 0px solid #000000;"frameborder="0" width='100%' height='590px' src="result1.php" allowtransparency="true"></iframe>

Hi ,
I have 5 or 6 textboxes and all of them are required ( have required field validators ) .. I want to change their background color to yellow when they are left blank and when the box is filled the backgorund color to white ..Is it possible to do via javascript ..I am a beginer so any help is greatly appreciated

I want to create a basic script where someone clicks the button and the document color is changing. while I can do it with inline even handlers and also using the script block in html document, i am not able to achieve the result using the external js.js. My goal is not to use any even handlers at all inside the html document. This is how my codes looks like:


<head>
<title> Basics Exercise</title>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
<form>
<p> Click this button and the document's color will change again </p>
<input name="button" type="button" value="Change the background color of the document"/>
</form>



js.js has

function changecolor() {
document.bgColor='#ea0d17';
}

document.forms[0].button.onClick=changecolor();



I don't want anyone to write a script for me, but I would appreciate if someone told me why the script I wrote is not working.

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!

This works;

Code:

document.body.style.backgroundColor="#FF00aa";

these do not work
Code:

document.bgColor="#FF00aa";
document.body.bgColor="#FF00aa";

But all three work in a normal window. I'm clueless?

I've tried the following:

Code:

<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
if ( top.location.href!= window.location.href ) {
document.getElementById( 'bodybg' ).style.background='#12111C'; 
}
// ]]>
</script>

and
Code:

<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
if ( top.location == location ) {
document.getElementById( 'bodybg' ).style.background='#12111C'; 
}
// ]]>
</script>

I've tested the if statement and the set background code, using a button. I'm guessing it fails since there is no background when the script runs. Any ideas?

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">&nbsp;
<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

Hey Guys,

I'm using the jQuery Cycle plugin developed Here on this website.

In FF, IE8, etc it seems to show up just fine - no background on the animation. In IE7 its showing the color attributed to the body element - a dark blue color.

Is there anyway to fix this?

Thanks!