Déplacement de div

Version imprimable

06/11/2005, 14h56
glloq8

Déplacement de div
Bonjour, sur mon site, à l'ouverture de ma page, j'ai besoin de faire bouger un div du coin haut gauche du navigateur, à un endroit précis de ma page, et ensuite, le faire disparaitre au bout de 10 secondes...

Le problème, c'est que je n'ai aucune idée de comment faire !

voici le code de mon div :

Code:

<div id="mover">Visitez aussi la boutique enfant...Plein d'affaires pour préparer la rentrée</div>

et le css correspondant :
Code:

1 2 3 4 5 6 7 8 9 10 #mover { position: absolute; left: 5px; top: 5px; z-index: 2; color: #DB3766; font-size: 12px; font-weight: bold; margin: 15px 0 15px 45px; }
Mezrci d'avance !!
06/11/2005, 15h03
javatwister

eh bien, il te faut les coordonnées (la position, mettons) du point d'arrivée, ce sera déjà un début!

après, comme ton div est en position absolue, il faudra modifier ses propriétés left et/ou top toutes les x millisecondes, à l'aide de la méthode setInterval() par exemple, pour donner l'illusion d'un déplacement fluide;
quand la position d'arrivée sera atteinte, tu laisseras passer 10 secondes, temps calculé à l'aide d'un autre appel à setInterval() et enfin tu donneras pour valeur "none" à sa propriété de style display;
06/11/2005, 15h06
glloq8
La postition d'arrivée est :
Code:

1 2 left: 295px; top: 437px;
Par contre, je ne m'y connais pas en javascript, donc je ne vois pas du tout comment faire tout ce que tu decris au dessus...
06/11/2005, 15h21
javatwister

Ce qui se conçoit bien se trouve facilement :wink:

recherche avant tout les mots clés dont je t'ai parlé;

puis éventuellement, prends une feuille de brouillon et un stylo, représente ton div, le point où il doit arriver...; les bonnes questions vont arriver très vite: Comment le déplacement va-t-il se faire? à quelle vitesse? par quelle magie? qu'est-ce que ça peut donner à l'écran?

et tu chercheras un truc du genre "changer position élément javascript", pourquoi pas dans google...;

pense aussi à lire les pages que tu consultes: tu trouveras facilement la définition de l'acronyme dhtml;

Alors j'ai réussi à faire déplacer mon div jusque la position voulue, mais maintenant, je voudrais qu'il disparaisse au bout de 10 secondes, mais là, je n'y arrive pas.

voici le code que j'ai (c'est le esle qui ne fonctionne pas)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
<SCRIPT LANGUAGE = "JavaScript">
<!-- debut du script
/* Détection d'Internet Explorer (version >4) : fonctionne donc pour la version bêta 5.0 */
 
var ms = navigator.appVersion.indexOf("MSIE")
ie4 = (ms>0) && (parseInt(navigator.appVersion.substring(ms+5, ms+6)) >= 4)
 
function deplace(from, to) {
    if (from < to) {
		document.all.mover.style.left = (from += 20);
		document.all.mover.style.top = (from += 20);
	    setTimeout('deplace(' + from + ',' + to + ')', 150);
	}
	else if (from >= to) {
		document.mover.style.display = none;
	}
}
 
function deplacen(from, to) {
    if (from < to) {
		document.mover.left = (from += 20);
		document.mover.top = (from += 20);
	    setTimeout('deplacen(' + from + ',' + to + ')', 150);
	}
	else if (from >= to) {
		document.mover.style.display = none;
	}
}
// Fin du script -->
</SCRIPT>

Merci d'avance pour votre aide !

07/11/2005, 10h06
glloq8

Personne ? :(
07/11/2005, 10h18
javatwister
c'est pas mal d'être arrivé à ça!

un conseil, n'utilise pas de propriétés alternatives selon les navigateurs; tu n'en as plus besoin avec les browsers actuels;

attention aussi, sois rigoureux dans l'appel des éléments html:
Code:

1 2 3 document.all.mover ... document.mover
une seule méthode est normalement requise (renseigne-toi sur getElementById());

par contre, il faut demander cette fameuse "disparition au bout de 10 secondes"; setTimeout est la méthode qu'il te faut;

essaie provisoirement ceci, avant de retoucher ton code:
Code:

1 2 3 else if (from >= to) { setTimeout("document.mover.style.display = none",10000); }
07/11/2005, 10h27
glloq8

J'ai testé ton code, mais mon div reste affiché...
07/11/2005, 10h28
SpaceFrog

des quotes pour le none ...
07/11/2005, 10h35
glloq8

Pareil...

maintenant, j'ai ça comme code :

Code:

1
2
3
4
5
6
7
8
9
10
11
 
function deplace(from, to) {
    if (from < to) {
		document.all.mover.style.left = (from += 20);
		document.all.mover.style.top = (from += 20);
	    setTimeout('deplace(' + from + ',' + to + ')', 150);
	}
	else if (from >= to) {
		setTimeout("document.mover.style.display = 'none'",100);
	}
}

J'ai mis 100 comme time pour pas attendre 10secondes...

07/11/2005, 10h49
SpaceFrog

Code:

setTimeout(function(){document.mover.style.display = 'none'},1000);

sinon dans la balise de mover il y a un attribut display:block ?
07/11/2005, 10h54
glloq8

C'est bon, j'ai pris ce code (le dernier) et j'ai ajouté "all" :

Code:

setTimeout(function(){document.all.mover.style.display = 'none'},100);

et maintenant, ça marche.

Pour info, non, je n'ai pas de display:block...

Merci beaucoup pour votre aide à tous les 2 !!!
07/11/2005, 12h37
javatwister

après, reviens nous voir si tu trouves un moyen de simplifier et "moderniser" ton code :wink:
07/11/2005, 14h08
glloq8

En fait, c'était pour un essai suite à un entretien d'embauche.

Il fallait que je fasse ça. Ils m'avaient dit :

Citation:

peu importe la manière, tant que ça marche

donc, au pir, si il ressert, ça sera juste pour moi...

Encore merci !

vérifie que l'élément a un attribut id="mover";

puis tu peux écrire ceci:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/javascript">
 
var obj=document.getElementById("mover").style;// les styles de l'objet "mover"
 
function deplace(from, to) { 
    if (from < to) { 
     obj.left = (from += 20)+"px"; 
     obj.top = (from += 20)+"px";
    setTimeout('deplace(' + from + ',' + to + ')', 150); 
   } 
   else{
      setTimeout("obj.display = 'none'",100); 
   } 
} 
 
</script>

après, vérifie aussi que les coordonnées left / top sont bien les mêmes au départ, et que le mvt s'effectue en diagonale;