|
JavaScript - Get Background Colour Color
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? Similar TutorialsHi! 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 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 All, I quite new to JavaScript and find myself stuck while trying to change the background colour of an input box. I have an external js file and everything seems to work perfectly but for some reason I cant get the colour to change. Any help is REALLY appreciated! Code:
function validateID(id, name, value)
{
var regEx = /(abc)/;
var result = regEx.test(value);
alert(value + " " + result + " " + regEx + " " + name);
if (result == true)
{
userFeedback(id, '<--Input Is Valid');
document.getElementsByName(name).style.backgroundColor='green';
}
else
{
userFeedback(id, '<--Error: Input Is Not Valid');
}
}
Reply With Quote 01-12-2015, 11:35 AM #2 VIPStephan View Profile View Forum Posts Visit Homepage The fat guy next door Join Date Jan 2006 Location Halle (Saale), Germany Posts 8,989 Thanks 6 Thanked 1,054 Times in 1,027 Posts Don’t change styles with JavaScript. In order to separate the concerns (content/style/behavior) you should add/remove a class to the element and apply styles with CSS using that class as selector. Every contemporary browser has a developer console built in, look into the JS console and see if there are any errors coming up. Other than that, it helps if you posted a link to your page so we can see ourselves without having to guess. Reply With Quote 01-12-2015, 11:59 AM #3 murtagh View Profile Hi. I am looking for a way to have a button that toggles the background colour of my website. So for instance, I will have one button called 'switch to light', when its clicked it switches the colour of the background to a light colour, and another button replaces this that says 'switch to dark', and so on. The main problem is I have no idea how to store this information when the user is on the site so when the page is refreshed the colour is remembered. I am a complete newbie to Javascript, so any help will be greatly appreciated! Thanks I have a JS that works, but only on the first Dynamically created check box and once the colour has chaned it wont change back when clicked again Please inspect my code to see exactly what I mean ... Code: <?php
function create_time_range($start, $end, $by='30 mins') {
$start_time = strtotime($start);
$end_time = strtotime($end);
$times = array();
for ( ;$start_time < $end_time; ) {
$times[] = $start_time;
$start_time = strtotime('+'.$by, $start_time);
}
$times[] = $start_time;
return $times;
}
// create array of time ranges
$times = create_time_range('0:00', '23:00', '1 hour');
// $times = create_time_range('9:30am', '5:30pm', '30 mins');
// format the unix timestamps
foreach ($times as $key => $time) {
$times[$key] = date('H:i', $time);
}
//print '<pre>'. print_r($times, true).'</pre>';
$days = array(
'Sunday',
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
);
$s_day = array(
'Sun',
'Mon',
'Tue',
'Wed',
'Thu',
'Fri',
'Sat',
);
?>
<!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>Untitled Document</title>
<style type="text/css">
legend{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
fieldset{
width:300px;
height:auto;
}
label{
font-family:Arial, Helvetica, sans-serif;
font-size:9px;
display:inline-table;
width:50px;
}
.short{
font-family:Arial, Helvetica, sans-serif;
font-size:9px;
display:inline-table;
width:15px;
}
.on_lbl{
font-family:Arial, Helvetica, sans-serif;
font-size:9px;
display:inline-table;
width:100px;
}
#myfield{
display: none;
}
#Toptions{
}
</style>
<script type="text/javascript">
function disshow(num)
{
var dayname = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
document.getElementById('legend').innerHTML = dayname[num];
document.getElementById('myfield').style.display = 'block';
}
/* Color Changes*/
function changeColour () {
if (document.getElementById('Toptions').style.backgroundColor=='green') {
document.getElementById('Toptions').style.backgroundColor='red'
}
else if (document.getElementById('Toptions').style.backgroundColor=='red') {
document.getElementById('Toptions').style.backgroundColor=='green'
}
}
</script>
</head>
<body>
<?php
// Days Active
echo("<form method=\"POST\">");
echo("<fieldset><legend>Days Active</legend>");
for ($i=0; $i<sizeof($days); $i++){
echo("<div class=\"on_lbl\">
<input type=\"checkbox\" name=\"dayOption\" value=\"" . $i . "\" id=\"option" . $i . "\">
<label for=\"option" . $i . "\">" . $days[$i] . "</label>
</div>");
}
echo ("</fieldset>");
// Select Days for Schedule
echo ("<fieldset><legend>Schedule Times</legend>");
for ($i=0; $i<sizeof($s_day); $i++)
{
echo("<input type=\"radio\" name=\"sdayOption\" value=\"" . $i . "\" id=\"opt" . $i . " \" onclick=\"disshow('$i')\">
<label class=\"short\">$s_day[$i]</label>");
}
echo("</fieldset>");
// Day: Schedule show Hours
echo "<div id=\"myfield\">";
echo("<fieldset><legend id=\"legend\">day</legend>");
for ($i=0; $i<sizeof($times); $i++)
{
echo("<span id=\"Toptions\" style=\"background-color:green;\"><input type=\"checkbox\" name=\"timeOption\" checked=\"checked\" value=\"" . $i . "\" id=\"Toption" . $i . "\" onClick=\"changeColour()\">
<label for=\"timeOption" . $i . "\">" . $times[$i] . "</label></span>");
}
//<input type=\"submit\" value=\"Save\">
echo ("</fieldset>"); echo ("<input type=\"submit\" value=\"Update\"><input type=\"submit\" value=\"Check All\"></form>");
echo "</div>";
?>
</body>
</html>
I am at my wits end and have spent over 2 hours looking into this... Hello All I was hoping you guys can help. I have 3 radio fields which when clicked on I want it to change the background colour of the table its within. The radio fields have the same name so only one can be selected at once. At the moment its changing the background yellow but if I click another radio field its not resetting back to normal (white). Im not sure how to achieve this is javascript... Here is the code im using now: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" language="javascript">
function swapColor(oCheckbox) {
var pop = oCheckbox, checkedcolor = 'yellow';
while (pop.nodeType != 1 || pop.nodeName.toLowerCase() != 'table')
pop = pop.parentNode;
if (typeof pop.oldcolor == 'undefined') pop.oldcolor = pop.style.backgroundColor;
pop.style.backgroundColor = (oCheckbox.checked) ? checkedcolor : pop.oldcolor;
}
</script>
</head>
<body>
<table>
<tr>
<td>
<input type="radio" name="change" value="0" onchange="swapColor(this) checked" />11111111
</td>
</tr>
</table>
<table>
<tr>
<td>
<input type="radio" name="change" value="1" onchange="swapColor(this)" />22222222
</td>
</tr>
</table>
<table>
<tr>
<td> <input type="radio" name="change" value="2" onchange="swapColor(this)" />33333333
</td>
</tr>
</table>
</body>
</html>
I would appreciate any help! Thanks! I'm trying to use javascript to have my webpage black at night and bright blue (#2A7FFF) in the day time. How would I go about this? :/ I have also tried to use javascript to change a picture depending on the time of day, this is what I have used. IN THE <head> Code: <script type="text/javascript">
var hourofday = thedate.getUTCHours();
function sun()
{
// return TRUE if it's day
if (hourofday > 7 && hourofday < 10) {
return true;
}
return false;
}
</script><script type="text/javascript">
var hourofday = thedate.getUTCHours();
function sun()
{
// return TRUE if it's day
if (hourofday > 7 && hourofday < 10) {
return true;
}
return false;
}
</script>
IN THE <body> Code: <div id="layer1" style="position:absolute; top:5px; left:5px; width:190px; height:190px; z-index:1; padding:5px; border:#000000 2px solid;background:color:#000000;">
<script type="text/javascript">
if (sun()) {
document.write("<img src="www.oliverbinns.webs.com/images/sun.png" />");
} else {
document.write("<img src="www.oliverbinns.webs.com/images/moon.png" />");
}
</script>
</div>
Hi Guys, I have a little question... I know that adding Code: onclick="document.body.style.backgroundColor='#F3B90C'; to a div will change the body background colour to the above colour.. But what I was wondering was this.. Is it possible, instead of adding the code to the actaul div itself to pass the function like this... Code: <script type="text/javascript">
$("Object").click(function(){
document.body.style.backgroundColor = "#000000";
});
</script>
Any help/info is appreciated Kind regards, paffley Hi, Sorry to bother you all with this but I'm really new to JavaScript and can't figure this out but I'm sure it's probably quite simple for you guys. I've been using this bit of code to limit the number of characters in a text field (taken from http://www.shiningstar.net/articles/...reacounter.asp: Code: <SCRIPT LANGUAGE="JavaScript">
function textCounter(field,cntfield,maxlimit) {
if (field.value.length > maxlimit) // if too long...trim it!
field.value = field.value.substring(0, maxlimit);
// otherwise, update 'characters left' counter
else
cntfield.value = maxlimit - field.value.length;
}
// End -->
</script>
<form name="myForm"
action="/articles/articles/javascript/dynamictextareacounter.asp?ID=<%=siteID%>"
method="post">
<b>One Function to Count and Limit Multiple Form Text Areas</b><br>
<textarea name="message1" wrap="physical" cols="28" rows="5"
onKeyDown="textCounter(document.myForm.message1,document.myForm.remLen1,125)"
onKeyUp="textCounter(document.myForm.message1,document.myForm.remLen1,125)"></textarea>
<br>
<input readonly type="text" name="remLen1" size="3" maxlength="3" value="125">
characters left
<br>
<textarea name="message2" wrap="physical" cols="28" rows="5"
onKeyDown="textCounter(document.myForm.message2,document.myForm.remLen2,125)"
onKeyUp="textCounter(document.myForm.message2,document.myForm.remLen2,125)"></textarea>
<br>
<input readonly type="text" name="remLen2" size="3" maxlength="3" value="125">
characters left
<br>
<input type="Submit" name="Submit" value="Submit">
<br>
</form>
What I'd like to do is make the background colour and maybe the font colour change on the 'characters left' field depending on the value of that field. So most of the time the colour is green but when the field = 0, the background colour changes to red. Can I just add to the function above or will I need a new one? If anyone could help, that would be great Cheers How do I do this? I've set up javascript to change the background colour depending on what colour square the user clicks on, this is working fine. However, I want to be able to set an initial colour, other than white, and then let the user chose their own. here is my code so far. <script language="JavaScript"> <!-- function changeBGC(color){ document.bgColor = color; } //--> </script> Then on the buttons: <a href="#" onclick="javascript:changeBGC('#486970')"><img src="images/blueSquare.jpg" alt="a" width="25" border="0" /></a> <a href="#" onclick="javascript:changeBGC('#dd737b')"><img src="images/pinkSquare.jpg" alt="x" width="25" /></a> <a href="#" onclick="javascript:changeBGC('#4f814e')"><img src="images/greenSquare.jpg" alt="cx" width="25" /></a> <a href="#" onclick="javascript:changeBGC('#594b31')"><img src="images/brownSquare.jpg" alt="s" width="25" /></a> <a href="#" onclick="javascript:changeBGC('#ffffff')"><img src="images/whiteSquare.jpg" alt="x" width="25" /></a> I want the page to be initially set to the brown colour, then I want the user to be able to choose their own colour. Thanks for any help. 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;"> 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 have a table row that I would like to have change color when onMouseOver, and revert back onMouseOut. That works fine. Now, I have added an onClick event, which when they click I want the color to stay. Here is what I have. It works, sort of, that is it changes only the first row and not the one I clicked. How do I refer to the row that is clicked? Thanks! Code: <script type="text/javascript">
function check(x)
{
document.getElementById("rowColor").bgColor=x
}
</script>
<tr id="rowColor" onClick="check('#99FF99');" onMouseOver="this.bgColor='#99FF99';" onMouseOut="this.bgColor='#FFFFFF';"><div>
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;
}
}
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? 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 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 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 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 |
|||||||