Discussion :

[glloq8]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

et le css correspondant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

[glloq8]

La postition d'arrivée est :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[javatwister]

Ce qui se conçoit bien se trouve facilement

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;

[glloq8]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

[glloq8]

Personne ?

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

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
else if (from >= to) { 
      setTimeout("document.mover.style.display = none",10000); 
   }

[glloq8]

J'ai testé ton code, mais mon div reste affiché...

[SpaceFrog]

des quotes pour le none ...

[glloq8]

Pareil...

[glloq8]

maintenant, j'ai ça comme code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

sinon dans la balise de mover il y a un attribut display:block ?

[glloq8]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[javatwister]

après, reviens nous voir si tu trouves un moyen de simplifier et "moderniser" ton code

[glloq8]

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

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

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

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

Encore merci !

[javatwister]

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

puis tu peux écrire ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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;