|
JavaScript - Help Changing Background Colour On Checked Box
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... Similar TutorialsHow come this isn't working? document.getElementById('glance').style.display='block'.color='gold'; 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'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? Pleas how can i change div bg color with active chcecked radio button <div style="background-color:#fff;"><input type="radio" name="radio" id="radio" value="1" /> Active performer</div> <div style="background-color:#fff;"><input type="radio" name="radio" id="radio" value="2" /> Poster</div> <div style="background-color:#fff;"><input type="radio" name="radio" id="radio" value="3" /> Only attender</div> - if checked, change color from #fff to #ccc For checkboxes i find this <span id="cDate1" style="background-color:#FFF"><input type="checkbox" name="check" id="date1" onclick="document.getElementById('cDate1').style.backgroundColor=this.checked?'#ccc':'#FFF';" /> 13.10.2010</span> Thnx for help in advance 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 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! 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'm working on a site that has a sky as the background, the idea is that the background image will change according the the time of day... Sunrise, day, sunset, night... I have been using this code... <!-- JavaScript --> <script language="JavaScript"> var d = new Date() var h = d.getHours() // if (h < 6) document.write('<body background="sky.jpg" bgcolor="white">') else if (h < 12) document.write('<body background="day.jpg" bgcolor="white">') else if (h < 18) document.write('<body background="day.jpg" bgcolor="white">') else if (h < 24) document.write('<body background="night.jpg" bgcolor="white">') </script> This works fine for most hours but when in the hours of 5, 12, 18 and 24 the screen is blank (white background no image) any ideas why this might be happening? Thanks for any ideas in advance! After you click on the last button 3 times it should change the background to the zombies image however it isn't working. I haven't found tutorials for doing it exactly as I am attempting it but I don't see why this isn't working. It runs through the code just fine and the button works as intended except for the fact that the background image isn't changing. I am still pretty new to JavaScript however so I feel I may just being calling the image incorrectly. Code: <html>
<title>Welcome :D</title>
<head>
<style type="text/css">
body {
background-color:E6E6E6;
}
</style>
<script type="text/javascript">
//Pre loading images to be used with check boxes.
function preLoad(){
Eyeball= new Image(400,200)
Eyeball.src = "Eyeball.jpg"
Smileys = new Image(400,200)
Smileys.src = "Smileys.gif"
goodAfternoon = new Image(400,200)
goodAfternoon.src = "Good Afternoon.gif"
goodAfternoonFinal = new Image(400,200)
goodAfternoonFinal.src = "Good Afternoon.gif"
zombies=new Image()
zombies.src = "Zombies.jpg"
}
function validate(){
if(document.getElementById("cb1").checked){
document.goodAfternoon.src=Eyeball.src;
}else{
document.goodAfternoon.src=Smileys.src;
}
}
function reset(){
cb1.checked=false;
document.goodAfternoon.src=goodAfternoonFinal.src;
}
var i=0;
function myalert(){
i++
if(i == 1){
alert("I dare you to press me again....");
}
if(i == 2){
}
if(i == 3){
i = 0;
document.body.background = "zombies.src";
}
}
</script>
</head>
<body onLoad="javascript:preLoad()">
This is where I learn a lot of my coding for Java, JavaScript, and HTML
<a href="http://www.thenewboston.com/"><img src="theNewBoston.gif"></a>
</br>
"Check" me out;) <input type="checkbox" id="cb1" onClick="validate()" />
<img src="Good Afternoon.gif" name="goodAfternoon">
<input type="button" id="cb2" value="RESET" onClick="reset()"/>
</BR></br></br></br></br>
Hello, thank you for visiting my webpage I hope you like it.
<input type="button" onClick="myalert()"value="CLICK me"/>
</body>
</html>
Hey guys, So I have a top navigation bar with links in it and when I hoover over a link I want the navigation bars background image to change. The links are actually Images with an <a href=""></a> tag around them. The site isn't live so I can't give you a link. Here is the code: HTML ( I want the id="Nav" background to change when I hover over the "Home" "Forums" "Downloads" "Contact" Images ) Code: <div id="Nav"> <div id="Splitters" class="clearfix"> <div id="group1"> <img id="Layer_3_copy" src="images/Layer_3_copy.png" alt="" width="2" height="65" /> </div> <div id="group2"> <img id="Layer_3_copy_3" src="images/Layer_3_copy.png" alt="" width="2" height="65" /> </div> <div id="group3"> <img id="Layer_3_copy_4" src="images/Layer_3_copy_3.png" alt="" width="2" height="67" /> </div> </div> <div id="Nav_Text" class="clearfix"> <a href="#"> <img id="Home" src="images/Home.png" alt="" width="48" height="11" /> </a> <a href="#"> <img id="Forums" src="images/Forums.png" alt="" width="71" height="11" /> </a> <a href="#"> <img id="Downloads" src="images/Downloads.png" alt="" width="109" height="11" /> </a> <a href="#"> <img id="Contact" src="images/Contact.png" alt="" width="80" height="11" /> </a> </div> </div> CSS Code: #Nav {
background: url(images/Main.png) no-repeat;
left: 0;
min-height: 70px;
position: absolute;
top: 0;
width: 100%;
}
#Splitters {
left: 421px;
position: absolute;
top: 0;
width: 334px;
}
#group1 {
display: inline;
float: left;
margin: 0 0 0 107px;
width: 2px;
}
#Layer_3_copy {
clear: both;
float: left;
margin: 0;
width: 2px;
}
#group2 {
float: left;
margin: 0 0 0 95px;
width: 2px;
}
#Layer_3_copy_3 {
clear: both;
float: left;
margin: 0;
width: 2px;
}
#group3 {
float: right;
margin: 0;
width: 2px;
}
#Layer_3_copy_4 {
clear: both;
float: left;
margin: 0;
width: 2px;
}
#Nav_Text {
left: 449px;
position: absolute;
top: 29px;
width: 397px;
}
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;
}
}
Hey, I want javascript to change the background image on hover. This is my javascript: Code: function navOver(obj){
var imgUrl = 'url(images/' + obj.id + '.hover.png) center no-repeat';
obj.style.background='imgUrl';
}
function navOut(obj){
var imgUrl = 'url(images/' + obj.id + '.png) center no-repeat';
obj.style.background='imgUrl';
}
and this is the HTML: Code: <li id="home" onmouseover="navOver(this)" onmouseout="navOut(this)"></li> This doesn't work, can anyone help me and say me what to do? 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 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 used this on-click changeable background code for my website: http://www.codingforums.com/showthread.php?t=136821 And now I have the same question as the original poster: is there any way to get it so that the chosen background stays put even if the page is refreshed or navigated away from? Or is it not possible because all my pages are separate files? website is: http://mintymix.com/ I hope it's ok to post here, the other thread is from 2008. Thanks for reading =) *edit* Ah, I'm kind of figuring that javascript doesn't work like that. If it won't work, is there any other type of coding I may use to achieve this? Hello all, I want to set dynamically a div's background image when the page loads, so I have my code like so: javascript code: window.onload = init; function init(){ $(document).ready(function(){ $('#button1').css('background', 'url(../imagenes/buttonNormal.jpg)'); $('#pg1').css('color', 'black'); $('#pg1').css('font-weight', 'normal'); }); } My CSS stylesheet is like so: #buttonsWrapper { position:relative; margin 50px 0px 0px 0px; } .buttons { text-decoration:none; font-family:Verdana, Geneva, sans-serif; font-size:17px; font-weight:bold; color:#FFF; } #button1 { margin: 31px 0px 0px 0px; } #button2 { margin: -43px 0px 0px 195px; } #button3 { margin: -43px 0px 0px 390px; } #button4 { margin: -43px 0px 0px 585px; } #button5 { margin: -43px 0px 0px 780px; } #button1, #button2, #button3, #button4, #button5 { width:172px; height:33px; /* 33px */ padding-top:10px; text-align:center; } #button1:hover, #button2:hover, #button3:hover, #button4:hover, #button5:hover { background-image:url(../imagenes/buttonNormal.jpg); background-repeat:no-repeat; background-position:top; } My HTML sourcecode is like so: <div id="buttonsWrapper"> <div id="button1"><a href="#" id="pg1" class="buttons">link1</a></div> <div id="button2"><a href="#" id="pg2" class="buttons">link2</a></div> <div id="button3"><a href="#" id="pg3" class="buttons">link3</a></div> <div id="button4"><a href="#" id="pg4" class="buttons">link4</a></div> <div id="button5"><a href="#" id="pg5" class="buttons">link5</a></div> </div> The thing is that the background image that I'm calling (../imagenes/buttonNormal.jpg) is not loading for some reason... what am I doing wrong? Thank you so much in advance... I am trying to make a button that would change the background image whenever somebody clicks it. I have tried something along the lines of this: Quote: <input type="button" value="Pattern1" onClick="background-image: url(background.png);background-repeat: no-repeat;"> and, Quote: <input type="button" value="Pattern2" onClick="background: url(background.png);background-repeat: no-repeat;"> as you can see, I am a beginner at coding in general so any help is appreciated. My assumption to why it doesn't work is that I am combining javascript with CSS, but I am most likely wrong. |
|||||||