Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage PHP Menu glissant sous Mozilla

Menu glissant sous Mozilla

13 réponses
Avatar
_
Ce script de menu flottant (ou glissant) horizontal ne fonctionne pas
avec Mozilla.

Savez-vous comment je peux régler ce problème ?

Ci dessous j'ai mis un script qui fonctionne avec Mozilla (menu vertical).

Merci,


Guillaume

<!--

<SCRIPT LANGUAGE = 'JavaScript'>
/* Dynamic HTML par www.j146.fr.st */
var isns = (navigator.appName.indexOf("Netscape") != -1);
var doc = document;
var div1 = (isNS) ? document.obj1 : document.all.obj1.style;
var div2 = (isNS) ? document.obj2 : document.all.obj2.style;
var div3 = (isNS) ? document.obj3 : document.all.obj3.style;
var div4 = (isNS) ? document.obj4 : document.all.obj4.style;
var div5 = (isNS) ? document.obj5 : document.all.obj5.style;
var div6 = (isNS) ? document.obj6 : document.all.obj6.style;
var div7 = (isNS) ? document.obj7 : document.all.obj7.style;
var div8 = (isNS) ? document.obj8 : document.all.obj8.style;
var div9 = (isNS) ? document.obj9 : document.all.obj9.style;
var div10 = (isNS) ? document.obj10 : document.all.obj10.style;
var etat;
var tetat = 1;
var objet;
objet = new Array(div1,div2,div3,div4,div5,div6,div7,div8,div9,div10)
etat = new Array(tetat,tetat,tetat,tetat,tetat)
etat[0] = -1;
etat[1] = -1;
etat[2] = -1;
etat[3] = -1;
etat[4] = -1;
function placeObj(i,px,py) {
objet[i].left=px;
objet[i].top=py;
}
function voirObj(i) {
objet[i].visibility='visible';
}
function cacheObj(i) {
objet[i].visibility='hidden';
}
function inverse(i) {
etat[i]=-etat[i]
if (etat[i]==1)
{cacheObj(4);voirObj(i);;etat[0]=-1;etat[1]=-1;etat[2]=-1;etat[3]=-1;etat[4]=-1;;etat[i]=1;}
if (etat[i]==-1)
{cacheObj(4);cacheObj(i);etat[0]=-1;etat[1]=-1;etat[2]=-1;etat[3]=-1;etat[4]=-1;}
}
</SCRIPT>
<SCRIPT language='JavaScript'>
voirObj(5);voirObj(6);voirObj(7);voirObj(8);voirObj(9);
placeObj(5,0,0);placeObj(6,150,0);placeObj(7,300,0);placeObj(8,450,0);placeObj(9,600,0);
placeObj(0,0,23);placeObj(1,150,23);placeObj(2,300,23);placeObj(3,450,23);placeObj(4,600,23);
</SCRIPT>
<script language='JavaScript'>
function UpdateIt(){
if (document.all){
placeObj(0,0,document.body.scrollTop+23);
placeObj(1,150,document.body.scrollTop+23);
placeObj(2,300,document.body.scrollTop+23);
placeObj(3,450,document.body.scrollTop+23);
placeObj(4,600,document.body.scrollTop+23);
placeObj(5,0,document.body.scrollTop);
placeObj(6,150,document.body.scrollTop);
placeObj(7,300,document.body.scrollTop);
placeObj(8,450,document.body.scrollTop);
placeObj(9,600,document.body.scrollTop);
setTimeout('UpdateIt()', 100);}}
UpdateIt();
</script>

fin du script 1 -->

Script qui fonctionne :

<!--

<script type="text/javascript">
/*
Ce programme a été écrit par
Roy Whittle (http://www.javascript-fx.com/)
Ce script est disponible à
l'adresse http://www.dynamicdrive.com/
*/

//Position initiale "enBas" or "enHaut"
var positionVerticale="enHaut";

if (!document.layers)
document.write('</div>');

function flottementMenu(){
var departX = 3,
departY = 250;
var ns = (navigator.appName.indexOf("Netscape") != -1);
var doc = document;
function support(id){
var elt=doc.getElementById?doc.getElementById(id):
doc.all?doc.all[id]:doc.layers[id];
if(doc.layers)
elt.style=elt;
elt.sP=function(x,y){this.style.left=x;this.style.top=y;};
elt.x = departX;
if (positionVerticale=="enHaut")
elt.y = departY;
else{
elt.y=ns?pageYOffset+innerHeight:
document.body.scrollTop+document.body.clientHeight;
elt.y -=departY;
}
return elt;
}
window.stabilisation=function(){
if (positionVerticale=="enHaut"){
var pY = ns ? pageYOffset : document.body.scrollTop;
ftlObj.y += (pY + departY - ftlObj.y)/8;
}
else{
var pY=ns?pageYOffset+innerHeight:
document.body.scrollTop+document.body.clientHeight;
ftlObj.y += (pY - departY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stabilisation()", 10);
}
ftlObj = support("divMenu");
stabilisation();
}
flottementMenu();

</script>
fin du script 2 -->
Signaler un problème avec ce contenu

10 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
1 2
Avatar
Olivier Miakinen
Le 13/07/2004 18:46, Hervé Cauwelier a écrit :

Oui mais non : HTML 4.01 n'impose pas la balise de fermeture pour head
et body ! Puis notez que les balises d'ouverture ne sont pas plus
obligatoires...



Ah, je t'ai battu de trois minutes ! ;-)

mais comme d'un autre côté il faut que title soit dans
un head... mais pour le contenu ce n'est pas clair, peut-il se
« balader » hors d'un body ?



Comme tu le rappelles, le title est obligatoire. De plus, aucune de ses
balises (ouvrante et fermante) n'est optionnelle. Mais l'emplacement de
l'élément head ne fait aucun doute : il commence juste avant tous le
premier élément que l'on peut trouver dans un head, et se termine juste
avant la balise ouvrante <body> ou, si celle-ci manque aussi, juste
avant le premier élément que l'on peut trouver dans un body.
Avatar
Hervé Cauwelier
Olivier Miakinen wrote:
Ah, je t'ai battu de trois minutes ! ;-)



Bah le temps de faire la correction orthographique...

Comme tu le rappelles, le title est obligatoire. De plus, aucune de ses
balises (ouvrante et fermante) n'est optionnelle. Mais l'emplacement de
l'élément head ne fait aucun doute : il commence juste avant tous le
premier élément que l'on peut trouver dans un head, et se termine juste
avant la balise ouvrante <body> ou, si celle-ci manque aussi, juste
avant le premier élément que l'on peut trouver dans un body.



Donc en conclusion, head et body sont obligatoires ? Par contre, je
trouve pas ce qui te fait dire que title est obligatoire ; par contre
c'est une (très) bonne pratique.


--
Hervé Cauwelier

http://www.oursours.net/
Avatar
Olivier Miakinen
Le 13/07/2004 19:51, Hervé Cauwelier a écrit :

Donc en conclusion, head et body sont obligatoires ? Par contre, je
trouve pas ce qui te fait dire que title est obligatoire



Je ne suis pas un expert en DTD, mais je pense que ceci le dit.

http://www.w3.org/TR/html4/loose.dtd :
<!--================ Document Head =======================================-->
<!-- %head.misc; defined earlier on as "SCRIPT|STYLE|META|LINK|OBJECT" -->
<!ENTITY % head.content "TITLE & ISINDEX? & BASE?">

<!ELEMENT HEAD O O (%head.content;) +(%head.misc;) -- document head -->



À première vue, j'imagine que ça veut dire :
1) un élément HEAD contient un %head.content et un nombre quelconque
de %head.misc ;
2) un %head.content contient un TITLE obligatoire, un ISINDEX optionnel
et un BASE optionnel ;
3) chacun des éventuels %head.misc contient un SCRIPT ou un STYLE ou un
META ou un LINK ou un OBJECT.

En résumé :
- un et un seul TITLE ;
- zéro ou un ISINDEX ;
- zéro ou un BASE ;
- un nombre quelconque de SCRIPT, STYLE, META, LINK, OBJECT.

Me gourré-je quelque part ?
Avatar
Christian
le mar., 13 juil. 2004 18:09:37 GMT, Olivier Miakinen écrivait sur
fr.comp.infosystemes.www.auteurs

un %head.content contient (...) un ISINDEX optionnel



c'est la première fois que j'entends parler de "isindex";
quelle est sa fonction dans le head?

(j'ai trouvé ça :
http://www.la-grange.net/w3c/html4.01/interact/forms.html#edef-ISINDEX
mais ça n'a pas l'air de correspondre )

--
Christian (enlever le H de mon e-mail)
Avatar
Hervé Cauwelier
Olivier Miakinen wrote:
Je ne suis pas un expert en DTD, mais je pense que ceci le dit.

http://www.w3.org/TR/html4/loose.dtd :

<!--================ Document Head =======================================-->
<!-- %head.misc; defined earlier on as "SCRIPT|STYLE|META|LINK|OBJECT" -->
<!ENTITY % head.content "TITLE & ISINDEX? & BASE?">

<!ELEMENT HEAD O O (%head.content;) +(%head.misc;) -- document head -->




À première vue, j'imagine que ça veut dire :
1) un élément HEAD contient un %head.content et un nombre quelconque
de %head.misc ;
2) un %head.content contient un TITLE obligatoire, un ISINDEX optionnel
et un BASE optionnel ;
3) chacun des éventuels %head.misc contient un SCRIPT ou un STYLE ou un
META ou un LINK ou un OBJECT.



Ha oui exact, mais ça ne fait pas de head un élément obligatoire. Par
contre, si on veut en mettre un (parce qu'on a encore le choix en HTML
4.01 et qu'on n'a vraiment que ça à faire...), là il faut un title. On
va y arriver...

En résumé :
- un et un seul TITLE ;
- zéro ou un ISINDEX ;
- zéro ou un BASE ;
- un nombre quelconque de SCRIPT, STYLE, META, LINK, OBJECT.

Me gourré-je quelque part ?



Le cas échéant, on est deux :-)

--
Hervé Cauwelier

http://www.oursours.net/
Avatar
_
Voilà qui devrait satisfaire certains :) :

http://www.ingexpert.com/document4.php

le problème est toujours le même.

Je me suis aperçu que les commandes
bordercolordark='#0033CC' bordercolorlight='#FFFFFF'

étaient spécifiques à IE5.

Comment les remplacer ?



Merci,


Guillaume
Avatar
Olivier Miakinen
Le 13/07/2004 21:06, Christian a écrit :

c'est la première fois que j'entends parler de "isindex";
quelle est sa fonction dans le head?

(j'ai trouvé ça :
http://www.la-grange.net/w3c/html4.01/interact/forms.html#edef-ISINDEX
mais ça n'a pas l'air de correspondre )



Moi j'ai trouvé ça :
http://www.google.fr/search?q=isindex+head

Je n'ai pas tout compris, sinon que c'était un truc avec plein de
défauts pour effectuer une recherche dans une page, avant que l'élément
FORM n'existe. Il semble que l'élément ISINDEX pouvait être utilisé dans
le HEAD pour dire que toute la page ne servait qu'à faire une requête.
Enfin bref, c'est un élément obsolète, pas de quoi se prendre le chou
avec ça.
Avatar
_
Mokhet a écrit :
_ wrote:

Le menu est visible sous Mozilla.
Il n'est simplement pas "glissant", voir :
http://www.ingexpert.com/document8.php
Aurais-tu la solution ?




Quand je vois des trucs comme ce qui suit, rien de plus normal que ca
marche pas

<td>
<a href='gbench.php'><font face='Arial Black' size='1'>
Comment ca marche?
<hr>
<a href='societe.php'>Inscription<br>
</a> <a href='test2.php'>Identifiez-vous<br>
</a></font></a>
</td>

Ca te dis toujours pas de passer ta page sur http://validator.w3.org/
avant de faire du javascript dedans ?

Première chose qui manque, c'est la DTD. Essayes d'en rajouter une au
début de ton fichier. Essayes avec la plus facile pour commencer
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

ensuite, avec cette DTD tu arriveras sur 32 erreurs HTML (99 avec
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">)

1) Line 22, column 7: required attribute "TYPE" not specified
<STYLE>

--> Tu veux <style type="text/css">

2) Line 22, column 7: document type does not allow element "STYLE" here
<STYLE>

--> Le tag <style> ne peut pas être dans <body> mais dans <head>

3) Line 45, column 27: document type does not allow element "HR" here;
missing one of "APPLET", "OBJECT", "MAP", "IFRAME", "BUTTON" start-tag
<hr>

--> Pas le droit de mettre un <hr> dans un <font>

4) Line 46, column 94: document type does not allow element "A" here
...lack' size='1'><a href='etranger.php'>

--> Le <a> précédent est pas fermé donc tu peux pas ouvrir celui la

5 à 8) Déjà listé au dessus

9) Line 61, column 24: end tag for "FONT" omitted, but its declaration
does not permit this
</td>

--> Tu fermes pas toujours tes <font> avec des </font>, enfin des fois
tu le fais, mais pas toujours

10 à 17) plein d'erreurs du fait que tes <font> et tes <a> sont pas
correctement fermés avec leur </font> et </a> respectifs

18) Line 168, column 26: there is no attribute "HEIGHT"
<table height='25' width='150' border='1' cellpadding='1,5' cellspac

--> Ca existe pas le height d'un table. Utilises des CSS
<table style="height:25px;">
*ou*
<table class="matable25px"> avec dans ta css :
.matable25px { height:25px; }

19) Line 170, column 35: there is no attribute "BACKGROUND"
<td background="images/logotp.jpg">

--> Comme le 19, ça existe pas, utilises des CSS
<td style="background:url(images/logotp.jpg);">
*ou*
avec la structure HTML, tu dois pouvoir trouver un ancestre déjà
identifié. Mais là, on part dans les méandres de l'héritage CSS, alors
qu'il faut déjà que tu valides le HTML. Donc on verra les CSS plus tard.

20,21,22) Line 234, column 32: required attribute "TYPE" not specified
<SCRIPT LANGUAGE =' JavaScript'>

--> Tu veux <script type="text/javascript">

23) Line 302, column 40: document type does not allow element "TD" here
<p><td width="100%" class="police1b"><img src="images/lettre.gif"
width="14"

--> euhhh .. à quoi il sert le <td> là ???

24) Line 302, column 103: required attribute "ALT" not specified
...if" width="14" height="14" border="0">

--> le alt n'est pas une option sur les <img>
<img src="images/lettre.gif" width="14" height="14" border="0"
alt="texte alternatif affiché pour ceux qui ont pas d'images">

25) comme 24

26) Line 456, column 7: document type does not allow element "UL" here;
assuming missing "LI" start-tag
<ul>

--> ta structure n'est pas bonne tu écris
<ul>
<li>opt A</li>
<ul>
<li>opt X</li>
<li>opt Y</li>
</ul>
<li>opt B</li>
</ul>

alors que la DTD demande de mettre le </li> de "Opt A" après le <ul>

<ul>
<li>opt A
<ul>
<li>opt X</li>
<li>opt Y</li>
</ul>
</li>
<li>opt B</li>
</ul>

27 à 32) exactement comme 26

Voila voila, bon courage

Laurent




J'ai été sur le site que tu cite et que je ne connaissais pas.
J'avais 19 erreurs après avoir par exemple retiré tous les accents. Mais
pour le reste, comme c'est en anglais et que mon niveau en html n'est
pas terrible, j'ai laissé tombé.



Est-ce toi qui a fait la traduction en français?


Je vais apporter les corrections car c'est plus clair comme cela ...

Merci,


Guillaume
Avatar
_
@SM a écrit :
_ a ecrit :

Merci pour tes indications que j'ai lu avec intérêt.

Malheureusement je ne sais pas exploiter ce que tu m'as donné.
j'ai essayé de mettre cela en pratique ici :

http://www.ingexpert.com/document5.php




Ah! ça commence bien ! IE n'est pas défini

il manque au début du script :
doc = document;
IE = doc.all?
NN = doc.getElementById?
NC = doc.layers?

rien vu de glissant dans ton script
pas mal d'erreurs
comme :
objet = new Array(div1,div2 ...)
div1, div2 ... étant des nom de divs,
on ne peut les considérer comme des variables
donc :
objet = new Array('div1','div2' ...)

et surtout la transformation du contenu de cet array
en fonction du navigateur

voici déjà une ébauche fonctionnelle :

<html>
<SCRIPT LANGUAGE = 'JavaScript'>

var doc = document;
function traduc(obj) {
obj > (doc.all)? doc.all[obj] :
(doc.getElementById)? doc.getElementById(obj) :
(doc.layers)? doc.layers[obj] : '';
return (doc.layers)?obj:obj.style;
}

var etat, tetat = 1, objet;
objet = new Array('div1','div2','div3','div4','div5',
'div6','div7','div8','div9','div10')
etat = new Array('-1','-1','-1','-1','-1');

function placeObj(i,px,py) {
objet[i]=traduc(objet[i]);
objet[i].left=(doc.layers)?px:px+'px';
objet[i].top=(doc.layers)?py:py+'px';
}
function voirObj(i) {
objet[i].visibility=(doc.layers)?'show':'visible';
}
function cacheObj(i) {
objet[i].visibility=(doc.layers)?'hide':'hidden';
}
function inverse(i) {
etat[i]=-etat[i]
if (etat[i]==1)
{cacheObj(4);voirObj(i);
etat[0]=-1;etat[1]=-1;etat[2]=-1;etat[3]=-1;etat[4]=-1;;etat[i]=1;}
if (etat[i]==-1)
{cacheObj(4);cacheObj(i);
etat[0]=-1;etat[1]=-1;etat[2]=-1;etat[3]=-1;etat[4]=-1;}
}
</SCRIPT>

<style type="text/css">
#contenu { position: absolute; top: 40px; /* border:1px solid red; */ }
#div1, #div2, #div3, #div4, #div5, #div6, #div7, #div8, #div9, #div10 {
position: absolute; }
</style>

<div id=div1>Le DIV 1</div>
<div id=div2>Le DIV 2</div>
<div id=div3>Le DIV 3</div>
<div id=div4>Le DIV 4</div>
<div id=div5>Le DIV 5</div>
<div id=div6>Le DIV 6</div>
<div id=div7>Le DIV 7</div>
<div id=div8>Le DIV 8</div>
<div id=div9>Le DIV 9</div>
<div id=div10>Le DIV 10</div>
<div id=contenu>
<h1>test de menus</h1>
<p>que donne-ce ?
<p><a href="javascript:cacheObj(1);">cache menu 2</a>
<a href="javascript:voirObj(1);">montre menu 2</a>

<SCRIPT language='JavaScript'>

voirObj(5);voirObj(6);voirObj(7);voirObj(8);voirObj(9);
placeObj(5,0,0);placeObj(6,150,0);placeObj(7,300,0);
placeObj(8,450,0);placeObj(9,600,0);
placeObj(0,0,23);placeObj(1,150,23);placeObj(2,300,23);
placeObj(3,450,23);placeObj(4,600,23);

</SCRIPT>

<script language='JavaScript'>
function UpdateIt(){
if (document.all){
placeObj(0,0,document.body.scrollTop+23);
placeObj(1,150,document.body.scrollTop+23);
placeObj(2,300,document.body.scrollTop+23);
placeObj(3,450,document.body.scrollTop+23);
placeObj(4,600,document.body.scrollTop+23);
placeObj(5,0,document.body.scrollTop);
placeObj(6,150,document.body.scrollTop);
placeObj(7,300,document.body.scrollTop);
placeObj(8,450,document.body.scrollTop);
placeObj(9,600,document.body.scrollTop);
setTimeout('UpdateIt()', 100);}}
UpdateIt();
</script>

<p>fin du script 1 -->

</div>
</html>



ca marche (sauf que le menu n'est pas glissant) après que j'ai retiré:

"http://www.w3.org/TR/html4/loose.dtd"

Pourquoi ?

Guillaume
Avatar
Mokhet
_ wrote:

ca marche (sauf que le menu n'est pas glissant) après que j'ai retiré:

"http://www.w3.org/TR/html4/loose.dtd"

Pourquoi ?



Parce que lorsque l'uri de la DTD n'est pas fournie, les navigateurs
passent en quirks mode au lieu d'être en mode de restitution standard.
Le quirks mode c'est mal, ça casse les javascript, ça casse les
alignements, et le pire de tous, ça casse le box model.

Hors, en se basant sur le fabuleux comparatif suivant
http://www.meyerweb.com/eric/dom/dtype/dtype-grid.html on se rend compte
que :
HTML 4.01 Transitional = Quirks mode
HTML 4.01 Transitional + URI = Standards mode

Laurent
1 2