integration sous IE et sous Mozilla

Version imprimable

Voir 40 message(s) de cette discussion en une page

27/09/2007, 11h11
E.Bzz

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

A+

Menu caler sous Firefox 2 avec :

Code:

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 :mrgreen:

A+

Citation:

Envoyé par E.Bzz

Menu caler sous Firefox 2 avec :

Code:

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";

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 !!!!!:mrgreen::mrgreen::king::king:
Merci pour les explication sur "px".........je vais mettre à profit vos conseils à tous par la suite !
Merci à tous de m'avoir aidé !:king:

27/09/2007, 11h42
E.Bzz

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

A+
27/09/2007, 11h57
silverfab34

Citation:

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 !!!

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

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+

Citation:

Envoyé par E.Bzz

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

Code:

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:

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
 
}

27/09/2007, 14h18
E.Bzz

Citation:

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+
27/09/2007, 15h10
silverfab34

Citation:

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 :king:
28/09/2007, 16h48
silverfab34

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 !!!:bug:
Merci
28/09/2007, 17h22
E.Bzz
Rien de grave !
Suffit de remettre en commentaire les 2 lignes
Code:

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+
01/10/2007, 09h33
silverfab34
Citation:
Envoyé par E.Bzz

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

Code:

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 ! :king:
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 !

Voir 40 message(s) de cette discussion en une page