11548 sujets

JavaScript, DOM et API Web HTML5

Page de menu en div à affichage en mode display - Problème Firefox

Bonjour,
Comme le dit le titre et le texte que je mets dans la page ci-dessous : La fenêtre principale de menu reste toujours en haut d'écran. Elle disparaît / apparaît lorsque l'on clique sur l'écran.
On peut la positionner à droite ou à gauche. Un repositionnement automatique se fait lors des mouvements de scroll.
Et ça marche bien sous IE et Opera, et très mal sous Firefox.
Sous Firefox : Pas de repositionnement avec le scroll, pas d'agrandissement de la div principale de menu, pas de à droite, à gauche.

Merci de votre aide

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<meta name="description" content="Menu à affichage conditionné de le listes sélectives">
<meta name="LastUpdated" content="09/03/2006">
<meta http-equiv="Content-Language" content="fr">
<meta http-equiv="Content-Type" content="text/xhtml; charset=ISO-8859-1">
<html> 
<head> 
<script type="text/javascript">
var centre = "centre";
var posX = null;
var posY = null;
var larg = null;
var haut = null;
var posdroite = null;
var largecran = screen.availWidth;
var largmenu = 200;
var hautmenu = 150;
var drtgch = 1;
var div;
var tst = new Boolean(false);

function ow(theURL,larg,haut) {
<!---//----ça c'est le calcul de la position centrale de la fenetre---->
	larg = Math.ceil(screen.availWidth * (larg/100)*(1024/screen.width));
	haut = Math.ceil(screen.availHeight * (haut/100));
	posX=Math.ceil((screen.availWidth - larg)/2);
	posY=Math.ceil((screen.availHeight - haut)/2);
		centre = window.open(theURL,"inf2","scrollbars=yes,menubar=yes,resizable=yes,width="+ larg +",height="+ haut +",top="+posY+"px,left="+posX+"px");
		centre.focus();
	}



<!---//-------- 1ère table de style - en js pour les valeur calculees de largeur ------------------>
	document.write("<style id='st1' type='text/css'>");
	document.write("div {width:100%;}");
	document.write("#menu {display:in-line;position:absolute; top:0px; left:0px;background-color:#CFE6EE;width:"+ largmenu +"px;}");
	document.write("#menu0 {position:absolute; top:0px; left:0px;padding:4px;background-color:#CFE6EE;width:"+ largmenu +"px;height:"+ hautmenu +"px;border: blue 8px solid; font-size: 14px; color: violet;}");
	document.write("#menu1 {position:absolute; top:0px; left:0px;padding:4px;background-color:#CFE6EE;width:"+ largmenu +"px;height:"+ hautmenu +"px;border: darkred 8px solid; font-size: 14px; color: violet;}");
	document.write("</style>");
<!------------------------------------------------------------------------------------>
function retabhaut0() {
	document.getElementById("menu0").style.borderWidth="8px";
	document.getElementById("menu0").style.borderStyle="solid";
	document.getElementById("menu0").style.borderColor="blue";
	}

<!---//----- menu à droite def d'ecran - la largeur - 30 px du bord ------------->
	posdroite = largecran - largmenu - 30;

<!---//------------- replace menu droite / gauche------------------------>
function adroite() {
	drtgch = 2;
	replacemenu();
	}
function replacemenu() { 
	if (drtgch == 1) {
		document.getElementById("menu").style.pixelLeft=document.body.scrollLeft;
		 }
	else 	{
		document.getElementById("menu").style.pixelLeft=posdroite;
		}
	document.getElementById('menu').style.pixelTop=document.body.scrollTop;
	} 


<!---//----------------- Cache / affiche element div menu ou sous-menu ---------------------------------------->

function chgdiv(elem) {
	if(document.getElementById(elem).style.display== "inline")
		{ document.getElementById(elem).style.display= "none"; }
	else	{ document.getElementById(elem).style.display= "inline"; }
	}

<!---//----------------- Cache / affiche fenetre menu --- var  tst  evite de sup le menu quand on clique dessus (=clique body)------->

function chgmenu() {
	if( tst != true )
		{div='menu';chgdiv(div);}
	}
</script>
<!---//-------- 2ème table de style --------------------------->
<style id='st2' type="text/css">
p {width:100%;}
td {font-family:Verdana;padding:4px;font-size:12px;font-weight:700;}
td.page {border-left:2 blue solid;}
#tab {width : 800px;}
#menu {;}
#smenu0 {padding-left:3px;padding-right:3px;z_index:1}
#smenu1 {padding-left:3px;padding-right:3px;}
#smenu2 {padding-left:3px;padding-right:3px;}
#smenu3 {padding-left:3px;padding-right:3px;}
#smenu4 {padding-left:3px;padding-right:3px;}

a.menua {padding-left:5px;cursor:hand;font-size:12px;border:2px black solid;color:black;background-color: white;width:100%; font-weight : 700;text-decoration:none;}
a.menua:visited {color:black;font-weight : 700;}
a.menua:hover {background-color: black;color:white;border:2px yellow groove;}
a.menua:active {background-color: yellow;color:black;border:2px black groove;}

a.menub {padding-left:5px;cursor:hand;font-size:12px;border:2px darkred solid;color:darkred;background-color: none;width:100%; font-weight : 700;text-decoration:none;}
a.menub:visited {color:darkred;font-weight : 700;}
a.menub:hover {color:black;background-color: yellow;border:2px darkred groove; font-weight : 700;}
a.menub:active {color:yellow;background-color: black;border:2px yellow groove;font-weight : 700;}

a.menuc {padding-left:5px;cursor:hand;font-size:12px;color:yellow; border:1px green dotted;background-color: green;width:100%; font-weight : 700;text-decoration:none;}
a.menuc:visited {background-color: green;color:yellow; border:1px green dotted;font-weight : 700;}
a.menuc:hover {background-color: yellow;color:black; border:1px yellow dotted;font-weight : 700;}
a.menuc:active {background-color: red;color:yellow; border:1px yellow dotted;font-weight : 700;}

.lienA {width:100%;margin:2 2 0 2;font-family:Arial, sans-serif;}
.lienB {width:100%;margin:2 2 0 2;background-color: none;font-family:Arial, sans-serif;font-size:12px;}
.lienC {width:100%;background-color: green;color:yellow;font-family:Arial, sans-serif;font-size:12px;margin:0;}
.popper
{
position : absolute;
visibility : hidden;
z-index:2;
}
</style>


</HEAD> 
<BODY onclick="chgmenu();" onscroll="replacemenu();">

<!---//---- topdeck : div de la bulle d'info ------------->
<div id="topdeck" class="popper">&nbsp;</DIV>

<script type="text/javascript">
// à positionner ici--------//
var nav = (document.layers); 
var iex = (document.all);
var skn = (nav) ? document.topdeck : topdeck.style;
if (nav) document.captureEvents(Event.mousemove);
document.onmousemove = get_mouse;

function pop(msg,bak) {
//---------- la var content est modifiable mais doit rester sur une seule ligne--------//
var content ="<table width=130 border=0 cellpadding=2 cellspacing=0 bgcolor=#000080><tr><td><table width=100% border=0 cellpadding=0 cellspacing=0><tr><td><center><font color=#FFFFFF size=2><b>Info supp</b></font></center></td></tr></table><table width=100% border=0 cellpadding=2 cellspacing=0 bgcolor="+bak+"><tr><td><font color=#000000 size=2><center>"+msg+"</center></font></td></tr></table></td></tr></table>";
if (nav) { 
skn.document.write(content); 
skn.document.close();
skn.visibility = "visible";
}
else if (iex) 
{
document.all("topdeck").innerHTML = content;
skn.visibility = "visible";  
}
}

function get_mouse(e) 
{
var x = (nav) ? e.pageX : event.x+document.body.scrollLeft; 
var y = (nav) ? e.pageY : event.y+document.body.scrollTop;
skn.left = x - 60;
skn.top  = y+20;
}

function kill() 
{
skn.visibility = "hidden";
}
</script>


<!---//----------------------- début des menus ------------------------>
<div id="menu" onmouseover="tst=true;"  onmouseout="tst=false;">
<!---//------------------------ 1er menu : Menu ------------------------>
<div id="menu0">
<p style="color: red;border-bottom: blue 4px solid;">Menu - <span style="font-size:10px"><a href="#" onClick="adroite();return false">A droite</a> - <a href="#" onClick="Javascript:drtgch=1;replacemenu();return false;">A gauche</a></span></p>
<div class="lienB"><a  class="menub" href="#"  onclick="javascript:div='smenu0';chgdiv(div);return false">Création - Forums</a></div>
<div id="smenu0">
<p class="lienC"><a  class="menuc" href="#"  onClick="javascript:ow('http://www.allhtml.com/index.php',77,60);return false">Allhtml</a></p>
<p class="lienC"><a  class="menuc" href="#"  onClick="javascript:ow('http://forum.alsacreations.com/forum.php',77,60);return false">Alsacreations</a></p>
<p class="lienC"><a  class="menuc" href="#"  onClick="javascript:ow('http://www.codes-sources.com/default.aspx',77,60);return false">Codes-sources</a></p>
<p class="lienC"><a  class="menuc" href="#" onClick="javascript:ow('http://www.developpez.net/forums/index.php',77,60);return false">Developpez</a></p>
<p class="lienC"><a  class="menuc" href="#"  onClick="javascript:ow('http://www.webmaster-hub.com/',77,60);return false">Webmaster-hub</a></p>
<p class="lienC"><a  class="menuc" href="#"  onClick="javascript:ow('http://frenchmozilla.sourceforge.net/',77,60);return false">Mozilla France</a></p>
</div>
<div class="lienB"><a  class="menub" href="#"  onclick="javascript:div='smenu1';chgdiv(div);">Tutoriaux</a></div>
<div id="smenu1" name="smenu1">
<p class="lienC"><a  class="menuc" href="#" onmouseover="pop('en anglais','lightyellow')"; onmouseout="kill()"  onClick="javascript:ow('http://www.brainjar.com/',77,60);return false">Brainjar</a></p>
<p class="lienC"><a  class="menuc" href="#" onmouseover="pop('World Wide Web Consortium','lightyellow')"; onmouseout="kill();" onClick="javascript:ow('http://www.w3.org/',77,60);return false">W3 C</a></p>
<p class="lienC"><a  class="menuc" href="#" onmouseover="pop('en anglais, un + dans les exemples','lightyellow')"; onmouseout="kill()" onClick="javascript:ow('http://www.w3schools.com/default.asp',77,60);return false">W3 Schools</a></p>
<p class="lienC"><a  class="menuc" href="#"  onClick="javascript:ow('http://www.yoyodesign.org/doc/w3c/css2/cover.html#minitoc',77,60);return false">yoyodesign CSS niv 2 (fr)</a></p>
</div>
<div class="lienA"><a class="menua" href="#" onclick="javascript:div='menu0';chgdiv(div);div='menu1';chgdiv(div);return false">Menu 1</a></div>
</div>
<!---//------------- 2eme menu : Menu1 ------------------------------>
<div id="menu1">
<p style="color: red;border-bottom: blue 4px solid;">Menu - <span style="font-size:10px"><a href="#" onClick="adroite();return false">A droite</a> - <a href="#" onClick="Javascript:drtgch=1;replacemenu();return false;">A gauche</a></span></p>
<div class="lienB"><a  class="menub" href="#"  onClick="javascript:div='smenu2';chgdiv(div);">Javascript</a></div>
<div id="smenu2" name="smenu2">
<p class="lienC"><a  class="menuc" href="#" onmouseover="pop('en anglais, Doc javascript','lightyellow');" onmouseout="kill()" onClick="javascript:ow('http://www.webreference.com/programming/javascript/index.html',77,60);return false">Webreference JS</a></p>
<p class="lienC"><a  class="menuc" href="#" onmouseover="pop('La page de recherche de Google !','lightblue')" onmouseout="kill()" onClick="javascript:ow('http://directory.google.com/Top/Computers/Programming/Languages/JavaScript/',77,60);return false">Google's JavaScript Resources</a></p>
<p class="lienC"><a  class="menuc" href="#"  onClick="javascript:ow('http://www.24fun.com/',77,60);return false" onmouseover="pop('Too for fun, les meilleurs scripts, maintenant moins free. Californie','lightyellow')"; onmouseout="kill()">24fun</a></p>
<p class="lienC"><a  class="menuc" href="#"  onClick="javascript:ow('http://javascript.com/',77,60);return false" onmouseover="pop('>2000 scripts ','orange')"; onmouseout="kill()">javascript.internet</a></p>
<p class="lienC"><a  class="menuc" href="#"  onClick="javascript:ow('http://scriptsearch.internet.com/',77,60);return false">scriptsearch</a></p>
<p class="lienC"><a  class="menuc" href="#"  onClick="javascript:ow('http://webdeveloper.earthweb.com/webjs/',77,60);return false">webdeveloper (Earthweb)</a></p>
</div>
<div class="lienB"><a  class="menub" href="#"  onclick="javascript:div='smenu3';chgdiv(div);">Aide&Tutoriaux</a></div>
<div id="smenu3" name="smenu3">
<p class="lienC"><a  class="menuc" href="#" onmouseover="pop('en anglais, un tas de choses et d&#180;exemples','lightgreen');" onmouseout="kill();" onClick="javascript:ow('http://www.webdevelopersjournal.com/',77,60);return false">Webdeveloper's journal</a></p>
<p class="lienC"><a  class="menuc" href="#"  onClick="javascript:ow('http://www.laltruiste.com/',77,60);return false" onmouseover="pop('Un guide de tous les languages...','lightyellow');" onmouseout="kill();">L'altruiste</a></p>
<p class="lienC"><a  class="menuc" href="#"  onClick="javascript:ow('http://www.openweb.eu.org/',77,60);return false" onmouseover="pop('Un peu tout, TB HTML','lightyellow')"; onmouseout="kill()">Openweb</a></p>
<p class="lienC"><a  class="menuc" href="#"  onClick="javascript:ow('http://www.trucsweb.com/index.asp',77,60);return false" onmouseover="pop('+3,500 abonnées +20,000 messages (forum) +850 sites +400 tutoriels...','lightyellow')"; onmouseout="kill()">Trucsweb</a></p>
<p class="lienC"><a  class="menuc" href="#"  onClick="javascript:ow('http://www.pcastuces.com/',77,60);return false">PC Astuces</a></p>
<p class="lienC"><a  class="menuc" href="#"  onClick="javascript:ow('http://www.metacites.net/',77,60);return false">Metacites</a></p>
</div>
<div class="lienB"><a  class="menub" href="#"  onclick="javascript:div='smenu4';chgdiv(div);">Divers, A visiter</a></div>
<div id="smenu4" name="smenu4">
<p class="lienC"><a  class="menuc" href="#"  onClick="javascript:ow('http://www.unicode.org/',77,60);return false">Unicode</a></p>
<p class="lienC"><a  class="menuc" href="#"  onClick="javascript:ow('http://www.internet.com/sections/webdev.html',77,60);return false" onmouseover="pop('Le portail des développeurs d&rsquo;internet.com','lightyellow')"; onmouseout="kill()">Internet.com dev channel</a></p>
<p class="lienC"><a  class="menuc" href="#"  onClick="javascript:ow('http://infomesh.net/html/history/early/',77,60);return false" onmouseover="pop('Tout est dans le nom...','lightyellow')"; onmouseout="kill()">The Early History of HTML</a></p>
<p class="lienC"><a  class="menuc" href="#"  onClick="javascript:ow('http://www.flashkit.com/fonts/',77,60);return false" onmouseover="pop('A part les polices , il y a le reste.','lightyellow')"; onmouseout="kill()">Flashkit - Fonts</a></p>
<p class="lienC"><a  class="menuc" href="#"  onClick="javascript:ow('http://www.download.com/',77,60);return false">Downloadez</a></p>
<p class="lienC"><a  class="menuc" href="#"  onClick="javascript:ow('http://www.dslvalley.com/glossaire.html',77,60);return false" onmouseover="pop('Glossaire de la terminologie Réseaux et ADSL','lightyellow')"; onmouseout="kill()">DSL Valley France</a></p>
</div>
<div class="lienA"><a class="menua" href="#" onclick="javascript:div='menu0';chgdiv(div);div='menu1';chgdiv(div);return false">Menu</a></div>
</div>
<!---//-------------------------- Fin du Menu1 ----------------------------->
</div>
<!---//------------------ Fin de la fenetre de menu -------------------->


<table id="tab">
<tr>
  <td class="page" style="padding-top:150px;font-size:16px;text-align:center;border:0" colspan="2">Bienvenue sur le menu Dhtml Scroll au top</td>
</tr>
<tr style="padding:5px">
  <td class="page">La fen&ecirc;tre principale de menu reste toujours en haut d'&eacute;cran. </td>
  <td class="page">Elle est compos&eacute;e de 2 menus intervertibles par Menu1 / Menu<br>Chacun a des boutons de choix ouvrant des sous-menus.</td>
</tr>
<tr>
  <td class="page">Elle dispara&icirc;t / appara&icirc;t lorsque l'on clique sur l'&eacute;cran.<br>On peut la positionner à droite ou à gauche.</td>
  <td class="page">Les sous-menus dans les menus s'ouvrent et se ferment et cliquant sur le m&ecirc;me bouton.<br>En changeant de Menu, on retrouve les sous-menus pr&eacute;c&eacute;demment ouverts.</td>
</tr>

<tr>
  <td class="page">Un repositionnement automatique se fait lors des mouvements de scroll.</td>
  <td class="page">Les styles display des divisions menu et sous-menus sont à initialiser en dhtml plut&ocirc;t qu'en css.<br>Sinon le premier click est inactif, le temps de passer par la commande de changement en dhtml.</td>
</tr>
<tr>
  <td class="page"><p>Remarquez : <br><span style="padding-left:20px">Le script d'ouverture en page centr&eacute;e...</span><br><span style="padding-left:20px">L'info bulle...</span><br><span style="padding-left:20px">et la persistance des liens en pseudo-classe :active</span></p></td>
  <td class="page">La variable tst, de test comme son noms l'indique, conditionne le cache/affiche de la fen&ecirc;tre principale de menu. Car lorsque l'on clique sur le menu, on clique &eacute;galement sur le body; Et cliquer sur le body est pr&eacute;vu pour faire dispara&icirc;tre le menu.</td>
</tr>
</table>
<p style="margin-top:900px">Bas de page</p>
<script type="text/javascript">
<!---// --------- initialisation des styles display des div de menu - nécessaire en dhtml pour une activation immédiate ------>
document.getElementById('menu').style.display= "inline";
document.getElementById('menu0').style.display= "inline";
document.getElementById('menu1').style.display= "none"; 
document.getElementById('smenu0').style.display= "none";
document.getElementById('smenu1').style.display= "none";
document.getElementById('smenu2').style.display= "none"; 
document.getElementById('smenu3').style.display= "none"; 
document.getElementById('smenu4').style.display= "none"; 
</script>
</BODY> 
</HTML>

Modifié par Deny (13 Mar 2006 - 15:14)
Sujet clos
Aller à