I have a drop down menu on my page, and I want to change the background color of the box from white to match the rest of the page, how do I do this.

Thanks

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title>Welcome to my Home Page</title>

<script language="JavaScript" type="text/javascript">

////The source for this  script came from http://allwebco-templates.com/support/S_menus_dropdown.htm////
///For the Game,I changed the back ground picture. I realize it's not JS///
<!--
function land(ref, target)
{
lowtarget=target.toLowerCase();
if (lowtarget=="_self") {window.location=loc;}
else {if (lowtarget=="_top") {top.location=loc;}
else {if (lowtarget=="_blank") {window.open(loc);}
else {if (lowtarget=="_parent") {parent.location=loc;}
else {parent.frames[target].location=loc;};
}}}
}
function jump(menu)
{
ref=menu.choice.options[menu.choice.selectedIndex].value;
splitc=ref.lastIndexOf("*");
target="";
if (splitc!=-1)
{loc=ref.substring(0,splitc);
target=ref.substring(splitc+1,1000);}
else {loc=ref; target="_self";};
if (ref != "") {land(loc,target);}
}
//-->




<!--
/// The JS below is for the date and time. and i got the sorce from http://www.re-es.org/ ///

var day_names = new Array(7)
day_names[0] = "Sunday"
day_names[1] = "Monday"
day_names[2] = "Tuesday"
day_names[3] = "Wednesday"
day_names[4] = "Thursday"
day_names[5] = "Friday"
day_names[6] = "Saturday"
 
 
var month_names = new Array(12)
month_names[0] = "January"
month_names[1] = "February"
month_names[2] = "March"
month_names[3] = "April"
month_names[4] = "May"
month_names[5] = "June"
month_names[6] = "July"
month_names[7] = "August"
month_names[8] = "September"
month_names[9] = "October"
month_names[10] = "November"
month_names[11] = "December"
 
 
date_now = new Date()
 
 
day_value = date_now.getDay()
date_text = day_names[day_value]
 
 
month_value = date_now.getMonth()
date_text += " " + month_names[month_value]
 
 
date_text += " " + date_now.getDate()
 
 
date_text += ", " + date_now.getFullYear()
 
 
minute_value = date_now.getMinutes()
if (minute_value < 10) {
    minute_value = "0" + minute_value
}
 
 
hour_value = date_now.getHours()
if (hour_value == 0) {
   greeting = "Good Morning "
   time_text = " at " + (hour_value + 12) + ":" + minute_value + " AM"
}
else if (hour_value < 12) {
    greeting = "Good Morning "
    time_text = " at " + hour_value + ":" + minute_value + " AM"
}
else if (hour_value == 12) {
    greeting = "Good Afternoon "
    time_text = " at " + hour_value + ":" + minute_value + " PM"
}
else if (hour_value < 17) {
    greeting = "Good Afternoon "
    time_text = " at " + (hour_value - 12) + ":" + minute_value + " PM"
}
else {
    greeting = "Good Evening"
    time_text = " at " + (hour_value - 12) + ":" + minute_value + " PM"
}
 
document.write(greeting +  " &nbsp;&nbsp;Today is " + date_text + time_text)
 
//-->








</script>


<link rel="stylesheet" type="text/css" href="css/main.css">

</head>
<body>

<div id="container">

<p><img id="banner" src="images/banner.gif" alt="banner"></p><hr color="#FF0000"></p>
<ul id="nav">
 
 <li><form action="#" method="post">
<select name="choice" size="1" onChange="jump(this.form)" class="dropdown">
<option value="index.html">Home</option>
<option value="scripts_developed.html">Scripts Developed</option>
<option value="best_practices.html">Best practices for JavaScript coding</option>
<option value="ajax.html">AJAX</option>
<option value="JavaScript_frustrations.html">JavaScript frustrations & Javascript Game</option>
</select>
</form>

</li>

</ul>

<div id="content"></div>

</div>
<table width="1050" border="0" align="center">
  <tr>
    <td align="center"><p><img src="images/logo1.gif" width="300" height="300" hspace="30"><img src="images/logo3.gif" width="300" height="300"><img src="images/logo2.gif" width="300" height="300"></p>
    <p><img src="images/logo4.gif" width="300" height="300" hspace="30"><img src="images/logo5.gif" width="300" height="300"><img src="images/logo6.gif" width="300" height="300"></p></td>
  </tr>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>

Recommended Answers

All 8 Replies

Set the background colour of ul #nav to white.

I tryed that and my drop down menu stays white.

Sorry, I thought you wanted the background to be white. I have just re-read and see you want ti to match the background of the page (presumably not white). Therefore just change the ul #nav style to have the background colour you want. Also apply it to the ul #nav li to make sure.

I'm guessing your saying in my CSS sheet. I looked and theres no ul #nav. There is the following in my CSS sheet. and in my HTML body there's nothing like that all. I'm starting to think. I'm missing some code.

#nav {
    float:left;
    width:320px;
    padding:0;
    margin:0;
    list-style-type:none;
	background-color: 
 }
#nav a {
    display:block;
    line-height:36px;
    padding-left:10px;
    color:#000;
 }

Hello simplypixie, I solved all my problems with my menu,except I just noticed that after I have been to any of the other pages and try to return to the home page. It will not. I tryed many ways to fix it and nothing, I even added a second home tab and that worked but it looks funny with two home links.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title>Welcome to my Home Page</title>

<script language="JavaScript" type="text/javascript">

////This script is for the drop down menu. The source for this  script came from [url]http://allwebco-templates.com/support/S_menus_dropdown.htm////[/url]
//-->starts here.
function land(ref, target)
{
lowtarget=target.toLowerCase();
if (lowtarget=="_self") {window.location=loc;}
else {if (lowtarget=="_top") {top.location=loc;}
else {if (lowtarget=="_blank") {window.open(loc);}
else {if (lowtarget=="_parent") {parent.location=loc;}
else {parent.frames[target].location=loc;};
}}}
}
function jump(menu)
{
ref=menu.choice.options[menu.choice.selectedIndex].value;
splitc=ref.lastIndexOf("*");
target="";
if (splitc!=-1)
{loc=ref.substring(0,splitc);
target=ref.substring(splitc+1,1000);}
else {loc=ref; target="_self";};
if (ref != "") {land(loc,target);}
}
//-->Ends here.

</script>

<td height="20" colspan="2" valign="top" bordercolor="#DDEEFF" bgcolor="#B5CBDB"><div align="center">
	<font face="Arial" color="#000080" size="3">		
	
	
<script language="JavaScript" type="text/javascript">
/// The JS below is for the date and time. and i got the sorce from [url]http://www.re-es.org/[/url] ///

//-->Starts here

var day_names = new Array(7)
day_names[0] = "Sunday"
day_names[1] = "Monday"
day_names[2] = "Tuesday"
day_names[3] = "Wednesday"
day_names[4] = "Thursday"
day_names[5] = "Friday"
day_names[6] = "Saturday"
 
 
var month_names = new Array(12)
month_names[0] = "January"
month_names[1] = "February"
month_names[2] = "March"
month_names[3] = "April"
month_names[4] = "May"
month_names[5] = "June"
month_names[6] = "July"
month_names[7] = "August"
month_names[8] = "September"
month_names[9] = "October"
month_names[10] = "November"
month_names[11] = "December"
 
 
date_now = new Date()
 
 
day_value = date_now.getDay()
date_text = day_names[day_value]
 
 
month_value = date_now.getMonth()
date_text += " " + month_names[month_value]
 
 
date_text += " " + date_now.getDate()
 
 
date_text += ", " + date_now.getFullYear()
 
 
minute_value = date_now.getMinutes()
if (minute_value < 10) {
    minute_value = "0" + minute_value
}
 
 
hour_value = date_now.getHours()
if (hour_value == 0) {
   greeting = "Good Morning"
   time_text = " at " + (hour_value + 12) + ":" + minute_value + " AM"
}
else if (hour_value < 12) {
    greeting = "Good Morning"
    time_text = " at " + hour_value + ":" + minute_value + " AM"
}
else if (hour_value == 12) {
    greeting = "Good Afternoon"
    time_text = " at " + hour_value + ":" + minute_value + " PM"
}
else if (hour_value < 17) {
    greeting = "Good Afternoon"
    time_text = " at " + (hour_value - 12) + ":" + minute_value + " PM"
}
else {
    greeting = "Good Evening"
    time_text = " at " + (hour_value - 12) + ":" + minute_value + " PM"
}
 
document.write(greeting +  " &nbsp;&nbsp;Today is " + date_text + time_text)
 
//-->Ends here

</script>


<link rel="stylesheet" type="text/css" href="css/main.css">

</head>
<body>

<div id="container">

<p><img id="banner" src="images/banner.gif" alt="banner"></p><hr color="#FF0000"></p>
<div  id="nav" >
 
 <form  action="#" method="post" >
<select  name="choice"  size="1"  onChange="jump(this.form)" class="mnuLinks" >
<option value="index.html"class="mnuLinks"  selected>Home</option>
<option value="scripts_developed.html" class="mnuLinks">Scripts Developed</option>
<option value="best_practices.html" class="mnuLinks">Best practices for JavaScript coding</option>
<option value="ajax.html" class="mnuLinks">AJAX</option>
<option value="JavaScript_frustrations.html" class="mnuLinks">JavaScript frustrations & Javascript Game</option>
</select>
</form>



</div>

<div id="content"></div>

</div>
<table width="1050" border="0" align="center">
  <tr>
    <td align="center"><p><img src="images/logo1.gif" width="300" height="300" hspace="30"><img src="images/logo3.gif" width="300" height="300"><img src="images/logo2.gif" width="300" height="300"></p>
    <p><img src="images/logo4.gif" width="300" height="300" hspace="30"><img src="images/logo5.gif" width="300" height="300"><img src="images/logo6.gif" width="300" height="300"></p></td>
  </tr>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>

Why have you got your links in a form?

Maxxxx,

You will get "back" failure in most (all?) major browsers except IE due to the fact that they re-render the page from a special "back/forward" cache (bfcache). This is desirable for rapid forward/back action but, incorrectly in my opinion, a select menu onchange event is also re-fired if (I think) it was the last event to occur on that page.

The solution is slightly convoluted :

  • perform a test in the menu's onchange handler to suppress changing location when the selected option is the current page.
  • put in place an window.onunload event handler which ensures that the menu is reset to the current page just before going to the selected page.

The javascript is best framed in a window.onload handler and simplifies considerably. Note use of a hidden link to obtain href/target behaviour.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Welcome to my Home Page</title>
<script language="JavaScript" type="text/javascript">
window.onload = function(){
	//Frame everything inside a window.onload handler to 
	//  * avoid putting members into the global namespace
	//  * avoid document.write()
	//  * ensure document is loaded before trying to address the DOM.

	//Find DOM elements
	var greetingContainer = document.getElementById('greeting');
	var menu = document.forms[0].choice;
	var hiddenLink = document.getElementById('hiddenLink');

	//Build greeting/date/time string
	if(greetingContainer){
		var day_names = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
		var month_names = ["January","February","March","April","May","June","July","August","September","October","November","December"];
		var date_now = new Date();
		var hour_value = date_now.getHours();
		var minute_value = date_now.getMinutes();
		var textArr = [];//Build greeting/time string in an array. String += String is inefficient.
		textArr.push((hour_value < 12) ? "Good Morning" : (hour_value < 17) ? "Good Afternoon" : "Good Evening");//Tertiary operator saves several lines of code here and elsewhere below.
		textArr.push('&nbsp;&nbsp;Today is');
		textArr.push(day_names[date_now.getDay()]);
		textArr.push(month_names[date_now.getMonth()]);
		textArr.push(date_now.getDate() + ',');
		textArr.push(date_now.getFullYear());
		textArr.push('at');
		textArr.push(((hour_value % 12) || 12) + ":" + ((minute_value < 10) ? ("0" + minute_value) : minute_value));
		textArr.push((hour_value < 12) ? "AM" : "PM");
		greetingContainer.innerHTML = textArr.join(' ');//Use String.join() to put the pieces together and stick the resulting string into the DOM.
	}

	if(menu && hiddenLink){
		menu.onchange = function(){
			if(menu.selectedIndex == pageIndex) { return; }//bail out if menu option is this page
			var splitVal = menu[menu.selectedIndex].value.split('*');
			var href = splitVal[0] || '';
			var target = splitVal[1] || '_self';
			if(href){
				hiddenLink.href = href;
				hiddenLink.target = target;
				hiddenLink.click();
			}
		};
	}
	var pageIndex = menu.selectedIndex;//remember this page's index in the menu
	window.onunload = function(){
		menu.selectedIndex = pageIndex;//return menu to this page's menu option
	}
}
</script>
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>

<body>

<a id="hiddenLink" href="" target="" style="display:none;">&nbsp;</a>
<div id="greeting"></div>

<div id="container">
	<p><img id="banner" src="images/banner.gif" alt="banner" /></p>
	<hr color="#FF0000" />
	<div id="nav">
		<form action="#" method="post">
			<select name="choice" size="1" class="mnuLinks" >
				<option class="mnuLinks" value="index.html" selected>Home</option>
				<option class="mnuLinks" value="scripts_developed.html">Scripts Developed</option>
				<option class="mnuLinks" value="best_practices.html">Best practices for JavaScript coding</option>
				<option class="mnuLinks" value="ajax.html">AJAX</option>
				<option class="mnuLinks" value="JavaScript_frustrations.html">JavaScript frustrations & Javascript Game</option>
			</select>
		</form>
	</div>
	<div id="content"></div>
</div>

<table width="1050" border="0" align="center">
<tr>
<td align="center">
	<p><img src="images/logo1.gif" width="300" height="300" hspace="30" /><img src="images/logo3.gif" width="300" height="300" /><img src="images/logo2.gif" width="300" height="300" /></p>
	<p><img src="images/logo4.gif" width="300" height="300" hspace="30"><img src="images/logo5.gif" width="300" height="300" /><img src="images/logo6.gif" width="300" height="300" /></p>
</td>
</tr>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>

Tested in Opera

See comments in code.

You may be better off with <!DOCTYPE HTML ...transitional...> or <!DOCTYPE XHTML ...transitional...>. Unless there's a very good reason for it, I avoid strict.

Airshow

Thank you very much. this is very helpful. It's kind of funny. I got the script from a website, and it told me what code to copy.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.