begin process at 2012 05 29 05:04:00
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

JavaScript et le navigateur

 > 

Fonctionnement d'une propriété d'un navigateur

 > 

deplacement de div


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

deplacement de div

samedi 20 décembre 2008 à 13:53:42 | deplacement de div

akiko

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>
<body>
<a href="javascript:void(0);" onclick="movediv(400,650,30)">test</a>
    <div id="myDiv">test</div>
</body>

samedi 20 décembre 2008 à 14:03:19 | Re : deplacement de div

Bul3

Membre Club
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 FireBug
Internet
Explorer
activer le deboggage : Outils/options Internet/Avancés
dans la liste, sous "Navigation" : décocher
o Afficher une notification de chaque erreur de script
o Désactiver le débogage de Scripts (Internet Explorer)
et mieux : télécharger le Debogger IE
voir aussi : DebugBar et Companion JS
K-Meleon
Outils / Console d'erreurs
Opera
Outils / Avancé / Console d'erreurs
Safari
Debug / Show JavaScript Console
° modifier Fichier com.apple.Safari.plist situé dans le
répertoire : Support:\Documents and Settings\utilisateur
\Application Data\Apple Computer\Safari\Preferences\
y ajouter <key>IncludeDebugMenu</key>
<true/>



mais.. tout simplement aussi... des alert mis ici et là ....

essaye donc :
         function movediv(x,y,t) {
      var steps = Math.floor(t*30/1000);     
      var left = parseInt(document.getElementById('myDiv').style.left);
alert(left);
....


Cordialement

          [mon Site] [M'écrire] Bul         

samedi 20 décembre 2008 à 14:06:54 | Re : deplacement de div

Bul3

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

samedi 20 décembre 2008 à 14:16:20 | Re : deplacement de div

akiko

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 !
samedi 20 décembre 2008 à 14:17:39 | Re : deplacement de div

akiko

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

D'avance merci.
samedi 20 décembre 2008 à 14:30:22 | Re : deplacement de div

Bul3

Membre Club

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           

samedi 20 décembre 2008 à 14:38:56 | Re : deplacement de div

akiko

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

samedi 20 décembre 2008 à 14:50:07 | Re : deplacement de div

Bul3

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

samedi 20 décembre 2008 à 14:58:14 | Re : deplacement de div

akiko

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...
samedi 20 décembre 2008 à 15:10:25 | Re : deplacement de div

Bul3

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


1 2 3

Cette discussion est classée dans : test, div, deplacement, 100px


Répondre à ce message

Sujets en rapport avec ce message

Glisser Déposer problèeme avec Event target sur firefox [ par ob1knob ] Salut à tous,Ca fait 2 jours que je cherche à trouver pourquoi sur firefox, lorsque je mousedown sur un div avec une posisiton absolute, et que je mou Attendre la chargement complet de la page [ par codefalse ] Bonjour les gens :)Voila j'ai un petit soucis tout simple, mais bien genant. J'ai trouvé d'ou vient le probleme, mais je ne sais pas trop comment le r Extraire le contenu visible d'une div avec overflow hidden [ par steph_dev_o ] Bonjour, Je suis à la recherche d'une fonctionnalité un peu spéciale : J'ai une div avec overflow-y:hiden; height:100px; // par exemple A l'intéri Attribution des propriéter jquery après un append [ par DjChat ] Bonjour a tous, je reconstruit l'intérieur d'une de mes div avec append, mais mon souci c'est que si je reconstruit par exemple une div avec les param Fonction javasceript ne detecte pas mon attribut css marginLeft [ par barikapix ] Bonjour tout le monde, Tout d'abord, j'espère que ce n'est pas la 1289756390653721ème f"ois que quelqu'un pose cette question. Voila 1 semaine que j Rafraichir une DIV [ par bydouille ] Bonjour à tous, J'utilise ce code, mais Je voudrais l'actualiser cette DIV toutes 10 secondes : [code=html] masquer la derniere div d'un site [ par Genildf ] Bonjour je cherche a masqer la derniere div de mon site : voici mon code [code=js]function getDivs(tag) { var els = document.getElementsByTagName(t Div dynamique en JS [ par xstaz94 ] Salut à tous, J'ai codé avec un ami une sorte de slide dynamique qui fait defiler verticalement 4 images successivements toutes les 3 secondes. On ai lien à l'interieur d'une div qui s'ouvre dans la meme div [ par prajna ] Bonjour, La page d'accueil de mon site est constituée de plusieurs div dont une qui ouvre ma page de news en php. ma page php affiche cinq news et un ajouter une div contenant une image dans un script de commentaire [ par brutos ] Bonjour à toutes et à tous, Je me permets de poster ici pour avoir quelques explications astuces concernant un script en ajax pour poster des comment


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,669 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales