Rechercher : dans
Par :

Aide animation div javascript

Dernière réponse le 9 oct 2008 à 22:13:45 luffy59, le 28 jun 2008 à 16:07:36 
 Signaler ce message aux modérateurs

Bonjour, j'essaye de faire bouger mon div au cliquage du bouton input mais celui ci ne bouge pas.

Si je met la variable idTimer dans le body avec pour action onLoad l'animation se fait.

Si quelqu'un pourrai m'aider.

Merci

Script ne marchant pas :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" media="screen" type="text/css" title="styles" href="css.css" />
</head>
<body>
	
<style>

#carre {
	background-color: red;
	height: 50px;
	width:  50px;	
}

</style>	
	
<script type="text/javascript">

	var cursor = 0;

	function move() {
		
		var carre = document.getElementById("carre");
		
		carre.style.marginLeft = 5*cursor + "px";
		
		if (cursor > 50)
			clearInterval(idTimer);
		else
			cursor++;
	}
	
</script>

<div id="carre"></div>

<br/>
<br/>

<input type="button" value="Clique" onClik="idTimer = setInterval('move()', 20);"/>
		
</body>
</html>





Script qui marche

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" media="screen" type="text/css" title="styles" href="css.css" />
</head>
<body onload = "idTimer = setInterval('move()',20);">
	
<style>

#carre {
	background-color: red;
	height: 50px;
	width:  50px;	
}

</style>	
	
<script type="text/javascript">

	var cursor = 0;

	function move() {
		
		var carre = document.getElementById("carre");
		
		carre.style.marginLeft = 5*cursor + "px";
		
		if (cursor > 50)
			clearInterval(idTimer);
		else
			cursor++;
	}
	
</script>

<div id="carre"></div>
		
</body>
</html>
Configuration: Mac OS X
Firefox 3.0

Meilleures réponses pour « Aide animation div javascript » dans :
Javascript - Modifier la hauteur (height) d'un élément HTML VoirPour modifier la hauteur d'un élément HTML en javascript, il suffit d'utiliser sa propriété de style "height". Pour cela vous pouvez y faire référence de la manière suivante : Si vous souhaitez connaître la hauteur (height) d'un bloc HTML, il...
Javascript - Centrer verticalement une page web VoirPour centrer verticalement une page web, impossible de s'en sortir en css. Une solution bien pratique : JavaScript. 1. Le fichier .js 2. La page .html 3. Utilisation 4. Inconvénients 5. Rappel Merci à Dalida pour la source du...
Télécharger Ulead GIF Animator VoirPour votre site Web ou vos présentations PowerPoint, vous avez besoin de GIFs animés pour égayer vos pages. Ulead GIF Animator est le programme le plus abouti et le plus abordable en terme de création de GIF animé. L'application permet de créer une...
Javascript - Les événements VoirQu'appelle-t-on un événement? Les événements sont des actions de l'utilisateur, qui vont pouvoir donner lieu à une interactivité. L'événement par excellence est le clic de souris, car c'est le seul que le HTML gère. Grâce au Javascript il est...
Javascript - Les variables VoirLe concept de variable Une variable est un objet repéré par son nom, pouvant contenir des données, qui pourront être modifiées lors de l'exécution du programme. En Javascript, les noms de variables peuvent être aussi long que l'on désire,...
Javascript - Introduction au langage Javascript VoirQu'est-ce que le Javascript? Le Javascript est un langage de script incorporé dans un document HTML. Historiquement il s'agit même du premier langage de script pour le Web. Ce langage est un langage de programmation qui permet d'apporter des...

1

 Brachior, le 9 oct 2008 à 22:13:45
  • +1

C'est bizarre que personne t'ai repondu avant Oo
mais voila ta toute petite erreur ^^

<input type="button" value="Clique" onClik="idTimer = setInterval('move()', 20);"/>
c'est "onclick" et non "onclik" ^^

Répondre à Brachior