integration sous IE et sous Mozilla

**E.Bzz** · 27/09/2007, 12h11

OK.
Mais ça va masquer l'image (logo.jpg) ?
Faut tout décaler alors ...

A+

**E.Bzz** · 27/09/2007, 12h15

Menu caler sous Firefox 2 avec :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
Color0M = '#FC7613' //Couleur du texte orange
Color1M = '#577b8b' //Couleur Arrière gris foncé
Color2M = '#CCCCCC' //Couleur Arrière Surbrillance  gris clair
Color3M = '#CCCCCC'; //Couleur Bordure gris clair
PosY = 0; //Distance entre le haut de l'écran et le menu
PosX = 0; //Distance entre la gauche de l'écran et le menu

LargeurM = 90; //Largeur
HauteurM = 30 //Hauteur
AlignM = 'center' //'center','right','left'
FontM = 'Arial' //Police
SizeM = 12 //Taille de la Police
WeightM = 'bold' //Epaisseur de la Police
CursorM = 'default' //Curseur-> default,hand...

menu = new Array
i=0
//--------[Texte/Html]------------------[ Adresse ]--------------------------
menu[i++]='News' ;menu[i++]='#'
menu[i++]='About Us' ;menu[i++]='#'
menu[i++]='Solutions' ;menu[i++]='#'
menu[i++]='Products' ;menu[i++]='#'
menu[i++]='Partners' ;menu[i++]='#'
menu[i++]='Resellers' ;menu[i++]='#'
menu[i++]='Contact' ;menu[i++]='#'

//************ Sous-Menus ************
Color0S = '#000000' //Couleur du texte
Color1S = '#CCCCCC' //Couleur Arrière
Color2S = '#999999' //Couleur Arrière Surbrillance
Color3S = '#CCCCCC' //Couleur Bordure
EnLigne = 0 //1:pour ranger sur une seule ligne 0:en colonne
LargeurS = 90 //Largeur
HauteurS = 20 //Hauteur
AlignS = 'center' //'center','right','left'
FontS = 'Arial' //Police
SizeS = 10 //Taille de la Police
WeightS = 'bold' //Epaisseur de la Police
FonduS = 1 //1:Fondu, 0:aucun
CursorS = 'default' //Curseur-> default,hand...

k=-1; zlien=new Array

i=0; zlien[++k]=new Array
//------------[Texte/Html]------------------[ Adresse ]-------------------------------
i=0; zlien[++k]=new Array
i=0; zlien[++k]=new Array
zlien[k][i++]='Test';zlien[k][i++]=''
zlien[k][i++]='Test';zlien[k][i++]=''
zlien[k][i++]='Test';zlien[k][i++]=''
zlien[k][i++]='Test';zlien[k][i++]=''
i=0; zlien[++k]=new Array
zlien[k][i++]='Test' ;zlien[k][i++]=''
zlien[k][i++]='Test' ;zlien[k][i++]=''
zlien[k][i++]='Test' ;zlien[k][i++]=''
i=0; zlien[++k]=new Array
i=0; zlien[++k]=new Array
i=0; zlien[++k]=new Array
//************ Fin des paramètres, Début du programme ************//


//************ Parametre pour les differents navigateurs ************//

Nom = navigator.appName;


ie = (Nom == 'Microsoft Internet Explorer')


if (ie) {
 PosY= 0; //Distance entre le haut de l'écran et le menu


}
else
{
	PosY=19; //Distance entre le haut de l'écran et le menu
	PosX=48; //Distance entre le haut de l'écran et le menu

}

//************ Configuration du menu************

document.write('<style>')
document.write('.ejmenu {background:'+Color1M+';text-align:'+AlignM+';font:'+WeightM+' '+SizeM+' '+FontM+';color:'+Color0M+';cursor:'+CursorM+'}')
document.write('.ejsmenu {background:'+Color1S+';text-align:'+AlignS+';font:'+WeightS+' '+SizeS+' '+FontS+';color:'+Color0S+';cursor:'+CursorS+'}')
document.write('</style>')

function fadeIn(obj)
{ obj.style.filter="blendTrans(duration=1)"
  if(obj.filters.blendTrans.status!=1)
  { obj.filters.blendTrans.Apply()
    obj.style.visibility="visible"
    obj.filters.blendTrans.Play()
  }
}

document.onclick = function() { skn.visibility='hidden' }
document.onmousemove = function() { dgt.top=document.body.scrollTop+PosY; dgt.visibility='visible' }
window.onscroll = function() { dgt.visibility=skn.visibility='hidden' }

function pop(msg,pos,posY)
{ skn.visibility="hidden";
  skn.top= HauteurM+PosY+"px";
// skn.top= HauteurM-10+"px";
  if(!msg.length) return
  if(EnLigne)
  { content="<TABLE style='border-collapse:collapse;'WIDTH="+LargeurM*menu.length/2+" bordercolor="+Color3S+" BORDER=1><TR>"
    for(pass=0;pass<msg.length;pass+=2) content+="<TD onMouseDown='location.href=\""+msg[pass+1]+"\"' onMouseOver=\"this.style.background='"+Color2S+"'\" onMouseOut=\"this.style.background='"+Color1S+"'\" HEIGHT="+HauteurS+" CLASS=ejsmenu>"+msg[pass]+"</TD>"
  } else
  { skn.left=pos+PosX-1+"px";
    content="<TABLE style='border-collapse:collapse;'WIDTH="+LargeurS+" bordercolor="+Color3S+" BORDER=1>"
    for(pass=0;pass<msg.length;pass+=2) content+="<TR><TD WIDTH="+LargeurS+" onMouseDown='location.href=\""+msg[pass+1]+"\"' onMouseOver=\"this.style.background='"+Color2S+"'\" onMouseOut=\"this.style.background='"+Color1S+"'\" HEIGHT="+HauteurS+" CLASS=ejsmenu>"+msg[pass]+"</TD></TR>"
  }
  document.getElementById("topdeck").innerHTML=content+"</TR></TABLE>"
  if(document.all && FonduS) fadeIn(topdeck); else skn.visibility="visible";
}
 //document.write('<DIV style="position:relative"><DIV style="POSITION:absolute;VISIBILITY:hidden;z-index:15" id=topdeck></DIV><TABLE ID=topmenu style="position:absolute;border-collapse:collapse;" bordercolor='+Color3M+' BORDER=1 WIDTH='+LargeurM*menu.length/2 +' HEIGHT='+HauteurM+'><tr>')

document.write('<DIV style="position:relative"><DIV style="POSITION:absolute;VISIBILITY:hidden;z-index:15" id=topdeck></DIV><TABLE ID=topmenu style="position:absolute;border-collapse:collapse;" bordercolor='+Color3M+' BORDER=1 WIDTH='+LargeurM*menu.length/2 +' HEIGHT='+HauteurM+'><tr>')
skn=document.getElementById('topdeck').style
dgt=document.getElementById('topmenu').style
for(pass=0;pass<menu.length/2;pass++) document.write("<TD WIDTH="+LargeurM+" onMouseDown='location.href=\""+menu[pass*2+1]+"\"' onMouseOver='this.style.background=\""+Color2M+"\";pop(zlien["+pass+"],this.offsetLeft)' onMouseOut='this.style.background=\""+Color1M+"\"' CLASS=ejmenu>"+menu[pass*2]+"</TD>")
document.write('</TR></TABLE></DIV>')
dgt.top=document.body.scrollTop+PosY+"px";
dgt.left=document.body.scrollLeft+PosX+"px";

Remarques :
il ne faut ajouter le "px" qu'au moment de l'affectation de la valeur à la propriété CSS, et non au moment de la définition de la valeur (ex : PosY=19; et non PosY=19+"px"; )
Il faut retirer le "top:-10px;" ajouté précédemment dans le document.write() (inutile)
Il faudra décaler ton logo.
... et adapter tout ça à IE7

A+

**silverfab34** · 27/09/2007, 12h33

Envoyé par E.Bzz

Menu caler sous Firefox 2 avec :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
Color0M = '#FC7613' //Couleur du texte orange
Color1M = '#577b8b' //Couleur Arrière gris foncé
Color2M = '#CCCCCC' //Couleur Arrière Surbrillance  gris clair
Color3M = '#CCCCCC'; //Couleur Bordure gris clair
PosY = 0; //Distance entre le haut de l'écran et le menu
PosX = 0; //Distance entre la gauche de l'écran et le menu

LargeurM = 90; //Largeur
HauteurM = 30 //Hauteur
AlignM = 'center' //'center','right','left'
FontM = 'Arial' //Police
SizeM = 12 //Taille de la Police
WeightM = 'bold' //Epaisseur de la Police
CursorM = 'default' //Curseur-> default,hand...

menu = new Array
i=0
//--------[Texte/Html]------------------[ Adresse ]--------------------------
menu[i++]='News' ;menu[i++]='#'
menu[i++]='About Us' ;menu[i++]='#'
menu[i++]='Solutions' ;menu[i++]='#'
menu[i++]='Products' ;menu[i++]='#'
menu[i++]='Partners' ;menu[i++]='#'
menu[i++]='Resellers' ;menu[i++]='#'
menu[i++]='Contact' ;menu[i++]='#'

//************ Sous-Menus ************
Color0S = '#000000' //Couleur du texte
Color1S = '#CCCCCC' //Couleur Arrière
Color2S = '#999999' //Couleur Arrière Surbrillance
Color3S = '#CCCCCC' //Couleur Bordure
EnLigne = 0 //1:pour ranger sur une seule ligne 0:en colonne
LargeurS = 90 //Largeur
HauteurS = 20 //Hauteur
AlignS = 'center' //'center','right','left'
FontS = 'Arial' //Police
SizeS = 10 //Taille de la Police
WeightS = 'bold' //Epaisseur de la Police
FonduS = 1 //1:Fondu, 0:aucun
CursorS = 'default' //Curseur-> default,hand...

k=-1; zlien=new Array

i=0; zlien[++k]=new Array
//------------[Texte/Html]------------------[ Adresse ]-------------------------------
i=0; zlien[++k]=new Array
i=0; zlien[++k]=new Array
zlien[k][i++]='Test';zlien[k][i++]=''
zlien[k][i++]='Test';zlien[k][i++]=''
zlien[k][i++]='Test';zlien[k][i++]=''
zlien[k][i++]='Test';zlien[k][i++]=''
i=0; zlien[++k]=new Array
zlien[k][i++]='Test' ;zlien[k][i++]=''
zlien[k][i++]='Test' ;zlien[k][i++]=''
zlien[k][i++]='Test' ;zlien[k][i++]=''
i=0; zlien[++k]=new Array
i=0; zlien[++k]=new Array
i=0; zlien[++k]=new Array
//************ Fin des paramètres, Début du programme ************//


//************ Parametre pour les differents navigateurs ************//

Nom = navigator.appName;


ie = (Nom == 'Microsoft Internet Explorer')


if (ie) {
 PosY= 0; //Distance entre le haut de l'écran et le menu


}
else
{
	PosY=19; //Distance entre le haut de l'écran et le menu
	PosX=48; //Distance entre le haut de l'écran et le menu

}

//************ Configuration du menu************

document.write('<style>')
document.write('.ejmenu {background:'+Color1M+';text-align:'+AlignM+';font:'+WeightM+' '+SizeM+' '+FontM+';color:'+Color0M+';cursor:'+CursorM+'}')
document.write('.ejsmenu {background:'+Color1S+';text-align:'+AlignS+';font:'+WeightS+' '+SizeS+' '+FontS+';color:'+Color0S+';cursor:'+CursorS+'}')
document.write('</style>')

function fadeIn(obj)
{ obj.style.filter="blendTrans(duration=1)"
  if(obj.filters.blendTrans.status!=1)
  { obj.filters.blendTrans.Apply()
    obj.style.visibility="visible"
    obj.filters.blendTrans.Play()
  }
}

document.onclick = function() { skn.visibility='hidden' }
document.onmousemove = function() { dgt.top=document.body.scrollTop+PosY; dgt.visibility='visible' }
window.onscroll = function() { dgt.visibility=skn.visibility='hidden' }

function pop(msg,pos,posY)
{ skn.visibility="hidden";
  skn.top= HauteurM+PosY+"px";
// skn.top= HauteurM-10+"px";
  if(!msg.length) return
  if(EnLigne)
  { content="<TABLE style='border-collapse:collapse;'WIDTH="+LargeurM*menu.length/2+" bordercolor="+Color3S+" BORDER=1><TR>"
    for(pass=0;pass<msg.length;pass+=2) content+="<TD onMouseDown='location.href=\""+msg[pass+1]+"\"' onMouseOver=\"this.style.background='"+Color2S+"'\" onMouseOut=\"this.style.background='"+Color1S+"'\" HEIGHT="+HauteurS+" CLASS=ejsmenu>"+msg[pass]+"</TD>"
  } else
  { skn.left=pos+PosX-1+"px";
    content="<TABLE style='border-collapse:collapse;'WIDTH="+LargeurS+" bordercolor="+Color3S+" BORDER=1>"
    for(pass=0;pass<msg.length;pass+=2) content+="<TR><TD WIDTH="+LargeurS+" onMouseDown='location.href=\""+msg[pass+1]+"\"' onMouseOver=\"this.style.background='"+Color2S+"'\" onMouseOut=\"this.style.background='"+Color1S+"'\" HEIGHT="+HauteurS+" CLASS=ejsmenu>"+msg[pass]+"</TD></TR>"
  }
  document.getElementById("topdeck").innerHTML=content+"</TR></TABLE>"
  if(document.all && FonduS) fadeIn(topdeck); else skn.visibility="visible";
}
 //document.write('<DIV style="position:relative"><DIV style="POSITION:absolute;VISIBILITY:hidden;z-index:15" id=topdeck></DIV><TABLE ID=topmenu style="position:absolute;border-collapse:collapse;" bordercolor='+Color3M+' BORDER=1 WIDTH='+LargeurM*menu.length/2 +' HEIGHT='+HauteurM+'><tr>')

document.write('<DIV style="position:relative"><DIV style="POSITION:absolute;VISIBILITY:hidden;z-index:15" id=topdeck></DIV><TABLE ID=topmenu style="position:absolute;border-collapse:collapse;" bordercolor='+Color3M+' BORDER=1 WIDTH='+LargeurM*menu.length/2 +' HEIGHT='+HauteurM+'><tr>')
skn=document.getElementById('topdeck').style
dgt=document.getElementById('topmenu').style
for(pass=0;pass<menu.length/2;pass++) document.write("<TD WIDTH="+LargeurM+" onMouseDown='location.href=\""+menu[pass*2+1]+"\"' onMouseOver='this.style.background=\""+Color2M+"\";pop(zlien["+pass+"],this.offsetLeft)' onMouseOut='this.style.background=\""+Color1M+"\"' CLASS=ejmenu>"+menu[pass*2]+"</TD>")
document.write('</TR></TABLE></DIV>')
dgt.top=document.body.scrollTop+PosY+"px";
dgt.left=document.body.scrollLeft+PosX+"px";

Remarques :
il ne faut ajouter le "px" qu'au moment de l'affectation de la valeur à la propriété CSS, et non au moment de la définition de la valeur (ex : PosY=19; et non PosY=19+"px"; )
Il faut retirer le "top:-10px;" ajouté précédemment dans le document.write() (inutile)
Il faudra décaler ton logo.
... et adapter tout ça à IE7

A+

Super Niquel E.Bzz ! Je l'ai modifié, rajouté quelque trucs et à part quelques soucis d'alignement, le menu fonctionne comme je le souhaite !
Je te remercie bcp !!!!!

Merci pour les explication sur "px".........je vais mettre à profit vos conseils à tous par la suite !
Merci à tous de m'avoir aidé !

**E.Bzz** · 27/09/2007, 12h42

Attention, dans ton test sur le nav, il faudra certainement que tu distingues IE6 et 7

A+

**silverfab34** · 27/09/2007, 12h57

Envoyé par E.Bzz

Attention, dans ton test sur le nav, il faudra certainement que tu distingues IE6 et 7

A+

Merci du conseil, je viens de tester sur IE 6 et apparement ca à l'air de fonctionner !!!

**E.Bzz** · 27/09/2007, 13h03

Heu ... sur "mon" IE6 il apparaissent (avec effet transition).
Juste modifié le décalage :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
if (ie) {
	PosY=19; //Distance entre le haut de l'écran et le menu
	PosX=55; //Distance entre le haut de l'écran et le menu


}
else
{
	PosY=19; //Distance entre le haut de l'écran et le menu
	PosX=48; //Distance entre le haut de l'écran et le menu

}

JS est activé ?
Tu as bien repris toutes les modifs ?

A+

**silverfab34** · 27/09/2007, 15h14

Envoyé par E.Bzz

Heu ... sur "mon" IE6 il apparaissent (avec effet transition).
Juste modifié le décalage :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
if (ie) {
	PosY=19; //Distance entre le haut de l'écran et le menu
	PosX=55; //Distance entre le haut de l'écran et le menu


}
else
{
	PosY=19; //Distance entre le haut de l'écran et le menu
	PosX=48; //Distance entre le haut de l'écran et le menu

}

JS est activé ?
Tu as bien repris toutes les modifs ?

A+

Moi ca passe sans probleme

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
if (ie) {
 PosY= 0; //Distance entre le haut de l'écran et le menu
 
//	PosY=19; //Distance entre le haut de l'écran et le menu
//	PosX=55; //Distance entre le haut de l'écran et le menu
 
 
}
 
else
{
	PosY=22; //Distance entre le haut de l'écran et le menu
	PosX=0; //Distance entre la gauche de l'écran et le menu
 
}

**E.Bzz** · 27/09/2007, 15h18

Envoyé par silverfab34

Moi ca passe sans probleme

Hum ... j'ai l'impression que tu as édité ton post précédent pendant que je répondais : tu signalais une erreur toujours présente sous IE6 (les menus décallés ou qui s'ouvraient plus, je sais plus).
Bref : mon dernier post est devenu sans objet, donc

Résolu ?

A+

**silverfab34** · 27/09/2007, 16h10

Envoyé par E.Bzz

Hum ... j'ai l'impression que tu as édité ton post précédent pendant que je répondais : tu signalais une erreur toujours présente sous IE6 (les menus décallés ou qui s'ouvraient plus, je sais plus).
Bref : mon dernier post est devenu sans objet, donc

Résolu ?

A+

Merci

**silverfab34** · 28/09/2007, 17h48

Bon, un souci de reglé, et un autre qui arrive (je sais, je suis chiant à force !)
Apres avoir regardé pour les navigateurs, mon menu fonctionne !
Maintenant, le souci c'est pour la resolution, ma page web est en 800 x 600, ma resolution de mon poste est 1440 x 900 mais voila, pour des resolutions petites du style 1024 x 768.... toute la page change....c'est pas grave, j'ai une scrollbar sur le coté....mais le souci est que le menu suit l'ascenceur.....
Comment le fixer pour qu'il reste statique (sans tout casser si possible !)

Et en plus les sous menu ne disparaissent pas de suite !!!
Pffffffffff !!!

Merci

**E.Bzz** · 28/09/2007, 18h22

Rien de grave !
Suffit de remettre en commentaire les 2 lignes

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
document.onmousemove = function() { dgt.top=document.body.scrollTop+PosY; dgt.visibility='visible' } 
window.onscroll = function() { dgt.visibility=skn.visibility='hidden' }

qui servent à masquer le menu lors d'un scroll, puis à le réafficher au "bon endroit" après le scroll, sur onmousemove.

A+

**silverfab34** · 01/10/2007, 10h33

Envoyé par E.Bzz

Rien de grave !
Suffit de remettre en commentaire les 2 lignes

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
document.onmousemove = function() { dgt.top=document.body.scrollTop+PosY; dgt.visibility='visible' } 
window.onscroll = function() { dgt.visibility=skn.visibility='hidden' }

qui servent à masquer le menu lors d'un scroll, puis à le réafficher au "bon endroit" après le scroll, sur onmousemove.

A+

Oui, je m'en suis souvenu qu'il fallait que je remette les commentaires........merci, tu me confirmes bien mon intention !

Mon souci vient de mes sous menus qui ne disparaissent pas lorsque je suis au dessus d'une iframe..........mais ca, ce n'est pas grave pour le moment !

integration sous IE et sous Mozilla

JavaScript

Discussions similaires

Partager

Partager