Tout d'abord, bravo pour votre site de qualité. C'est toujours un plaisir de parcourir les pages.
Je suis relativement novice dans la programmation html, et j'ai un soucis de compatibilité entre ie et ff.
Sur mon site (http://arc76.fr/), j'utilise un menu déroulant vertical fourni par un site "spécialié"
Il fonctionne très bien sous ie, mais ne se déroule pas sous ff.
Auriez-vous une piste pour m'aider à résoudre ce problème ?
voici mon code dans mon fichier menuscript.js :
---------------------------------------------------
/*** SET BUTTON'S FOLDER HERE ***/
var buttonFolder = "buttons/";
/*** SET BUTTONS' FILENAMES HERE ***/
upSources = new Array("button1up.png","button2up.png","button3up.png","button4up.png","button5up.png","button6up.png","button7up.png");
overSources = new Array("button1over.png","button2over.png","button3over.png","button4over.png","button5over.png","button6over.png","button7over.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();
subInfo[7] = new Array();
//*** SET SUB MENUS TEXT LINKS AND TARGETS HERE ***//
subInfo[2][1] = new Array("Présentation","cd-presentation.htm","");
subInfo[2][2] = new Array("Composition","cd-membres.htm","");
subInfo[2][3] = new Array("Commissions","cd-commissions.htm","");
subInfo[3][1] = new Array("La F.F.T.A.","info-ffta.htm","");
subInfo[3][2] = new Array("Les infos du CD","info-news_cd.htm","");
subInfo[3][3] = new Array("Les Forums","info-forums.htm","");
subInfo[3][4] = new Array("Liens utiles","info-liens.htm","");
subInfo[4][1] = new Array("Les clubs","pratiquer-clubs.htm","");
subInfo[4][2] = new Array("Les stages","pratiquer-stages.htm","");
subInfo[4][3] = new Array("Les catégories","pratiquer-ages.htm","");
subInfo[5][1] = new Array("Championnat Départemental Salle","compet-championnats.htm","");
subInfo[5][2] = new Array("Championnat de Ligue par Equipes ","class-ch-ligue-inter-dept.htm","");
subInfo[5][3] = new Array("Règlement du Challenge du Département","trophee-reglement.htm","");
subInfo[5][4] = new Array("Classement du Challenge du Département","trophee-classement.htm","");
subInfo[6][1] = new Array("Salle","cal_salle.htm","");
subInfo[6][2] = new Array("Extérieur","cal_exterieur.htm","");
subInfo[6][3] = new Array("Parcours","cal_parcours.htm","");
subInfo[6][4] = new Array("Arbitrage","cal_arbitrage.htm","");
subInfo[7][1] = new Array("3 D","records-3d.htm","");
subInfo[7][2] = new Array("Fita","records-fita.htm","");
subInfo[7][3] = new Array("Salle","records-salle.htm","");
subInfo[7][4] = new Array("Nature","records-nature.htm","");
subInfo[7][5] = new Array("Fédéral","records-federal.htm","");
subInfo[7][6] = new Array("Beursault","records-beursault.htm","");
subInfo[7][7] = new Array("Campagne","records-campagne.htm","");
//*** SET SUB MENU POSITION ( RELATIVE TO BUTTON ) ***//
var xSubOffset = 0;
var ySubOffset = 22;
//*** NO MORE SETTINGS BEYOND THIS POINT ***//
var overSub = false;
var delay = 200;
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('
');
// SET DIV FOR BUTTONS WITH SUBMENU
} else {
document.write('
\\\'submenu' + (x+1) + '\\\')\',delay);');
document.write('setOutImg(\'' + (x+1) + '\',\'\');">');
//*** 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);
}
}
dans la console d'erreur, il semble qu'il y ait un pb avec les positionnements left et top :
Avertissement : Erreur d'analyse de la valeur pour la propriété « top ». Déclaration abandonnée.
Fichier source : http://arc76.fr/accueil.htm Ligne : 0
Avertissement : Erreur d'analyse de la valeur pour la propriété « left ». Déclaration abandonnée.
Fichier source : http://arc76.fr/accueil.htm Ligne : 0
je n'ai pas été plus loin ( avec FF ) que ces erreurs ( une foultitude ! )
et... peut-être d'autres ? je n'ai pas vérifié !
mais ça veut dire que ce qui est mis en top et left n'est pas conforme
à ce qu'attend FireFox ( et d'autres ! ) , soit en dur dans le css, soit
en ajout avec javascript
si ça, c'est résolu, je ne "garantis" ;o) pas que ça fonctionnera !
ni même que c'est ça qui fait "planter".
mais avant de faire quoi qe ce soit, il ne faudrait plus d'erreurs.
je ne tiens pas décortiquer le menu que tu utilises... il est bien trop lourd.
Bonjour,
attendu que les unités pour les attributs
left, top etc... peuvent être des pt, mm, cm, em...ou px il est nécéssaire de
préciser l'unité que tu souhaites.
IExplorerIE par défaut semble affecter des px et FireFox ne
sachant pas ne fait pas...
donc
// MOVE OBJECT TO COORDINATE
function moveObjectTo(objectID,x,y) {
var el =
getElement(objectID);
el.style.left = x +"px" ;
el.style.top = y +"px";
}
;O)
