JavaScript - Change Background Colour Depending On Time Of Day.

Hi there just wondering if its possible to make a text box in java script and then for that box 2 change colour when the user inputs something. For example if they enter 3 it will turn green but if they enter anything else then it will turn red.
Thanks

Hi i am trying to change the colour of the text in my menu bar, i know you can do this with css or jquery but i want to try and do it with javascript in an external script sheet. I want to use the onmouseover and onmouseout functions to change the colours, and i want it so their are different colours for each menu item.

Can anybody help me?

I have recently installed google custom search on a page- using the iframe selection, so I can have control over the look of the page and it isn't a google branded page.

The problem is- with JS disabled, this form doesn't work. However, the option to display results on a google hosted page does work.

This is very important for accessibility for this site, so what I am wanting to do is have the basic search show ONLY if there is no JS enabled. But for everyone else- it displays as I intended.

JS isn't my bread and butter, but I think it's the tool to use here. Could someone offer some guidance?

Main Form
Code:

		<div style="float:right">	      
        <script type="text/javascript" src="/js/main.js"></script>
	      <div id="searchBox" class="searchBoxTopLevelNav"> 
	        <form name="search" id="search" action="search.php?">
            <label for="q" style="display:none";>Site Search</label>
            <input onclick="javascript:SearchClear(this);" onkeypress="javascript:OverrrideForms(this);" name="q" id="q" autocomplete="off" class="GoogleSearchTextBox" value="Search"  /> 
	        <input name='btnG' onclick="javascript:SearchGoogle($(this).prev('input.GoogleSearchTextBox:first'));return false;" type='image' value='Search' src='../img/icons/search-gray.gif' alt='Go' align="top"/> 
            </form>
		</div>

Form to display only if JS is not enabled

Code:

<form action="http://www.google.com/cse" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="#" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="31" />
    <input type="submit" name="sa" value="Search" />
  </div>
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script>

Hi All
I'm trying to get a drop down box to change the colour of more than 1 td cell at a time. I can get the boxes to work with single cells but not more than one. I've tried giving the additional cell the same id but that doen't seem to work It's probably simple but I just can't seem to see it. Thanks in anticipation.
Mike
http://www.blandfordsac.co.uk/
Code:

<script type="text/javascript">function changeColor(bg) {document.getElementById("a").style.backgroundColor = bg;}</script>
<script type="text/javascript">function changeColorb(bg) {document.getElementById("b").style.backgroundColor = bg;}</script>
<script type="text/javascript">function changeColorc(bg) {document.getElementById("c").style.backgroundColor = bg;}</script>
<script type="text/javascript">function changeColord(bg) {document.getElementById("d").style.backgroundColor = bg;}</script>

Code:

<tr><!-- row 1 -->
<td id="a" height="205" width="345"><p align="center">
<a href="images/bd8/bd8n.jpg"  target="_self" rel="wplightbox~#~~#~">
<img src="images/bd8/bd8n%20(WinCE).jpg" width="240" height="160" border="0" title="" alt="bd8n.jpg">
</a>
</td>
<td height="205" width="246" colspan="3"><h1 align="center"><span style="font-weight: 400"><font face="Arial">Bd 8</font></span></h1></td>
<td id="b" height="205"><p align="center">
<a href="images/bd8/bd8e.jpg"  target="_self" rel="wplightbox~#~~#~">
<img src="images/bd8/bd8e%20(WinCE).jpg" width="240" height="160" border="0" title="" alt="bd8e.jpg">
</a>
</td>	
</tr>		
<tr><!-- row 2 -->
<td>
<p align="center">
<select name="level" onChange="changeColor(value)">
<option value="">Choose</option> 
<option value="#FFFFFF">White</option>
<option value="#33FF00">Green</option>
<option value="#000000">Black</option>
<option value="#FF0000">Red</option>
</select>
</td>
<td height="59" width="246" colspan="3">&nbsp;</td>
<td>
<p align="center">
<select name="level" onChange="changeColorb(value)">
<option value="">Choose</option> 
<option value="#FFFFFF">White</option>
<option value="#33FF00">Green</option>
<option value="#000000">Black</option>
<option value="#FF0000">Red</option>
</select>
</td>
</tr>

Hi,
I have 3 sum fields which I want to change to a red colour if the value is > or < 100.
Apparently this is a DAP, but I am using javascript to tweek some of the settings in DAP.

function subtotal()
if(document.getElementById("Sum1").value>100&&<100)
{
this.style.cssText='Z-INDEX: 2; LEFT: 6.667in; WIDTH: 0.729in; COLOR: red'
{
else
this.style.cssText='Z-INDEX: 2; LEFT: 6.667in; WIDTH: 0.729in; COLOR: #339966'
</SCRIPT>
<SPAN class=MSTheme-Label id="Sum1_Label"
style="Z-INDEX: 1; LEFT: 0.25in; OVERFLOW: hidden; WIDTH: 0.711in; POSITION: absolute; TOP: 0.125in; HEIGHT: 0.161in">Totals:</SPAN><SPAN
class=MsoBoundSpan id="Sum1" onmouseover="subtotal()" dataFormatAs=TEXT
style="Z-INDEX: 2; LEFT: 5.416in; WIDTH: 0.729in; COLOR: #339966; POSITION: absolute; TOP: 0.125in; HEIGHT: 0.187in"
MsoTextAlign="General">Sum of Product 1</SPAN><SPAN class=MsoBoundSpan
id="Sum2" onmouseover="subtotal()" dataFormatAs=TEXT
style="Z-INDEX: 2; LEFT: 6.667in; WIDTH: 0.729in; COLOR: #339966; POSITION: absolute; TOP: 0.125in; HEIGHT: 0.187in"
MsoTextAlign="General">Sum of Product 2</SPAN><SPAN class=MsoBoundSpan
id="Sum3" dataFormatAs=TEXT
style="Z-INDEX: 2; LEFT: 7.917in; WIDTH: 0.729in; COLOR: #339966; POSITION: absolute; TOP: 0.125in; HEIGHT: 0.187in"
MsoTextAlign="General">Sum of Product 3</SPAN></DIV>

I'm a noobie at coding, and I was wondeirng if anyone can help me with the coding.

Many Thanks

Hello everyone

Background
I have an electronics site on which I have a code generator.
Im an stuck on how to acheive something.

I will simplify what I want to do, so I can then adapt it to my code.
I have a paragraph of text on the web page, on which I want to change some words with in the paragraph depending on 2 radio buttons.

Example (radio buttons & short paragraph):

(Radio Button) Apples (checked)
(Radio Button) Bananas
"Welcome to jakes fruit shop.
You have selected apples today"
(apples being the word that would change if the banana radio button is checked)

Here is the code generator if your interested.
http://www.jakeselectronics.net/conf...erator877A.php
What I actually want to do is put other 'fixed' text in the input text area (near botton of page) with only the config line changing.

And If I can be shown how to do the short example above, i think I will be able to edit my generator and get it to do what i want it to do.

I'm still a relative noob and i'm wondering if anyone can help.
items use a structured form, so any item in that category will display on the same form when selected
i want to have the save button run its normal save on all items except 1 specific item - on the 1 item i want to have it function as a save as copy (while still having "save" as its visible text), the current code set in a drop down list is

$options[] = array(
'text' => 'JSAVE',
'task' => $this->getName() . '.save');

$options[] = array(
'text' => 'Save as new project',
'task' => $this->getName() . '.save2copy',
'options' => array('access' => ($this->item->id > 0)));

can anyone offer any suggestions? really stuck on this one

I am working on a project where I have 5 XML files that I bring into HTML and display the tables on one browser page. I would like for the row of the tables to change depending on what is in the "status" field. There will only be the following inputs in that column - "IS" which is in stock(green), "OS" which is out of stock(red), and "PO" which is Pre-Order(blue).
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>ABC Book Store</title>
<style type="text/css">
<!--
.style1 {
	 font-size: 10pt;
}
-->
</style>

<script>
function ld_fiction()
{
var doc=nb_fiction.XMLDocument;
doc.load("fiction.xml");
document.getElementById("head_id").innerHTML="Fiction "; 
 
}
function Id_nfiction()
{
var doc_s=nb_nfiction.XMLDocument;
doc_s.load("nfiction.xml");
document.getElementByID("head_id_d").innerHTML="NonFiction";
}

function ID_selfhelp()
{
var doc_t=nb_selfhelp.XMLDocument;
doc_t.load("selfhelp.xml");
document.getElementByID("head_id_e").innerHTML="SelfHelp";
}

function ID_reference()
{
var doc_u=nb_ref.XMLDocument;
doc_u.load("ref.xml");
document.getElementByID("head_id_f").innerHTML="Reference";
}

function ID_mags()
{
var doc_v=nb_mags.XMLDocument;
doc_v.load("mags.xml");
document.getElementByID("head_id_g").innerHTML="Mags";
}




</script>

<XML id="nb_fiction" src="fiction.xml"></XML>
<XML id="nb_nfiction" src="nfiction.xml"></XML>
<XML id="nb_selfhelp" src="selfhelp.xml"></XML>
<XML id="nb_ref" src="ref.xml"></XML>
<XML id="nb_mags" src="mags.xml"></XML>



<object id="nb_fiction" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" 
width="0" height="0"></object>

<object id="nb_nfiction" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" 
width="0" height="0"></object>

<object id="nb_selfhelp" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" 
width="0" height="0"></object>

<object id="nb_ref" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" 
width="0" height="0"></object>

<object id="nb_mags" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" 
width="0" height="0"></object>

<body>
<table width="30%" border="0" align="left" cellspacing="1" font size="10">


  <tr bgcolor="#CCCCCC">
    <td colspan="2">
				<table id="FICTIONTABLE" table width="100%"  datasrc="#nb_fiction" font size="1" border="0" align="center" bordercolor="#FFFFFF">
				  <caption>
					<span>Fiction        </span>
				  </caption>
					<thead>
				  <tr>
					<th span class="style1">Stock No.</th></span>
					<th span class="style1">Title</th></span>
					<th span class="style1">Author</th></span>
					<th span class="style1">Status</th></span>
					<th span class="style1">Price</th></span>
					<th span class="style1">Publisher</th></span>
					<th span class="style1">Year of Release</th></span>
				  </tr>
				</thead>
				<tbody>
				  <tr>
					<td><span class="style1" datafld="stock"></td></span>
					<td><span class="style1" datafld="title"></td></span>
					<td><span class="style1" datafld="author"></td></td></span>
					<td><span class="style1" datafld="status"></td></span>
					<td><span class="style1" datafld="price"></td></span>
					<td><span class="style1" datafld="publisher"></td></span>
					<td><span class="style1" datafld="year"></td></span>
					
					
					
				  </tr>
				  </tbody>
				</table>
				
	</td>
  </tr>
</body>
</html>

I only included the first part of the html code along with the first table, but there is a table for each xml file. You can also probably tell how the XML files are structured by looking at the way they are displayed in the tables.
I think what I want to do can be accomplished with JavaScript, but I have no idea how to do it and it's the only thing I have left before I'm done.
Any help would really be appreciated and thanks in advance.

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

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

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?

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...

how to change placeholder text colour in javascript?

Code:

<script>
// this is inside a html form
form['height'].placeholder+="enter password";
</script>

how do I change the text above from grey to a different colour?

Also, how do I check for isnotanumber in a form submission?

Code:

if(isNaN(form['weight'].value)) {
			console.log('use a number');

it still outputs that console.log error!!!!!!!!!

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!