PHP or Javascript or CSS Question

SkyHog · Apr 21, 2009

I'm lost, and I know this is probably a PITA for y'all to check out for me....

I'm working with someone else's code here, with some changes I've done. Basically, what we've got here is a dropdown built in php, using an image as the button.

Now, in Internet Explorer, the dropdown shows fine. In Firefox and Chrome, however, the button shows with no dropdown information.

Can anyone take a look at my stuff to see what's going on?

http://www.ridetheskies.com/worktest/test.php

The code will be placed below momentarily.

test.php

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>
<title>Test</title>
<script src="menuscript.js" language="javascript" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="menustyle.css" media="screen, print" />
</head>
<body>
<table width="791" border="0" style="background-image:url(/Recolored/index_files/logobottom.gif)";>
    <tr>
      <td width="139" height="27"><a href="services.php" onmouseover="setOverImg('1','');overSub=true;showSubMenu('submenu1','button1');" onmouseout="setOutImg('1','');overSub=false;setTimeout('hideSubMenu(\'submenu1\')',delay);" target=""><img src="buttons/svcsbtnup.png" name="button1" hspace="1" vspace="1" border="0" id="button1" /></a></td>
      
    </tr>
  </table>
</body>
</html>

menustyle.css

Code:

.dropmenu {
   position: absolute;
   left: -1500px;
   visibility: visible;
   z-index: 101;
   float: left;
   width: 132px;

   border-width: 1px;
   border-style: solid;
   border-color: #000000;	
   background-color: #BFBFBF;
}
.dropmenu ul {
   margin: 0;
   padding: 0;
   list-style-type: none;
}
.dropmenu li {
   display: inline;
}
.dropmenu a, .dropmenu a:visited, .dropmenu a:active, .dropmenu a:link {
   display: block;
   width: 130px;

   padding: 1px;
   margin: 1px;
   font-family: Arial;
   font-size: 11px;
   font-weight: bold;
   text-align: center;
   text-decoration: none;

   color: #809AFF;
   background-color: #000000;
}
.dropmenu a:hover {
   padding: 1px;
   margin: 1px;
   font-family: Arial;
   font-size: 11px;
   font-weight: bold;
   text-align: center;
   text-decoration: none;

   color: #000000;
   background-color: #D4D4D4;
}

menuscript.js

Code:

/*** SET BUTTON'S FOLDER HERE ***/
var buttonFolder = "buttons/";

/*** SET BUTTONS' FILENAMES HERE ***/
upSources = new Array("svcsbtnup.png","partnerbtnup.png","newsbtnup.png","aboutusbtnup.png","careersbtnup.png","trainingbtnup.png");

overSources = new Array("svcsbtnover.png","partnersbtnover.png","newsbtnover.png","aboutusbtnover.png","careersbtnover.png","trainingbtnover.png");

// SUB MENUS DECLARATION, YOU DONT NEED TO EDIT THIS
subInfo = new Array();
subInfo[1] = new Array();
subInfo[2] = new Array();
subInfo[3] = new Array();
subInfo[4] = new Array();
subInfo[5] = new Array();
subInfo[6] = new Array();


//*** SET SUB MENUS TEXT LINKS AND TARGETS HERE ***//
subInfo[1][1] = new Array("Places to Live","placestolive.php","");
subInfo[1][2] = new Array("Things to Do","thingstodo.php","");
subInfo[1][3] = new Array("Other Services","othersvcs.php","");

subInfo[2][1] = new Array("Donors","donors.php","");
subInfo[2][2] = new Array("Volunteers","volunteers.php","");
subInfo[2][3] = new Array("Community Partners","communitypartners.php","");

subInfo[3][1] = new Array("Video Clips	","videoclips.php","");
subInfo[3][2] = new Array("Media Releases","mediareleases.php","");
subInfo[3][3] = new Array("Photo Albums","photoalbums.php","");

subInfo[4][1] = new Array("Leadership Team","leadership.php","");
subInfo[4][2] = new Array("History of ARCA","history.php","");
subInfo[4][3] = new Array("Links to Services","links.php","");
subInfo[4][4] = new Array("Contact Us","contactus.php","");
subInfo[4][5] = new Array("Awards Received", "awards.php",""); 

subInfo[5][1] = new Array("ARCA Jobs","jobs.php","");
subInfo[5][2] = new Array("Enhance my Career","careerenhance.php","");

subInfo[6][1] = new Array("Training Department","training.php","");
subInfo[6][2] = new Array("Classes","classes.php","");


//*** SET SUB MENU POSITION ( RELATIVE TO BUTTON ) ***//
var xSubOffset = 3;
var ySubOffset = 28;



//*** NO MORE SETTINGS BEYOND THIS POINT ***//
var overSub = false;
var delay = 1000;
totalButtons = upSources.length;

// GENERATE SUB MENUS
for ( x=0; x<totalButtons; x++) {
	// SET EMPTY DIV FOR BUTTONS WITHOUT SUBMENU
	if ( subInfo[x+1].length < 1 ) { 
		document.write('<div id="submenu' + (x+1) + '">');
	// SET DIV FOR BUTTONS WITH SUBMENU
	} else {
		document.write('<div id="submenu' + (x+1) + '" class="dropmenu" ');
		document.write('onMouseOver="overSub=true;');
		document.write('setOverImg(\'' + (x+1) + '\',\'\');"');
		document.write('onMouseOut="overSub=false;');
		document.write('setTimeout(\'hideSubMenu(\\\'submenu' + (x+1) + '\\\')\',delay);');
		document.write('setOutImg(\'' + (x+1) + '\',\'\');">');


		document.write('<ul>');
		for ( k=0; k<subInfo[x+1].length-1; k++ ) {
			document.write('<li>');
			document.write('<a href="../' + subInfo[x+1][k+1][1] + '" ');
			document.write('target="' + subInfo[x+1][k+1][2] + '">');
			document.write( subInfo[x+1][k+1][0] + '</a>');
			document.write('</li>');
		}
		document.write('</ul>');
	}
	document.write('</div>');
}





//*** MAIN BUTTONS FUNCTIONS ***//
// PRELOAD MAIN MENU BUTTON IMAGES
function preload() {
	for ( x=0; x<totalButtons; x++ ) {
		buttonUp = new Image();
		buttonUp.src = buttonFolder + upSources[x];
		buttonOver = new Image();
		buttonOver.src = buttonFolder + overSources[x];
	}
}

// SET MOUSEOVER BUTTON
function setOverImg(But, ID) {
	document.getElementById('button' + But + ID).src = buttonFolder + overSources[But-1];
}

// SET MOUSEOUT BUTTON
function setOutImg(But, ID) {
	document.getElementById('button' + But + ID).src = buttonFolder + upSources[But-1];
}



//*** SUB MENU FUNCTIONS ***//
// GET ELEMENT ID MULTI BROWSER
function getElement(id) {
	return document.getElementById ? document.getElementById(id) : document.all ? document.all(id) : null; 
}

// GET X COORDINATE
function getRealLeft(id) { 
	var el = getElement(id);
	if (el) { 
		xPos = el.offsetLeft;
		tempEl = el.offsetParent;
		while (tempEl != null) {
			xPos += tempEl.offsetLeft;
			tempEl = tempEl.offsetParent;
		} 
		return xPos;
	} 
} 

// GET Y COORDINATE
function getRealTop(id) {
	var el = getElement(id);
	if (el) { 
		yPos = el.offsetTop;
		tempEl = el.offsetParent;
		while (tempEl != null) {
			yPos += tempEl.offsetTop;
			tempEl = tempEl.offsetParent;
		}
		return yPos;
	}
}

// MOVE OBJECT TO COORDINATE
function moveObjectTo(objectID,x,y) {
	var el = getElement(objectID);
	el.style.left = x;
	el.style.top = y;
}

// MOVE SUBMENU TO CORRESPONDING BUTTON
function showSubMenu(subID, buttonID) {
	hideAllSubMenus();
	butX = getRealLeft(buttonID);
	butY = getRealTop(buttonID);
	moveObjectTo(subID,butX+xSubOffset, butY+ySubOffset);
}

// HIDE ALL SUB MENUS
function hideAllSubMenus() {
	for ( x=0; x<totalButtons; x++) {
		moveObjectTo("submenu" + (x+1) + "",-500, -500 );
	}
}

// HIDE ONE SUB MENU
function hideSubMenu(subID) {
	if ( overSub == false ) {
		moveObjectTo(subID,-500, -500);
	}
}



//preload();

SkyHog · Apr 21, 2009

Remember, I didn't write most of this code....

jesse · Apr 21, 2009

No idea Nick. I'd probably just scrap it and find a compatible example that uses something like jquery. Some things aren't worth fixing.

SkyHog · Apr 21, 2009

Meh, I'll probably just write it myself. Nevermind. I've spent too much time on this.

Areeda · Apr 21, 2009

Nick,

Have you tried http://validator.w3.org?

It has 9 errors on this page that are simple to deal with.

Its a fairly common problem for people to debug with IE then say it works.

Joe

PHP or Javascript or CSS Question

SkyHog

Touchdown! Greaser!

SkyHog

Touchdown! Greaser!

jesse

Touchdown! Greaser!

SkyHog

Touchdown! Greaser!

Areeda

Pattern Altitude