11548 sujets

JavaScript, DOM et API Web HTML5

Déplacer calque (compatibilité FFox-IE-...)

Salut!

Je me met doucement au javascript et ... j'ai un PROBLEME Smiley bawling
Je souhaite déplacer un calque suivant des coordonnées que je calcule, tout en garantissant une compatibilité la + large possible (notamment FireFox!)... J'ai tout d'abbord essayé de trouver des lignes de code pour déplacer des calques (DIV), mais ça n'a jamais fonctionné sur Firefox. Voici mon code:

// test navigateur
<!-- IE5+ / NS6 / OP4+ / FFox -->
if (document.getElementById)
{
compatible_IE5_NS6_OP4_FF=true;
doc_width = self.innerWidth;
doc_height = self.innerHeight;
off = "hidden";
on = "visible";
}
<!-- NS4 -->
else if (document.layers)
{
compatible_NS4=true;
doc_width = self.innerWidth;
doc_height = self.innerHeight;
off = "hide";
on = "show";
}
<!-- IE4 -->
else if (document.all)
{
compatible_IE4=true;
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
off = "hidden";
on = "visible";
}



// affichage des calques
if (compatible_NS4)
{
document.write("<layer name=BANDO left=15 top=15 visibility="+off+"><img src=\"layers/bando.gif\" border=0></layer>");
document.write("<layer name=menu0 left=15 top=15 visibility="+off+"><img src=\"layers/menu0.gif\" border=0></layer>");
}
else if (compatible_IE4 || compatible_IE5_NS6_OP4_FF)
{
document.write("<div id=BANDO style=\"POSITION: absolute; Z-INDEX: 1; VISIBILITY: "+off+"; TOP: 15px; LEFT: 15px;\"><img src=\"layers/bando.gif\" border=0></div>");
document.write("<div id=menu0 style=\"POSITION: absolute; Z-INDEX: 1; VISIBILITY: "+off+"; TOP: 15px; LEFT: 15px;\"><img src=\"layers/menu0.gif\" border=0></div>");
}



//divers calculs puis...
// boucles d'affichage
if (compatible_IE5_NS6_OP4_FF)
{
for (counter=0; counter<(2*max); counter++)
{
eval(document.getElementById(BANDO).style.left = (doc_width-715)/2 + "px");
eval(document.getElementById(BANDO).style.top = (animationBANDO_Y()-115) + "px");
}
}

Réponse de Firefox = "BANDO IS NOT DEFINED"
en rapport avec la première utilisation du DIV BANDO
eval(document.getElementById(BANDO).style.left = (doc_width-715)/2 + "px");

Et via IE & FFox, y'a juste l'affichage du calque en possition initiale, mais aucune animation

Vous z'y comprenez quelque chose ???
Help please Smiley biggol
Modifié par delastone (10 Apr 2007 - 20:50)
Smiley fache Smiley fache Smiley fache Smiley fache Smiley fache Smiley fache Smiley fache
Hum, encore et toujours un problème!
à la ligne modifiée:

eval(document.getElementById("BANDO").style.left = (doc_width-715)/2 + "px");

Firefox se bloque et la console javascript m'indique "need (ou place, je sais pu) ; before statement"en m'indiquant le "px" de la ligne de code.

j'ai ajouté un parseInt ((doc_with-715)/2). Le problème vient peut être du fait que je veux concaténer un entier avec une chaîne de caractère?
j'ai essayé aussi
eval("document.getElementById(\"BANDO\").style.left ="+ parseInt((doc_width-715)/2) + "px");
et je ne sais combien d'autres combinaisons sans résultat...
C'est où qu'ça cloche????
Modifié par delastone (12 Apr 2007 - 13:51)
bonjour delastone,
et bienvenue sur ce forum.
D'abord, au lieu d'écrire 3 posts pas clairs, tu pouvais corriger ton 1er avec le bouton 'éditer'.

Ta première solution était la bonne en ajoutant +'px' pour les navigateurs respectants les standards
bonjour,
Vu le nombre d'erreurs, j'ai préféré te refaire une page test sans le code obsolete destiné à Netscape 4 et en pensant XHTML :
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title></title>
<style type="text/css" />
#bando{
 position: absolute;
 z-index: 1;
 top: 15px;
 left: 15px;
 background:red;
width:100px;
height:100px;
}
</style>
<script type="text/javascript">
var d=document,gk=window.innerWidth?1:0 // gecko ou ie
var obj=d.createElement('div');obj.setAttribute('id','bando')
window.onload=function(){d.body.appendChild(obj)}

function deplace(x,y){
db=!d.documentElement.clientWidth?d.body:d.documentElement  
doc_width = gk?window.innerWidth:db.clientWidth
doc_height = gk?window.innerHeight:db.clientHeight;
with(obj.style){left=(doc_width-x)/2+'px';top=(doc_height-y)/2+'px';display='block'}
}
obj.onclick=function(){deplace(715,110)}
</script>
</head>
<body >
</body>
</html>

Modifié par chmel (13 Apr 2007 - 07:57)
ça marche nickel, MERCI chmel!!
Smiley smile
j'y ai apporté un changement tout petit, car le but est d'animer ce calque. J'injecte une trajectoire et ça donne ceci:

sinus[i]=Math.sin(i*teta*0.01745329);
...
function deplace(x,y){
db=!d.documentElement.clientWidth?d.body:d.documentElement  
doc_width = gk?window.innerWidth:db.clientWidth
doc_height = gk?window.innerHeight:db.clientHeight;

for (i=0; i<max; i++)
{
[b]with(obj.style){left=(doc_width-x)/2 +'px';top=parseInt(y*sinus[i]-y)+'px';display='block'}[/b]
}
}
obj.onclick=function(){deplace(715,115)}

[#]Sauf que mon animation ne se voit pas, mais alors pas du tout: quand je clique, y'a rien, puis... l'image finale apparait d'un coup.
Me dit que ma boucle for(...){...} ne doit pas être très propre. je devrais essayer un adressage direct type
obj.style.left=formule 1
obj.style.top=formule 2.
Humpf Smiley confused
En passant, le parseInt sert à quelque chose, ou est ce que la valeur sera de toute façon convertie en entier?
Smiley biggrin [/i][/i]
Modifié par delastone (17 Apr 2007 - 19:32)
Sujet clos
Aller à