JavaScript - Changing Background At Time Of The Day

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;
}

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>

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

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

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

Here is my script -- Applied in <head>

Code:

<script language="JavaScript">
var bgImage = new Array(); // don't change this

bgImage[0] = "images/aboutus_1.jpg";
bgImage[1] = "images/1.jpg";
bgImage[2] = "images/2.jpg";
bgImage[3] = "";

function changeBG(bgImage)
{
     document.body.background = backImage[bgImage];
}

</script>

And here is the code im using that is not working within <body>

Code:

<body>

     <div id="map"></div>
     <div id="bf_container" class="bf_container">
     <div id="bf_background" class="bf_background">
          <img id="bf_background" src="images/background/default.jpg" alt="image1" style=" display:none;"/>

     <div class="bf_overlay"></div>
     <div id="bf_page_menu" class="bf_menu" >
          <h1 class="title">Fujiyama<span>Japanese</span></h1>
               <ul>
                    <li><a href="#" onClick="javascript:changeBG(1)" data-content="home"><span class="bf_background"></span><span>Welcome</span></a></li>
                    <li><a href="#" onClick="javascript:changeBG(0)" data-content="about"> <span class="bf_hover"></span><span>About us</span></a></li>

this goes on, however, it does not change the background when clicking on "Welcome" or "About us" Links. Where I want "About us" to load image#0 in the index and "Welcome" to load image #1.

Any help would be greatly appreciated.

Thanks,

Cross

OK. I'm super new to any kind of java script. What I want is a menu that, when clicked, changes the background color of a table cell to blue. When a different option is clicked, the current highlighted table should turn back to gray and the new selection should be blue.
Well, I have all of that working. What I need now is just to have the first option start out highlighted and to become unhighlighted when another option is clicked.

Any help would be awesome!!!!
Thanks!!!!!!

Code:

<html> 
<head><title>menu</title>

<script type="text/javascript"> 
var element = null;

function select(xx) 
{ 
if ( element ) { 
element.style.backgroundColor='gray'; 

} 
element = xx; 
xx.style.backgroundColor='navy'; 

} 
</script>

<style type="text/css"> 
a {text-decoration:none; color:white} 
a:visited {color:white} 
a:active {color:white} 
a:hover {color:white} 
table#lay_menu {width:100%; margin:0px} 
table#lay_menu td {text-align:center; width:20%} 
.menu {text-align:center; background-color:gray; } 
.start {text-align:center; background-color:navy; }
</style> 
</head>

<body> 
<table id="layout">
<tr> 
<td width="188"> 
<a href="#">
<div class="menu" onClick="select(this)">Artists</div>
</a></td> 
</tr>
<tr>
  <td><a href="#">
    <div class="menu" onClick="select(this)">CPAs</div>
  </a></td>
  </tr>
<tr>
  <td><a href="#">
    <div class="menu" onClick="select(this)">Doctors</div>
  </a>&nbsp;</td>
  </tr>
<tr>
  <td>&nbsp;</td>
  </tr>
<tr>
  <td>&nbsp;</td>
  </tr> 
</table> 
</body> 
</html>

Hi coders,

I need to achieve two things upon making a selection from a drop down field:

1) Changing the background picture of a cell.
2) Changing the size of a uploaded foreground picture within the same cell.


Code:

<select name=ADDITIONALINFO> 
<option value="25 x 25">25 x 25</option> 
<option value="35 x 35">35 x 35</option> 
<option value="45 x 45">45 x 45</option> 
<option value="55 x 55">55 x 55</option> 
</select>

Any guidance how to achieve this is appreciated.

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

Code:

var err_str="";
function validate_grid(value,id,ind)
{
 $("#result").html(" ").show();
 if(ind==1 || ind==2)
  {
  var patt=/^([0][0-9]|[1][0-9]|[2][0-3])[:]{1}[0-5][0-9]$/;
  if(!patt.test(value))
   {
	mygrid.setCellTextStyle(id,ind,"background-color:yellow;");
	if(err_str!="")
		err_str+="\n"+(ind+1)+".Enter numbers and : only..";
	else
		err_str=(ind+1)+".Enter numbers and : only";
	return false;
   }
    else
      {
	mygrid.setCellTextStyle(id,ind,"background-color:white;");
	return true;
      }
  }
}
alert(err-str);

here ind==1 is from_time and ind==2 is to_time,i need to validate time as to_time must be always greater than from-time,if condition fails an alert msg should populate.time format is[05:00]as it is in string format im unable to do the validation for it.(ex:from-time=08:00 to-time=07:59 condition fails)

thank you.

Hello im using dhtmlx grid in this cells i have from time and to time (i.e ind==1 and ind==2) i need to validate time where to-time must be greater than from-time else it should alert an message,i have writeen a normal Regular expression for the time validation.as the time is i string format i.e[05:00],please can any one send me code for that.
Code:

var err_str="";
function validate_grid(value,id,ind)
	{
	if(ind==1 || ind==2)
		{
			var patt=/^([0][0-9]|[1][0-9]|[2][0-3])[:]{1}[0-5][0-9]$/;
			if(!patt.test(value))
			{
				mygrid.setCellTextStyle(id,ind,"background-color:yellow;");
				if(err_str!="")
					err_str+="\n"+(ind+1)+".Enter numbers and : only..";
				else
					err_str=(ind+1)+".Enter numbers and : only";
				return false;
			}
			else
			{
				mygrid.setCellTextStyle(id,ind,"background-color:white;");
				return true;
			}
		}
}

hi im using dhtml xgrid where i need to do validation for time ,(from-time and to-time i.e ind==1 and ind==2 ) to-time must be greater than from-time else i need to alert a message to-time must be greater than from-time.
can any one send me the code for it time format is[05:00].
Code:

var err_str="";
function validate_grid(value,id,ind)
	{
	$("#result").html(" ").show();
		if(ind==1 || ind==2)
		{
			var patt=/^([0][0-9]|[1][0-9]|[2][0-3])[:]{1}[0-5][0-9]$/;
			if(!patt.test(value))
			{
				mygrid.setCellTextStyle(id,ind,"background-color:yellow;");
				if(err_str!="")
					err_str+="\n"+(ind+1)+".Enter numbers and : only..";
				else
					err_str=(ind+1)+".Enter numbers and : only";
				return false;
			}
			else
			{
				mygrid.setCellTextStyle(id,ind,"background-color:white;");
				return true;
			}
		}
}