Urgent but not so urgent help... IE vs. FF.

[MoreBloodWine]

http://www.eojmarket.com/index.php



Ok, if you click the link to goto my site you will see a block on the left titled EoJ Information, well at the bottom of said block you will see a button named EOJ NEWSLETTER as seen in the pic. Now when you mouse over said buttion you should see the dropdown menu thats also pictured. Now this all works fine in IE but my FF users gave reported that the menu does not appear. Heres all the code used to achieve the menu etc... PLEASE help me figure out how to make it FF compatible, Ty.

Code (Button code for the EoJ Information block) Select Expand

<table border="0" cellpadding="0" cellspacing="0"><tr><td>    <a href="index.php?action=profile;u=7" onmouseover="setOverImg('1','');overSub=true;showSubMenu('submenu1','button1');" onmouseout="setOutImg('1','');overSub=false;setTimeout('hideSubMenu(\'submenu1\')',delay);" target=""><img src="buttons/button1up.gif" border="0" id="button1" vspace="0" hspace="0"></a></td></tr></table>

Code (Code that needs to be placed inside the Index.template.php file to make all the magic happen) Select Expand

<script src="menuscript.js" language="javascript" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="menustyle.css" media="screen, print" />


Code (Code from the called menuscript.js file thats in the forums root folder) Select Expand

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

/*** SET BUTTONS' FILENAMES HERE ***/
upSources = new Array("button1up.gif");

overSources = new Array("button1over.gif");

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


//*** SET SUB MENUS TEXT LINKS AND TARGETS HERE ***//
subInfo[1][1] = new Array("<font size=1>Issue One<br>Released ??/??/????</font>","http://www.eojmarket.com/index.php?page=8","");
subInfo[1][2] = new Array("<font size=1>Issue Two<br>Coming Soon !!!</font>","http://www.eojmarket.com/index.php","");


//**Issue one released: ??/??/2008 - Issue two released: 9/26/2008 - Issue three released: 12/17/2008**//

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



//*** NO MORE SETTINGS BEYOND THIS POINT ***//
var overSub = false;
var delay = 250;
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();

[karlbenson]

probably other javascript errors on the page.
In IE a single JS error breaks ALL the javascript for the page, while in FF it will continue with the other js.

It is possible that FF has got the same error, but is just logging it in the error console.

Either way, finding out the cause of the error and fixing it is the solution.

[MoreBloodWine]

probably other javascript errors on the page.
In IE a single JS error breaks ALL the javascript for the page, while in FF it will continue with the other js.

It is possible that FF has got the same error, but is just logging it in the error console.

Either way, finding out the cause of the error and fixing it is the solution.

Well there is no error, its just that when you mouse over the button in FF the dropdown menu as seen in the pic doesnt show up. It's also been pointed out to me that it doesnt work in Safari either however everything works fine in IE.

[Windy]

you aren't specifying your measurements for your styles.
eg. element.style.left = x + "px";

don't know if there are any more issues.

if you have ff, you should really get firebug so you can debug your javascript more easily.

[Tyrsson]

There is 35 xhtml warnings

A declaration being dropped in the css for the background-image

And apparently a undefined document in Javascript.

Get the web developer addon for firefox and you can validate in your browser

[MoreBloodWine]

Well, this isnt my code, it was soemthign I picked up for free off of yahoo and there is no help or support for it. Also, I wouldnt know where to beging to make this come close to working in FF / Safaari. So... if anyone here can help me get this to work in FF & Safari it would be greatly appreciated. All the code involved for the dropdown menu that shows up when you mouseover the image is posted above in the first post. How it should look when working like it does in IE can also be seen i nthe pic above... Ty.

Edit: I have noticed that the oen thing that does appear to work in the browsers is the mouseover effect of the button changing to yellow when you mouseover it. It's just the dropdown menu as seen in the pic above thats not working.

[MoreBloodWine]

bump...

[tampaba1]

Did you follow the already posted suggestions? All I get is the color change but nothing else.

[MoreBloodWine]

Did you follow the already posted suggestions? All I get is the color change but nothing else.

Not my code, no errors no nothing... I wouldnt know where to begin and there wasnt a whole lot suggested except for the try FF firebug comment.

[Windy]

Did you follow the already posted suggestions? All I get is the color change but nothing else.

Not my code, no errors no nothing... I wouldnt know where to begin and there wasnt a whole lot suggested except for the try FF firebug comment.

I don't know about you, but after following through with my suggestions, I had no issue getting the menu to come up.

[tampaba1]

Not my code, no errors no nothing... I wouldnt know where to begin and there wasnt a whole lot suggested except for the try FF firebug comment.

Just because it isn't your code doesn't mean you can't fix it. Try firebug, like windy suggested, it will help you solve the issue.

[MoreBloodWine]

you aren't specifying your measurements for your styles.
eg. element.style.left = x + "px";

don't know if there are any more issues.

if you have ff, you should really get firebug so you can debug your javascript more easily.

I understand the whole give a man a fish you feed him for a day, teach a man to fish and feed him for a lifetime thing guys but I dont understand FF firebug a whole lot let alone this. I'll be the first to admit ima dumb F.

[MoreBloodWine]

Ok, Ive been messing with this for the past few hrs now and I even played around with Firebug a bit but I just dont get it a whole lot. Ive tried everything I can think of to try and fix this and I even tried thinking of ideas using Windys suggestion but I just cant figure thid out. I know it not being my code doesnt mean much but it not being my code also means I dont fully understand it much. I'm not beyond begging LOL but can someone please just throw me a bone here and help me a bit more in getting this to work with FF, Safari etc like it does with IE ?

[MoreBloodWine]

Ok, I'm one dumb SOB but I still cannot figure this out... could you please share the exact solution you found that you said works Windy ;-)

[Windy]

Ok, I'm one dumb SOB but I still cannot figure this out... could you please share the exact solution you found that you said works Windy ;-)

Code (Find) Select Expand


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


Code (Replace) Select Expand


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


[MoreBloodWine]

Ok, I'm one dumb SOB but I still cannot figure this out... could you please share the exact solution you found that you said works Windy ;-)

Code (Find) Select Expand


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


Code (Replace) Select Expand


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


Windy, you F'ing rock man, with that easy fix of yours everything now works as intended with IE, FF, Netscape & Safari browsers ;-)