Deplacement de div

Signaler
Messages postés
17
Date d'inscription
mercredi 16 juillet 2003
Statut
Membre
Dernière intervention
22 août 2009
-
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
-
ca ne marche pas...
je cherche une piste ou une explication merci...

<head>
<title>Move Div</title>
<style>
#myDiv{

position: absolute;
top:100px;
left:100px;
border: 1px solid black;
width: 200px;
height: 30px;}
</style>
<script language ="javascript">
<!--
function movediv(x,y,t) {
var steps = Math.floor(t*30/1000);
var left = parseInt(document.getElementById('myDiv').style.left);
var top = parseInt(document.getElementById('myDiv').style.top);
for(var i=0; i<=steps; i++)
{
setTimeout("document.getElementById('myDiv').style.left='"+Math.floor(left+i*x/steps)+"px'",Math.floor(i*t/steps));
setTimeout("document.getElementById('myDiv').style.top='"+Math.floor(top+i*y/steps)+"px'",Math.floor(i*t/steps));
}
}
//-->
</script>
</head>

[javascript:void(0); test]

test

24 réponses

Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
11
bonjour,

pour mettre au point :

Chrome
, contrôler page actuelle / Options pour développeurs
/ Console Javascript, ----
FireFox
, Outils / Console d'erreurs
et mieux : télécharger mon Site] [M'écrire] Bul         
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
11
j'ai oublié : sans préjuger de la suite....
[mon Site][M'écrire]Bul
Messages postés
17
Date d'inscription
mercredi 16 juillet 2003
Statut
Membre
Dernière intervention
22 août 2009

Oui je passe par le debug de firefox avec des alert
alert(left);

qui renvoie un left = Nan;

Je suis un peu perdu... je dois l'avouer !
Messages postés
17
Date d'inscription
mercredi 16 juillet 2003
Statut
Membre
Dernière intervention
22 août 2009

Si quelqu'un peut me donner une piste, enfin me dire pourquoi le left n'est pas renvoyé correctement ?

D'avance merci.
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
11
tu fais :  var left = parseInt(document.getElementById('myDiv').style.left);

or, le style.left n'existe pas pour l'élément myDiv
donc soit   tu testes et tu met ce qu'il faut
               tu mets le left dans la balise
               tu utilises currentStyle pour IE et getComputedStyle pour FF
               ... ou autres ....

          [mon Site] [M'écrire] Bul           
Messages postés
17
Date d'inscription
mercredi 16 juillet 2003
Statut
Membre
Dernière intervention
22 août 2009

Ok donc quelque chose comme cela ??
function movediv(x,y,t) {
var steps = Math.floor(t*30/1000);

var elem = document.getElementById("myDiv");
var vw = document.defaultView;
var currStyle = vw.getComputedStyle(elem, "");
var left = currStyle.getPropertyValue("left");
var top = currStyle.getPropertyValue("top");
alert(left);
for(var i=0; i<=steps; i++)
{
setTimeout("document.getElementById('myDiv').style.left='"+Math.floor(left+i*x/steps)+"px'",Math.floor(i*t/steps));
setTimeout("document.getElementById('myDiv').style.top='"+Math.floor(top+i*y/steps)+"px'",Math.floor(i*t/steps));
}
}
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
11
il te reste à tester   ( inutile avec IE pour squi c'est currentStyle )
pour moi, la syntaxe que je connais :
FF : window.getComputedStyle(document.getElementById("élément"),null).propriété
IE : document.getElementById("élément").currentStyle.propriété
mais bon.....

          [mon Site] [M'écrire] Bul         
Messages postés
17
Date d'inscription
mercredi 16 juillet 2003
Statut
Membre
Dernière intervention
22 août 2009

Ok donc là, le script me retourne bien les position top et left de mon div, mais l'animation enfin le mouvement ne fonctionne toujours pas ! Une idée ?

Encore merci pour tout ces précieux conseils...
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
11
tu ne tentes pas au moins, de regarder la console d'erreurs ?
( ou de debugger avec IE ? )
je parierais bien que tu as une erreur du style :
Avertissement : Erreur d'analyse de la valeur pour la propriété « top ».  Déclaration abandonnée.
Fichier Source : ...
Ligne : ...

pour FF une postion c'est obligatoirement ???px ( ou em ou ... )
left:10 par exemple, il aime pas. left:10px, ça, ça lui convient
( bon, IE rectifie, mais pas FF )

et  toujours sans préjuger du reste !!!!
  parce que ta boucle qui contient des setTimeout.... j'ai comme un gros doute
  mais on verra après ?

          [mon Site] [M'écrire] Bul         
Messages postés
17
Date d'inscription
mercredi 16 juillet 2003
Statut
Membre
Dernière intervention
22 août 2009

Alors je debugge dans FF je n'ai pas IE (pour des raisons amoureuses entre le W3C et ma triste personne)

J'ai effectivement une erreur sur la déclaration de la position top et left, cependant ne trouvant pas le chemin à prendre et n'ayant jamais fait de JS de ma vie, je crois que je vais laissé tomber l'idée de développer ce projet de blog cartographique en GPL...

Je suis ergonome et architecte d'information et en aucun cas (sauf pour les besoin du test et de la vérification des mes théories) développeur.

J'avoue que je baisse les bras un peu vite, mais cela fait une 2 semaines que je me penche de façon récurrente sur ce problème de déplacement, je vais donc mettre cette option ergo de côté en attendant de trouver une solution dans un tuto quelquonc...

En tous les cas, merci encore pour ta patience, et ta démarche très pédagogique.
A bientôt au détour d'un post dans l'immensité du WWW

Amicalement
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
11
>>pour des raisons amoureuses entre le W3C et ma triste personne
je t'avoue que mes amours iraient plutôt vers les nanas,
je n'ai d'ailleurs rien contre ceux qui préfèrent les mecs.
ou l'inverse pour les filles ! ou autres...
mais amoureux d'un organisme qui n'a aucun pouvoir, aucune légitimité,
qui valide les choses avec 20 ans de retard sur l'existant, dont les navigateurs
ne respectent que les recommandations ( ni des normes, ni des obligations, ni
rien du tout ) qui les arrangent + ignorer la majorité des internautes
( les utilmisateurs de IE )  :
ça me laisse rêveur voire pantois ...    
mais bon, chacun ses goûts et la caravane passe.

          [mon Site] [M'écrire] Bul        
Messages postés
17
Date d'inscription
mercredi 16 juillet 2003
Statut
Membre
Dernière intervention
22 août 2009

elle passe ou trépasse !!

Sinon pour le test IE FF etc...

J'ai commencé une fonction pour la détection, qui donne une chose du genre ( bha oui j'ai un peu de mal à me résigner à laissé tomber ce code)

function getStyleObject(Id_Objet) {
if(document.getElementById && document.getElementById(Id_Objet)) {

return document.getElementById(Id_Objet).style;
} else if (document.all && document.all(Id_Objet)) {

return document.all(Id_Objet).style;
} else if (document.layers && document.layers[Id_Objet]) {

return document.layers[Id_Objet];
} else {
return false;
}
}

et dans ma fonction je crée une variable comme ceci :
var monstyle = getStyleObject("myDiv");

et
if (monstyle)
{
var current_left = parseInt(the_style.left);

voilà mon avancé ou mon saut en arrière, je ne sais pas trop...
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
11
perso     var ie false;    /*@cc_on    ie true;    @*/
    if (ie) { c'est internet explorer } else { ce n'est pas lui }
ça fait hurler pas mal de monde, mais j'aime ( peut être parce que ça fait hurler,
mais surtout parce que ça marche nickel et qu'on ne peut pas faire plus court  ;o)
[ c'est de l'interprétation conditionnelle, géré par IE seul ]

sinon, en général, on teste la fonctionnalité....
( je sais bien qu'en général, c'est stupide de généraliser )
if ( window.getComputedStyle)  
on peut utiliser (document.getElementById("élément"),null).propriété
sinon on utilise document.getElementById("élément").currentStyle.propriété
ou
if ( document.getElementById("élément").currentStyle )
on peut utiliser document.getElementById("élément").currentStyle.propriété
sinon on utilise window.getComputedStyle(document.getElementById("élément"),null).propriété
( ou pas loin : pas testé !!!
  l'un ou l'autre pouvant déplaire à tel ou tel navigateur )

pas testé non plus ce que tu nous mets, peut-être est-ce correct (?)

mais même avec FF seul, il te restera des petits trucs à régler...
( après ces erreurs de "syntaxe" )

par exemple, setTimeout, ça veut dire : tu exécuteras les ordres donnés dans
     le 1er paramètre dans un délai donné dans le 2ème
     ET on continue à dérouler le javascript
     (  pour toi donc, tu va continuer la boucle dans le for )
     ici, c'est plus une erreur de logique non détectable avec les consoles d'erreurs

          [mon Site] [M'écrire] Bul        
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
11
tes déplacements devraient plutôt être du style :
...
function déplacer()
{   déplacer l'objet
    si les limites ne sont pas atteintes  appel de déplacer() dans un setTimeout
}
...
appel déplacer()
...

          [mon Site] [M'écrire] Bul         
Messages postés
17
Date d'inscription
mercredi 16 juillet 2003
Statut
Membre
Dernière intervention
22 août 2009

Ha, je suis vraiment dans les choux là alors...

Je vois que tu maîtrisse aussi bien la rhétorique et la logorrhé ( pas forcement inutile), que le javascript.
Force met de constater que j'étais bien loin d'imaginer que la tache serait aussi ardue, je ne puis malheureusement pas te suivre dans les méandres de ce langage singulier...

Allez, passons comme les caravanes, à autre chose...

Désertiquement votre.
Un non-javascripteur
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
11
>>Ha, je suis vraiment dans les choux
pas si loin que cela en fait...
sauf que tu inventes des choses et que ça ne peut pas y arriver comme ça.

>>logorrhé ( pas forcement inutile )
ah... je ne vois pas de quoi tu peux parler alors,
un anti-pléonasme peut-être ?
ou peut-être penses-tu aux flux rss ? ;o)

>>ce langage singulier...

bof... ni plus ni moins qu'un autre
abordable assez simplement puis bien plus puissant que certains ne l'imaginent

          [mon Site] [M'écrire] Bul         
Messages postés
17
Date d'inscription
mercredi 16 juillet 2003
Statut
Membre
Dernière intervention
22 août 2009

Pour la logorrhé, je voulais juste éviter d'être vulgaire ou disgracieux. J'avoue avoir beaucoup de mal à suivre vos indications mon très cher ami... concernant ce langageassez simplement abordable et bien plus puissant que certains ne l'imaginent !

C'est par ailleurs dans cette optique que je me tourne vers ce langage, malheureusement n'est pas pour l'heure à ma portée. J'attendrais donc des temps plus propice à l'apprentissage de ce langage.

Bien à toi
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
11
aller... un ch'tiot exemple, que tu affineras
en fonction de tes besoins.
pas testé totalement, tu finiras la mise au point.

on peut mieux faire, simplifier
et faire autrement aussi...

<head>
    <title>Move Div</title>
</head>

mon Site] [M'écrire] Bul         
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
11
tiens copié/collé qui se passe mal ?
il fallait lire :
            if ( (l+p)<x )
                    {    dv.style.left=l+p+"px";    }
            else    {    dv.style.left=x+"px";    }
          [mon Site] [M'écrire] Bul         
Messages postés
17
Date d'inscription
mercredi 16 juillet 2003
Statut
Membre
Dernière intervention
22 août 2009

Effectivement je venais de me rendre compte de cette petite erreur en comparant le if du left et celui du top...

J'avoue que je ne m'attendais pas à ce que tu me donne une solution déjà faite (merci d'ailleur), il va me falloir comprendre avant de l'utiliser... et le refaire.

Puis-je me permettre de te soumettre à nouveau le code quand il sera fait ??

Encore merci