JeuWeb - Crée ton jeu par navigateur
Problème de javascript... - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : Problème de javascript... (/showthread.php?tid=653)



Problème de javascript... - Maegia - 17-01-2007

Bonjour ! Bon, encore une fois, je viens quémander un peu de votre temps pour quelque chose n'ayant rien à voir (ou peu...) avec PHP. Il s'agit de mon script de menu, trouvé sur dynamicdrive.com, qui galère légèrement sous Firefox. Le menu en question est celui présent sur www.maegia.com . Sous IE, tout est nickel... Mais sous FF, le menu apparaissant est toujours décaler de 5 ou 10px vers le bas, alors que le haut du menu apparaissant devrait être à la même hauteur que le haut du bouton auquel il est rattacher. J'suis peut-être pas clair... Enfin, ouvrez une page sous IE et une page sous FF et vous verrez bien !

Bref, si quelqu'un saurait me trouver le moyen de rendre ça identique pour les deux navigateurs, je lui en serais éternellement reconnaissant et je lui donnerai même un bisou !

Voilà le code du menu :

Code PHP :
<?php 
<style type="text/css">

#dropmenudiv{
position:absolute;
BACKGROUND-IMAGE: URL(./images/menu/arriere.gif);
border-bottom-width: 2;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 10px;
border-bottom: 0px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: normal;
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: #a9a47c;
}

</
style>


<
script type="text/javascript">

/***********************************************
* AnyLink Vertical Menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//Contents for menu 1
var menu1=new Array()
menu1[0]='<img src="../images/menu/small_top.gif">'
menu1[1]='<a href="../register.php" class="menu">- Register</a>'
menu1[2]='<a href="../terms.php" class="menu">- Terms & Conditions</a>'
menu1[3]='<a href="../forgot.php" class="menu">- Forgot your password ?</a>'
menu1[4]='<img src="../images/menu/small_bottom.gif">'

//Contents for menu 2
var menu2=new Array()
menu2[0]='<img src="../images/menu/small_top.gif">'
menu2[1]='<a href="../ranking.php" class="menu">- General Ranking</a>'
menu2[2]='<a href="../guild_ranking.php" class="menu">- Guild Ranking</a>'
menu2[3]='<a href="../serverstatus.php" class="menu">- Server Status</a>'
menu2[4]='<a href="../statistics.php" class="menu">- Overall Statistics</a>'
menu2[5]='<a href="../latest_combat.php" class="menu">- Latest Combats</a>'
menu2[6]='<img src="../images/menu/small_bottom.gif">'

//Contents for menu 3
var menu3=new Array()
menu3[0]='<img src="../images/menu/small_top.gif">'
menu3[1]='<a href="../forum/" class="menu" target="_blank">- Forum</a>'
menu3[2]='<a href="../faq.php" class="menu">- FAQ</a>'
menu3[3]='<a href="../updates.php" class="menu">- Recent Updates</a>'
menu3[4]='<a href="../encyclopedia.php" class="menu">- Encyclopedia</a>'
menu3[5]='<a href="../whatismaegia.php" class="menu">- What is Maegia ?</a>'
menu3[6]='<a href="../links.php" class="menu">- Links & Download</a>'
menu3[7]='<a href="../google.php" class="menu">- Search the Web</a>'
menu3[8]='<a href="../credits.php" class="menu">- Credits</a>'
menu3[9]='<img src="../images/menu/small_bottom.gif">'

var disappeardelay=250  //menu disappear speed onMouseout (in miliseconds)
var horizontaloffset=8 //horizontal offset of menu from default location. (0-5 is a good value)

/////No further editting needed

var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width: 160px" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

function
getposOffset(what, offsettype){
var
totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var
parentEl=what.offsetParent;
while (
parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return
totaloffset;
}


function
showhide(obj, e, visible, hidden, menuwidth){
if (
ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top=-500
dropmenuobj
.widthobj=dropmenuobj.style
dropmenuobj
.widthobj.width=menuwidth
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}

function
iecompattest(){
return (
document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function
clearbrowseredge(obj, whichedge){
var
edgeoffset=0
if (whichedge=="rightedge"){
var
windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj
.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x-obj.offsetWidth < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure+obj.offsetWidth
}
else{
var
topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj
.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move menu up?
edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either? (position at top of viewable window then)
edgeoffset=dropmenuobj.y
}
}
return
edgeoffset
}

function
populatemenu(what){
if (
ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}


function
dropdownmenu(obj, e, menucontents, menuwidth){
if (
window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu
(menucontents)

if (
ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+horizontaloffset+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px"
}

return
clickreturnvalue()
}

function
clickreturnvalue(){
if (
ie4||ns6) return false
else return true
}

function
contains_ns6(a, b) {
while (
b.parentNode)
if ((
b = b.parentNode) == a)
return
true;
return
false;
}

function
dynamichide(e){
if (
ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (
ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function
hidemenu(e){
if (
typeof dropmenuobj!="undefined"){
if (
ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}

function
delayhidemenu(){
if (
ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function
clearhidemenu(){
if (
typeof delayhide!="undefined")
clearTimeout(delayhide)
}

</
script>



RE: Problème de javascript... - Raoull - 17-01-2007

Pour info, sous opera ca passe nickel.
Ya donc que sous FF que ca coince...

J'allais sortir une théorie, mais je me suis rendu compte que c'était faux...
Donc pour l'instant je ne peux pas trop t'aider, dsl.


RE: Problème de javascript... - Maegia - 17-01-2007

Ha, merci pour l'info, je n'avais en effet pas testé sous Opéra !


RE: Problème de javascript... - gtsoul - 18-01-2007

Je suis peut-être aveugle mais je ne vois pas de différence ?
C'est à propos du menu déroulant ? Tu peux aussi le faire en css.


RE: Problème de javascript... - barst - 18-01-2007

La différence peut venir du fait que IE et Firefox ne gère pas les box de la même manière au nievau du border,padding et du margin.

Si ca vient de là, tu n'auras pratiquement pas de solution unique pour les 2 browsers.

Utilises donc un hack Firefox dans ton CSS pour corriger ton léger décalage.

De mémoire, il faut ajouter quelques lignes dans ton css, incomprise par IE qui n'interprète plus le reste des éléments CSS pour ce tag alors que firefox va les interpréter et du coup seul Firefox fera le correctif.

Ca ressemble à un truc du genre

Citation :Div
{
padding:5px; // compris par tous
hack IE // à rechercher sous google car j'ai oublié la syntaxe
padding:0px; : compris seulement par Firefox
}
prochain tag compris par IE et firefox



RE: Problème de javascript... - gtsoul - 18-01-2007

Tu voulais dire ceci :
Code PHP :
<?php 
Div
{
padding:0px !important; /* compris par tous sauf par IE*/
padding:5px; /* compris seulement par Ie car il ne gère pas le !important*/
}



RE: Problème de javascript... - barst - 18-01-2007

J'en connaissais un autre mais je l'ai plus en tête...

Sinon voici un lien qui explique les différences sur les box entre IE et firefox : http://www.openweb.eu.org/ar
ticles/dimensions_boites_css/

EDIT : voici le hack que j'avais oublié dans cet article justement pour patcher le problème des box : http://tantek.com/CSS/Examples/boxmodelhack.html


RE: Problème de javascript... - Maegia - 19-01-2007

Vous l'inséreriez ou dans le code... ? J'ai eu beau tester de multiples manière, rien n'y fait. Et êtes-vous totalement certain qu'ils s'agissent d'une erreur de padding ? Car le padding horizontal est identique pour les deux navigateurs, il n'y a erreur que sur la hauteur à laquelle apparaît la boîte. Je ne trouve vraiment pas... :/


RE: Problème de javascript... - barst - 22-01-2007

Ca s'insère dans ton fichier css.

Bon après faut voir quelle propriété css foire....