11540 sujets

JavaScript, DOM et API Web HTML5

[résolu] Modification de la largeur (width) d'un div

Bonjour,

En fait j'ai essayé en vain de changer la largeur de mon div par une fonction de Prototype lord du chargement de la page.

Mon code:


<html>

<head>

<script type="text/javascript" src="squelettes/lib/prototype.js"></script>

<script type="text/javascript" src="squelettes/lib/scriptaculous.js?¬
    load=builder,effects"></script>

	
<script type="text/javascript">

function modif_largeur(){

	$(toto).setStyle({

  background-color: 'green',

  width: '400px'

});

}

</script>

<body onLoad = "modif_largeur()">

<div id = "toto" style = "background-color:red; width:200px; height:200px">

salut! tu vas bien?

</div>

</body>

</head>

</html>


Merci d'avance
Modifié par rahimonline (19 Aug 2009 - 17:46)
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien "Aide" qui apparaît tout en haut du forum est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Pourquoi ton head entoure ton body ?Il doit se finir avant le body la strucutre correcte est(il doit aussi y avoir doctype et tout hein Smiley cligne ) :

<html>
    <head>
     //là ton script
    </head>
    <body>
     /là ton html
    </body>
</html>
oui t'as raison mais j'ai tout rajouté mais encore rien, et j'ai mis l'action sur le bouton et toujours rien, et voici mon nouveau code:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> 
 
<head> 
 
<script type="text/javascript" src="squelettes/lib/prototype.js"></script> 
 
<script type="text/javascript" src="squelettes/lib/scriptaculous.js?¬ 
    load=builder,effects"></script> 
 
</head> 
<script type="text/javascript"> 
 
function modif_largeur(){ 
 
    $('toto').setStyle({ 
 
  background-color: 'green', 
 
  width: '400px' 
 
}); 
 
} 
 
</script> 
 
<body> 
 
<div id = "toto" style = "background-color:red; width:200px; height:200px"> 
 
salut! tu vas bien? 
 
</div> 

<input type='button' onclick='modif_largeur()' value='lancer' />

</body> 
 

 
</html>
Voilà ce que je conseille de faire en javascript:

Event.observe(window,'load',init);

function init()
{
      Event.observe($('id de ton bouton'),'click',modif_largeur);
}
function modif_largeur(){
    $('toto').setStyle({  
  
  backgroundColor: '#900',
  width: '400px'
  
});  
}


Après tu pourras retirer le 'onclick' de ton bouton, là tu fais du javascript intrusif et c'est assez déconseillé Smiley cligne . De plus ta syntaxe du backgroung est mauvaise, tu devrais aller consulter l'api de prorotype.
De plus tu devrais mettre ton code entre les balises head, pas dans le body
Modifié par N-J (19 Aug 2009 - 17:22)
Merci pour ton aide, moi je suis débutant dans ce truc et je suis graphiste et développeur 3D à la base. Et c'est encore raté, je sais pas si j'ai bien mis le script en place:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> 
 
<head> 
 
<script type="text/javascript" src="squelettes/lib/prototype.js"></script> 
 
<script type="text/javascript" src="squelettes/lib/scriptaculous.js?¬ 
    load=builder,effects"></script> 
 
 <script type="text/javascript"> 
 
Event.observe(window,'load',init); 
 
function init() 
{ 
      Event.observe($('toto'),'click',modif_largeur); 
} 
function modif_largeur(){ 
    this.setStyle({   
   
  backgroundColor: '#900', 
  width: '600px' 
   
});   
}

 
 
</script> 
 
 
</head> 

 
<body> 
 
<div id = "toto" style = "background-color:red; width:200px; height:200px"> 
 
salut! tu vas bien? 
 
</div> 

</body> 
 

 
</html>
Je me suis trompé plus haut, je te mets le code corrigé et vérifié ^^:

<html>  
  
<head>  
  
<script type="text/javascript" src="squelettes/lib/prototype.js"></script>  
  
<script type="text/javascript" src="squelettes/lib/scriptaculous.js?¬  
    load=builder,effects"></script>  
  
 <script type="text/javascript">  
  
Event.observe(window,'load',init);  
  
function init()  
{  
      Event.observe($('agrandir'),'click',modif_largeur);  
}  
function modif_largeur(){  
    $('toto').setStyle({    
    
  backgroundColor: '#900',  
  width: '600px'  
    
});    
} 
 
  
  
</script>  
  
  
</head>  
 
  
<body>  
  
<div id = "toto" style = "background-color:red; width:200px; height:200px">  
  
salut! tu vas bien?  
  
</div>  
<input type="button" id="agrandir" value="agrandir" />
 
</body>  
  
</html>


Là c'est sûr que ça fonctionne, par contre pour les gens qui n'ont pas javascript il ne se passera strictement rien et cliquer sur le bouton ne servira a rien Smiley cligne .
Merci énormément pour ton aide, là ça marche bien et je me suis trompé aussi du chemin des fichiers .js

<script type="text/javascript" src="squelettes/lib/prototype.js"></script>


MErci encore une fois
Pas de problèmes, tu peux ajouter un "[Resolu]" dans ton sujet en éditant ton premier message Smiley cligne
Sujet clos
Aller à