deplacement de div

Question

ca ne marche pas... je cherche une piste ou une explication merci... Move Div [javascript:void(0); test] test

Bul3 · Answer

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

Bul3 · Answer

j'ai oublié : sans préjuger de la suite....
[mon Site][M'écrire]Bul

cs_akiko · Answer

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 !

cs_akiko · Answer

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

Bul3 · Answer

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

cs_akiko · Answer

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));
      }
   }

Bul3 · Answer

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

cs_akiko · Answer

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...

Bul3 · Answer

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

cs_akiko · Answer

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

Bul3 · Answer

>>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

cs_akiko · Answer

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...

Bul3 · Answer

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

Bul3 · Answer

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

cs_akiko · Answer

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

Bul3 · Answer

>>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

cs_akiko · Answer

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

Bul3 · Answer

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... Move Div mon Site] [M'écrire] Bul

Bul3 · Answer

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

cs_akiko · Answer

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

cs_akiko · Answer

Je vais chercher comment retourné les nouvelles positions du calque comme étant les positions de dépars d'une nouvelle animation du calque

Bul3 · Answer

ce n'est qu'un exemple, qui n'admet 
° que les déplacements de gauche à droite et de bas en haut
° qu'un déplacement horizontal = vertical
° qu'un seul div
....  faudrait généraliser un peu quoi,
     il encore 'un peu' de taf....

          [mon Site] [M'écrire] Bul

@karamel · Answer

jour
sur ces ligne
var left=  parseInt(document.getElementById('myDiv').style.left);

var top  = parseInt(document.getElementById('myDiv').style.top);

ce serait mieux ainsi
var left= document.getElementById('myDiv').offsetLleft;


var top  = document.getElementById('myDiv').offsetTop;

car si je ne me trompe pas quand tu fait
var left = document.getElementById('myDiv').style.left;

cela te retourne bien la position mais sa te rajoute (px)
ex : 50px

Bul3 · Answer

>>mais sa te rajoute (px)
tu as raison kazma....
et parseInt "l'enlève"
pas regardé ( je ne me souviens plus ) si offsetLetf ou/et Top mettent ou pas px.
amicalement.          [mon Site] [M'écrire] Bul

Deplacement de div

24 réponses

Votre réponse

Discussions similaires