|
JavaScript - Javascript Change Background Body Colour
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 Similar TutorialsHow 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, 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 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, is it possible to have a different background image on IE to firefox, I am doing my background image as shown below: Code: <body style="background-image: url(unbranded_bg.png);"> however I want script that says if IE, show unbranded_bg2.png and if firefox show unbranded_bg.png. Many Thanks, Simon I currently have a web site in which I am using some Javascript to change the Background of a DIV. The DIV is defined as follows : <div id="outerscreen"> <div id="mainscreen"> </div> </div> and the Javascript I am using is as follows : var docEl = document.getElementById('outerscreen'); docEl.style.backgroundImage = "url('pics/intro.gif')"; My problem arises where this function works perfectly on IE but fails for Chrome, FF and Safari. Can anyone shed any light on what the problem is and how I might be able to resovle this. Thanks in advance Chris Hi, what I want to do is create a menu with rollover buttons but each button also changes the background image of a div. I've managed to change the colour of the div but not add an image there. I've added my code so you can have a look. Case 0 shows me attempting to change the background image. I must be doing something wrong. I've left the other cases as colours so you can see how I did that. I eventually want it all to be images. I'm creating a Joomla website (not sure if that makes a difference). Code: <body onload="addHandlers()">
<script type="text/javascript" language="javascript">
function addHandlers(){
var allMenus = document.getElementById("services_menu").getElementsByTagName("li");
for(var k = 0; k < allMenus.length; k++)
{
allMenus[k].setAttribute('onmouseover', 'ChangeContentBg('+ k + ')' );
allMenus[k].setAttribute('onmouseout', 'Reset()');
}
}
</script>
<script type="text/javascript">
function ChangeContentBg(i)
{
var Num = parseInt(i);
var ContentDiv = document.getElementById("content");
switch(Num)
{
case 0:
ContentDiv.style.background-image = 'url(../images/waxingtinting_rollover_image.jpg)';
break;
case 1:
ContentDiv.style.backgroundColor = 'red';
break ;
case 2:
ContentDiv.style.backgroundColor = 'purple';
break ;
case 3:
ContentDiv.style.backgroundColor = 'green';
break ;
case 4:
ContentDiv.style.backgroundColor = 'yellow';
break ;
/*For each new color you would have to add a new case and change ChangeContentBg() parameter , to the case you want in <li> tag*/
}
}
function Reset()
{
document.getElementById("content").style.backgroundColor = '';
}
</script>
I have a div that changes background on click. Example: <script type="text/javascript"> function changeBackground(strURL) { document.getElementById('about').style.backgroundImage="url("+strURL+")"; } </script> <body> <div id="about"> <a href="#about" onClick="changeBackground('mainbackground.jpg');">text</a> <a href="#about" onClick="changeBackground('background2.jpg');">text</a> </div> This part works just fine so no issues. However, I have content on the mainbackground.jpg that is getting transferred over to the other backgrounds as well. I would like each background to have its own paragraph content. I do not want to embed the info into the images for SEO reasons. Any ideas on how to do this? Thanks! I have a div that changes background on click. Example: <script type="text/javascript"> function changeBackground(strURL) { document.getElementById('about').style.backgroundImage="url("+strURL+")"; } </script> <body> <div id="about"> <a href="#about" onClick="changeBackground('mainbackground.jpg');">text</a> <a href="#about" onClick="changeBackground('background2.jpg');">text</a> </div> This part works just fine so no issues. However, I have content on the mainbackground.jpg that is getting transferred over to the other backgrounds as well. I would like each background to have its own paragraph content. I do not want to embed the info into the images for SEO reasons. Any ideas on how to do this? Thanks! can you explain someone step by this code?i didn't get it. <script language="Javascript"> <!-- function backcolor(form){ temp = "" for (var i = 0; i < 16; i++) { temp = form.color[i].value if (form.color[i].checked){ document.bgColor = temp } } } function randombackground(){ document.bgColor = getColor() } function getColor(){ currentdate = new Date() backgroundcolor = currentdate.getSeconds() if (backgroundcolor > 44) backgroundcolor = backgroundcolor - 45 else if (backgroundcolor > 29) backgroundcolor = backgroundcolor - 30 else if (backgroundcolor > 15) backgroundcolor = backgroundcolor - 16 if (backgroundcolor == 0 ) return "olive"; else if (backgroundcolor == 1 ) return "teal"; else if (backgroundcolor == 2 ) return "red"; else if (backgroundcolor == 3 ) return "blue"; else if (backgroundcolor == 4 ) return "maroon"; else if (backgroundcolor == 5 ) return "navy"; else if (backgroundcolor == 6 ) return "lime"; else if (backgroundcolor == 7 ) return "fuschia"; else if (backgroundcolor == 8 ) return "green"; else if (backgroundcolor == 9 ) return "purple"; else if (backgroundcolor == 10 ) return "gray"; else if (backgroundcolor == 11 ) return "yellow"; else if (backgroundcolor == 12 ) return "aqua"; else if (backgroundcolor == 13 ) return "black"; else if (backgroundcolor == 14 ) return "white"; else if (backgroundcolor == 15 ) return "silver"; } // --> </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! Hello. The code below lets a user select a drop down option and a picture changes depending on the selection. I am trying to make it so when you select an option on the dropdown the picture shows up in the center of the screen and in the background behind the text. Here is the code. Code: <html>
<head>
<style type='text/css'>
#txt {background-repeat:no-repeat;width:200px;height:200px;}
</style>
<script type='text/javascript'>
function div_bg(team){
document.getElementById('txt').style.backgroundImage="url(images/" + team + ".jpg)";
}
</script>
</head>
<body>
<select name='team' onChange='div_bg(this.value);'>
<option name='arsenal' value='arsenal'>Arsenal</option>
<option name='liverpool' value='liverpool'>Liverpool</option>
</select>
<div id='txt'></div>
</body>
Thanks in advance!! 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? 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 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 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"> </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 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... |
|||||||