menu utilisant java script qui fonctionne mal avec Firefox

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !
Répondre
catfredy
Arias
Messages : 2
Inscription : 23 mars 2008, 20:32

menu utilisant java script qui fonctionne mal avec Firefox

Message par catfredy »

j'ai un menu utilisant java script qui fonctionne mal avec Firefox :?: .
Pourriez vous me donner un coup de main. Voici le code. D'avance Merci

<html>
<head>
<title>ASF - Entraide Humanitaire Catholique</title>
<script language="JavaScript">

var IsNet4,
IsIE4;

function deval( what ) { alert( what ); eval( what ); }

if ( navigator.appVersion.substring( 0, 1 ) >= 4 ) {

if ( navigator.appName == "Netscape" ) {

IsNet4 = true;
}
else if ( navigator.appName == "Microsoft Internet Explorer" ) {

IsIE4 = true;
}
}

function SetLayerVis( lay, vis ) {

if ( IsIE4 ) {

eval( "document.all." + lay + ".style.visibility = '" + vis + "';" );
}
else if ( IsNet4 ) {

eval( "document." + lay + ".visibility = '" + vis + "';" );
}
}

function SetLayerPos( lay, x, y ) {

if ( IsIE4 ) {

// eval( "document.all." + lay + ".style.pixelLeft = " + x + ";" );
// eval( "document.all." + lay + ".style.pixelTop = " + y + ";" );
eval( lay + ".style.pixelLeft = " + x + ";" );
eval( lay + ".style.pixelTop = " + y + ";" );
}
else if ( IsNet4 ) {

eval( "document." + lay + ".left = " + x + ";" );
eval( "document." + lay + ".top = " + y + ";" );
}
}

function WinEntries() {

this.link = new Array();
this.menu = new Array();
this.label = new Array();
this.div = new Array();
this.ypos = new Array();
this.vis = new Array();
}

function WinMenu( name ) {

this.name = name;
this.open = false;
this.entries = new WinEntries();
this.xpos = 0;
this.level = 0;
}

var SI = 0;
function SetIndents( menu ) {

SI++;
for ( var i = 0; i < menu.entries.menu.length; i++ ) {

if ( menu.entries.menu[ i ] ) {

menu.entries.menu[ i ].level = SI;
menu.entries.menu[ i ].xpos = menu.entries.menu[ i ].level * INDENT_SIZE;
SetIndents( menu.entries.menu[ i ] );
}
}
SI--;
}

// AddWinEntry
function AWE( winmenu, link, label, menu ) {

if ( menu ) {

winmenu.entries.menu[ winmenu.entries.menu.length ] = menu;
}
else
winmenu.entries.menu[ winmenu.entries.menu.length ] = null;

winmenu.entries.link[ winmenu.entries.link.length ] = link;
winmenu.entries.label[ winmenu.entries.label.length ] = label;

winmenu.entries.div[ winmenu.entries.div.length ] = winmenu.name
+ winmenu.entries.div.length.toString();
}

function SwitchMenu( menu ) {

menu.open = !menu.open;
if ( !menu.open )
Hide( menu );
}

function Hide( menu ) {

for ( var i = 0; i < menu.entries.link.length; i++ ) {

SetLayerVis( menu.entries.div[ i ], 'hidden' );
if ( menu.entries.menu[ i ] )
Hide( menu.entries.menu[ i ] );
}
}

var ENTRY_HEIGHT = 22,
INDENT_SIZE = 8,
OFFSETY = 90,
TOFFSETX = 1,
TOFFSETY = 0,
indownt = -ENTRY_HEIGHT;

function Reposition( menu ) {

for ( var i = 0; i < menu.entries.link.length; i++ ) {

indownt += ENTRY_HEIGHT;

SetLayerPos( menu.entries.div[ i ], menu.xpos + TOFFSETX, indownt + TOFFSETY + OFFSETY );
SetLayerVis( menu.entries.div[ i ], 'visible' );

if ( menu.level == 0 ) {

SetLayerPos( "B" + menu.entries.div[ i ], menu.xpos, indownt + OFFSETY );
SetLayerVis( "B" + menu.entries.div[ i ], 'visible' );
}

if ( menu.entries.menu[ i ] ) {

if ( menu.entries.menu[ i ].open )
Reposition( menu.entries.menu[ i ] );
}
}
}

var Bullet = new Image(),
BulEmpt = new Image(),
BulUp = new Image(),
BulDown = new Image();

Bullet.src = "bullet.gif";
BulEmpt.src = "bulempt.gif";
BulUp.src = "bulup.gif";
BulDown.src = "buldown.gif";

function BulletOver( lay, ismen ) {

if ( IsNet4 ) {

if ( ismen ) {

if ( ismen.open )
eval( "document." + lay + ".document.images[ 0 ].src = BulUp.src;" );
else
eval( "document." + lay + ".document.images[ 0 ].src = BulDown.src;" );
}
else
eval( "document." + lay + ".document.images[ 0 ].src = Bullet.src;" );
}
else {

if ( ismen ) {

if ( ismen.open )
eval( "document.images[ 'Bul" + lay + "' ].src = BulUp.src;" );
else
eval( "document.images[ 'Bul" + lay + "' ].src = BulDown.src;" );
}
else
eval( "document.images[ 'Bul" + lay + "' ].src = Bullet.src;" );
}
}

function BulletOut( lay ) {

if ( IsNet4 )
eval( "document." + lay + ".document.images[ 0 ].src = BulEmpt.src;" );
else
eval( "document.images[ 'Bul" + lay + "' ].src = BulEmpt.src;" );
}

var indent = 0,
BulIm = 0;

function WriteMenu( menu, menutop ) {

var thelink;

indent++;

if ( indent == 1 ) {

document.writeln( "<style type='text/css'>" );
for ( var i = 0; i < menu.entries.div.length; i++ ) {

document.writeln( "#B" + menu.entries.div[ i ]
+ " { position: absolute; visibility: visible; left: 0px; top: "
+ ( (i * ENTRY_HEIGHT) + OFFSETY ).toString() + "px; z-index: 1; } \n" );
document.writeln( "#" + menu.entries.div[ i ]
+ " { position: absolute; visibility: visible; left: " + TOFFSETX.toString() + "px; top: "
+ ( (i * ENTRY_HEIGHT) + OFFSETY + TOFFSETY ).toString() + "px; z-index: 2; font-family: Arial, sans-serif; font-size: 12px; } \n" );
}
document.writeln( "--></style>" );
}

for ( var i = 0; i < menu.entries.link.length; i++ ) {

var indspc = '',
oncl = '',
onb = '',
onbe = '',
tclass = '', bulimy = '',
bimg;

if ( menu.entries.link[ i ] )
thelink = menu.entries.link[ i ];
else
thelink = 'JavaScript:;';

oncl = "BulletOut( " + '"' + menu.entries.div[ i ] + '"' + " ); ";
if ( menu.entries.menu[ i ] ) {

oncl += " SwitchMenu( " + menu.entries.menu[ i ].name + " ); "
+ "indownt = -ENTRY_HEIGHT; Reposition( " + menutop.name + " );'";
bulimy = ", " + menu.entries.menu[ i ].name;
}
onb = "<b>";
onbe = "</b>";

if ( indent > 1 ) bimg = "menu_grey2.jpg";
else bimg = "button1.gif";

if ( menu.level == 0 ) {

onb += "<font color=#00000>"; onbe += "</font>";
document.writeln( "<div id='B" + menu.entries.div[ i ]
+ "'><a href='" + thelink + "' onClick='"
+ oncl + "' onMouseOver='BulletOver( "
+ '"' + menu.entries.div[ i ] + '"' + bulimy + " )' "
+ "onMouseOut='BulletOut( "
+ '"' + menu.entries.div[ i ] + '"' + " )'>"
+ "<img src='" + bimg + "' border=0></a></div>" );
tclass = '';
}
else tclass = "class='Abso' ";

document.writeln( "<div " + tclass + "id='" + menu.entries.div[ i ]
+ "'><nobr><img src='bulempt.gif' name='Bul" + menu.entries.div[ i ] + "'> <a href='" + thelink + "' onClick='"
+ oncl + "' onMouseOver='BulletOver( "
+ '"' + menu.entries.div[ i ] + '"' + bulimy + " )'"
+ " onMouseOut='BulletOut( "
+ '"' + menu.entries.div[ i ] + '"' + " )'>" + onb
+ menu.entries.label[ i ] + onbe + "</a></nobr></div>" );

BulIm++;
if ( menu.entries.menu[ i ] )
WriteMenu( menu.entries.menu[ i ], menutop );
}
indent--;
}

/**
* resize.js 0.3 970811
* by gary smith
* js component for "reloading page onResize"
*/


</script>
<base target="principal">
<style type="text/css">
<!--
.Back {

position: absolute;
visibility: hidden;
z-index: 1;
}
.Abso {

position: absolute;
visibility: hidden;
font-family: Arial, sans-serif;
font-size: 12px;
z-index: 2;
}
A { text-decoration: none; }
-->
</style>
<style type="text/css">
<!--
BODY {
SCROLLBAR-FACE-COLOR: #339966;
SCROLLBAR-HIGHLIGHT-COLOR: #77DDAA; //arriere-plan
SCROLLBAR-SHADOW-COLOR: #339966;
SCROLLBAR-3DLIGHT-COLOR: #333333;
SCROLLBAR-ARROW-COLOR: #FFFFFF; //couleur des fleche
SCROLLBAR-TRACK-COLOR: #339966;
SCROLLBAR-DARKSHADOW-COLOR: #FFFFFF
}-->
</style>
</head>

<body bgcolor="#FFFFFF" link="#336633" vlink="#336633" alink="#339966" background="../images/fond.jpg">
<div align="left"></div>
<div align="left">
<p align="left">&nbsp;&nbsp;<a href="../inxdex.htm"><img src="../images/asfPt.gif" width="100" height="80" border="0"></a>
<script>

var M0 = new WinMenu( 'M0' );
M0.open = true;

//-1------------------------------------------------
//var histoire = new WinMenu( 'histoire' );
AWE( M0,'../histoire/h1.htm', 'Histoire');

//2------------------------------
//var who = new WinMenu( 'who' );
AWE( M0,'../histoire/qui.htm', 'Who&#146;s Who');

//-3-------------------------------------------------------------------------
var activite = new WinMenu( 'activite' );
var forma = new WinMenu ('forma')
var vil = new WinMenu ('vil')
var sante = new WinMenu ('sante')
AWE( activite, '../actions/a1.htm', 'Enfance en d&eacute;tresse', forma );
AWE( forma,'../actions/so.htm', 'So Tchan Hou&eacute;');
AWE( forma,'../actions/sj.htm', 'Soeur Jeannine');
AWE( activite, '../actions/a2.htm', 'Education / formation', vil);
AWE( vil,'../actions/materiel.htm', 'Materiel scolaire');
AWE( vil,'../actions/menuiserie.htm', 'Menuiserie');
AWE( vil,'../actions/Adamavo.htm', 'Tricycles');
AWE( activite, '../actions/a3.htm', 'Sant&eacute;',sante );
AWE( sante,'../actions/lunettes.htm', 'Lunettes');
AWE( sante,'../actions/dispensaire.htm', 'Dispensaire');
AWE( sante,'../actions/ghana.htm', 'Ghana');
AWE( activite, '../actions/iv.htm', 'Inventaire');
AWE( M0,'../actions/a.htm', 'Les activit&eacute;s', activite );

//-4-----------------------------------------
//var agenda = new WinMenu( 'agenda' );
AWE( M0, '../agenda/agenda.htm', 'Actualit&eacute;s');

//-5-revue--------------------------------------------
var revue = new WinMenu( 'revue' );
var article = new WinMenu( 'article' );
AWE( revue, '../revue/a1.htm', 'Article(s)',article );
AWE( revue, '../revue/realisations.htm', 'Nos actions' );
AWE( revue, '../revue/prie.htm', 'Pri&egrave;re' );
AWE( revue, '../form/form.htm', 'Formulaire' );
AWE( revue, '../revue/Archives.htm', 'Archives' );
AWE( M0, '../revue/Archives.htm', 'Notre revue', revue );

//var 2euros = new WinMenu( 2'euros' );
AWE( M0, '../tract-okazoutil/tract-okazoutil.html', 'tract-okazoutil');

//var parte = new WinMenu( 'parte' );
AWE( M0,'../partenaires/p1.htm', 'Nos partenaires');

//var liens = new WinMenu( 'liens' );
AWE( M0, '../liens/liens.htm', 'Les liens');

//var rens = new WinMenu( 'rens' );
AWE( M0, '../rens/rens.htm', 'Renseignements' );

AWE( M0, 'mailto:asf.asso.humanitaire@club-internet.fr', 'Ecrivez nous' );

var mail = new WinMenu( 'mail' );
AWE( mail, '../mailing/mail.htm', 'Mailing List' );

//var cad = new WinMenu( 'cad' );
AWE( M0, '../cadeau/cadeau.htm', 'id&eacute;e de cadeau' );

//var bourse = new WinMenu( 'bourse' );
AWE( M0, '../bourse/index.html', 'Bourse d&#146;&eacute;change');

SetIndents( M0 );
WriteMenu( M0, M0 );


</script>
<script>
Reposition( M0 );
</script>
</p>
</div>
<noscript><BR>
Tu as besoin d'activer<BR>
JavaScript pour acceder au menu</noscript>
<p>&nbsp;</p>
</body>
</html>

Message envoyé avec : Mozilla/5.0 (Windows; U; Win98; fr; rv:1.8.1.12) Gecko/20080201 Firefox/2.0.0.12
Salutations

Monsieur Fred
Haut
teoli2003
Animal mythique
Messages : 7580
Inscription : 13 nov. 2005, 09:23

Message par teoli2003 »

1) C'est un script qui teste le navigateur et non pas les fonctionnalités.
2) Qu'est-ce qui ne fonctionne pas?
3) Le code CSS que le JS met est incorrect (utilisation des majuscules par exemple). A corriger.

En général, on n'utilise plus de JS pour les menus depuis 1998...

Message envoyé avec : Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; fr-FR; rv:1.9b5pre) Gecko/2008032304 Minefield/3.0b5pre
La liberté n'est jamais accordée de bon gré par l'oppresseur; elle doit être exigée par l'opprimé (Martin Luther King).
Les convictions sont des ennemis de la vérité plus dangereux que les mensonges. (Nietzsche).
Native Mozillian.
Haut
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Re: menu utilisant java script qui fonctionne mal avec Firef

Message par calimo »

  1. Mets ton code dans des balises

    Code : Tout sélectionner

    [*]En général, il y a pas besoin de mettre tout le code mais uniquement ce qui ne va pas.[/list]

[quote="catfredy"]var IsNet4,
    IsIE4;[/quote]Pas étonnant que ça ne fonctionne pas avec autre chose qu'Internet Explorer 4 ou Netscape 4 :roll: 
Comme l'a dit teoli2003, on teste les fonctionnalités d'un navigateur, pas son nom. Tout script qui testerait le nom d'un navigateur est à bannir.


[quote="catfredy"]<noscript><BR>
Tu as besoin d'activer<BR>
JavaScript pour acceder au menu</noscript>[/quote]Tout le monde ne peut pas forcément avoir accès au javascript, donc cette solution (demander au visiteur d'activer javascript) n'est pas acceptable.
Voir http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal pour une solution qui me semble "bonne", même si elle n'est peut-être pas parfaite, tant du point de vue de la simplicité que de l'accessibilité (encore que ce soit douteux, voir par exemple http://www.veblog.com/fr/2001/0203-pm-gouv-fr.html et http://css.alsacreations.com/Accessibilite-du-Web/accessibilite-des-menus-de-navigation-en-cascade)

[size=75]Message envoyé avec : [color=olive]Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.12) Gecko/20080207 Firegecko/7.10 Firefox/2.0.0.12[/color][/size]
Haut
catfredy
Arias
Messages : 2
Inscription : 23 mars 2008, 20:32

menu utilisant java script qui fonctionne mal avec Firefox

Message par catfredy »

D'abord un grand Merci pour votre aide :) .

Nous allons certainement refaire notre site autrement dans le futur, pour le moment, j'ai juste un souci avec les sous menus du menu : "les activités" et les sous menus du menu : "Notre revue" qui ne déroule pas dans Firefox, je ne souhaite pas tout refaire.

Je ne connais pas le javascript, j'apprends sur le tas, puis je supprimer les lignes ci-dessous :

var IsNet4,
IsIE4;

function deval( what ) { alert( what ); eval( what ); }

if ( navigator.appVersion.substring( 0, 1 ) >= 4 ) {

if ( navigator.appName == "Netscape" ) {

IsNet4 = true;
}
else if ( navigator.appName == "Microsoft Internet Explorer" ) {

IsIE4 = true;
}
}

----------------------------------
Voici l'adresse du site.
http://www.asf-asso.fr/
-----------------------------------


les Menus me posant problème :
//-3-------------------------------------------------------------------------
var activite = new WinMenu( 'activite' );
var forma = new WinMenu ('forma')
var vil = new WinMenu ('vil')
var sante = new WinMenu ('sante')
AWE( activite, '../actions/a1.htm', 'Enfance en d&eacute;tresse', forma );
AWE( forma,'../actions/so.htm', 'So Tchan Hou&eacute;');
AWE( forma,'../actions/sj.htm', 'Soeur Jeannine');
AWE( activite, '../actions/a2.htm', 'Education / formation', vil);
AWE( vil,'../actions/materiel.htm', 'Materiel scolaire');
AWE( vil,'../actions/menuiserie.htm', 'Menuiserie');
AWE( vil,'../actions/Adamavo.htm', 'Tricycles');
AWE( activite, '../actions/a3.htm', 'Sant&eacute;',sante );
AWE( sante,'../actions/lunettes.htm', 'Lunettes');
AWE( sante,'../actions/dispensaire.htm', 'Dispensaire');
AWE( sante,'../actions/ghana.htm', 'Ghana');
AWE( activite, '../actions/iv.htm', 'Inventaire');
AWE( M0,'../actions/a.htm', 'Les activit&eacute;s', activite );

//-5-revue--------------------------------------------
var revue = new WinMenu( 'revue' );
var article = new WinMenu( 'article' );
AWE( revue, '../revue/a1.htm', 'Article(s)',article );
AWE( revue, '../revue/realisations.htm', 'Nos actions' );
AWE( revue, '../revue/prie.htm', 'Pri&egrave;re' );
AWE( revue, '../form/form.htm', 'Formulaire' );
AWE( revue, '../revue/Archives.htm', 'Archives' );
AWE( M0, '../revue/Archives.htm', 'Notre revue', revue );


Message envoyé avec : Mozilla/5.0 (Windows; U; Win98; fr; rv:1.8.1.12) Gecko/20080201 Firefox/2.0.0.12
Salutations

Monsieur Fred
Haut
jpbardiau
Tyrannosaurus Rex
Messages : 2709
Inscription : 05 avr. 2004, 17:34

Message par jpbardiau »

Tes codes entre balises

Code : Tout sélectionner

 ,comme l'a dit calimo.

[size=75]Message envoyé avec : [color=olive]Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9b4) Gecko/2008030318 Firefox/3.0b4[/color][/size]
JP
Image
Image
Haut
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Re: menu utilisant java script qui fonctionne mal avec Firef

Message par calimo »

catfredy a écrit :var IsNet4,
IsIE4;

function deval( what ) { alert( what ); eval( what ); }

if ( navigator.appVersion.substring( 0, 1 ) >= 4 ) {

if ( navigator.appName == "Netscape" ) {

IsNet4 = true;
}
else if ( navigator.appName == "Microsoft Internet Explorer" ) {

IsIE4 = true;
}
}
Le problème c'est que tout le reste du script semble basé sur cette détection, donc tu peux le supprimer, mais je doute que ça améliore quoi que ce soit :wink:

Assure-toi juste que tout soit accessible sans qu'il y ait besoin de dérouler les menus :wink: (visiblement c'est le cas, si je clique sur "notre revue", j'ai accès à une page avec des liens...)
Haut
Répondre

Revenir à « Développement web »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 3 invités