http://www.eojmarket.com/index.php
(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fwww.eojmarket.com%2FNonForumStuff%2Fimages%2Fnewslettermenu.jpg&hash=ea97a9cc29c5cda0f3608bded9452da7f9b92e1d)
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.
<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>
<script src="menuscript.js" language="javascript" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="menustyle.css" media="screen, print" />
/*** 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();
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.
Quote from: regularexpression on January 06, 2009, 04:43:37 PM
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.
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.
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 :)
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.
bump...
Did you follow the already posted suggestions? All I get is the color change but nothing else.
Quote from: tampaba1 on January 09, 2009, 10:46:34 PM
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.
Quote from: MoreBloodWine on January 10, 2009, 12:43:13 AM
Quote from: tampaba1 on January 09, 2009, 10:46:34 PM
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.
Quote from: MoreBloodWine on January 10, 2009, 12:43:13 AM
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.
Quote from: Windy on January 07, 2009, 03:46:37 AM
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.
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 ?
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 ;-)
Quote from: MoreBloodWine on January 14, 2009, 11:29:05 PM
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 ;-)
// MOVE OBJECT TO COORDINATE
function moveObjectTo(objectID,x,y) {
var el = getElement(objectID);
el.style.left = x;
el.style.top = y;
}
// MOVE OBJECT TO COORDINATE
function moveObjectTo(objectID,x,y) {
var el = getElement(objectID);
el.style.left = x + "px";
el.style.top = y + "px";
}
Quote from: Windy on January 15, 2009, 08:27:16 AM
Quote from: MoreBloodWine on January 14, 2009, 11:29:05 PM
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 ;-)
// MOVE OBJECT TO COORDINATE
function moveObjectTo(objectID,x,y) {
var el = getElement(objectID);
el.style.left = x;
el.style.top = y;
}
// 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 ;-)