11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Desole pour ce titre incomprehensible.
Le probleme est complique a resumer mais tres facile a voir a cette adresse:

http://www.francois-rosenbaum.com/exemple/testmenu_ie.html

J'ai cree cette page juste pour vous expliquer mon probleme de facon plus shematique et epuree.

-----------------------------------------------------------------------------------
il faut passer sur le nuage pour lancer l'animation flash. Il sagit d'un menu deroulant

C'est un probleme sur Internet Explorer. Sur Opera ca marche encore moins bien.
Vous pouvez comparer avec firefox et safari pour voir le fonctionnement normal.

- Le probleme : Sur internet explorer mon menu ne se deroule qu'une fois puis reste deroulé
- Cause : Un display:none est activé en javascript quand on passe sur le cadre rouge en bas. Il fait disparaitre le div qui contient mon animation flash en cours de lecture.
- En passant sur le cadre vert : le display none est annulé. La DIV qui contient l'animation reaparait. Par consequent l'animation flash du menu reapparait aussi

Quand le menu reapparait :
- IE bloque l'animation continue de se jouer meme quand le menu a disparu avec le display:none precedent. C'est a dire que l'animation se bloque quand elle a finit de se jouer. C'est a dire en position de menu deroulé
- Firefox relance l'animation flash a son debut. C'est a dire menu non deroulé

-------------------------------------------------

C'est du tres complex. J'ai peut etre meme deouvert un nouveau bug mysterieux.

J'espere que quelqu'un sait comment je pourrais obtenit le meme comportement sur firefox et IE.

Merci.
Modifié par boucdur00000 (12 Nov 2009 - 22:04)
J'ai simplifie le code ce cette page maximum pour que se soit bien clair.

Pour rappel : La div#display devient mon animation flash de menu grace au script javascript "swfobject.js" qui sert a mettre en place des anim flash de facon simple.
Ainsi faire disparaitre div#display revient a faire disparaitre mon animation flash de menu.

Ci dessous : voila le code html de la page

<div class="cadrevert" onMouseOver="javascript:visibilite('display')";>
 <div id="display"> test</div> 
</div>

<div class="fondtest" onMouseOver="javascript:disparitiondivmenu('display')";> </div>


Ci dessous :voila le code javascript qui laisse apparente ou fait apparaitre la div#display au passage de la souris sur le cadre vert

<script type="text/javascript">
function visibilite(thingId)
{
var targetElement;
targetElement = document.getElementById(thingId) ;
if (targetElement.style.display == "none")
{
targetElement.style.display= "" ;
} else {
targetElement.style.display = "";
}
}
</script>

Ci-dessous : voila le code javascript qui fait disparaitre la div#display quand on passe sur le cadre rouge. Le code donne a div#display la proriete display:none

<script type="text/javascript">
function disparitiondivmenu(nomDuDiv){
temp=document.getElementById(nomDuDiv); 
setTimeout('temp.style.display="none"',00);
}
</script>

Modifié par boucdur00000 (12 Nov 2009 - 18:52)