Changer la taille d'un div avec onclick

[Fermé]
Signaler
Messages postés
31
Date d'inscription
vendredi 11 juillet 2008
Statut
Membre
Dernière intervention
26 octobre 2019
-
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
-
Bonjour a tous
en fait tout est dans le titre,
je voudrais qu'en cliquant sur un, que je puisse pouvoir changer la taille d'un div

Ar exemple

j'ai la div "exemple" qui fait 300px de hauteur, je voudrais qu'en cliquant sur le lien, "changer taille" que la hauteur du div passe a 500px

Merci de m'aider
A bientôt

4 réponses

Messages postés
4088
Date d'inscription
jeudi 7 avril 2005
Statut
Contributeur
Dernière intervention
30 septembre 2013
852
Bonjour,

Il faut utiliser du javascript pour changer la taille de ta div.

1- Identifie ton composant DIV avec un identifiant comme suit:
<div id="target">
Contenu target
</div>


2- Définie une fonction javascript 'changeSize' chargée de changer la taille d'un élément de ta page. Cette fonction prendra pour paramètre l'identifiant de l'élément à modifier, ainsi que la taille souhaitée:
<script language="javascript">
function changeSize (_divId_, _newSize_){
 if ( document.getElementById(_divId_) != null ){
    document.getElementById(_divId_).style.width = _newSize;
 }
}
</script>


3- Sur un évènement d'une autre DIV, appelle la fonction 'changeSize' sur l'autre DIV en lui donnant pour paramètre l'identifiant de l'autre DIV, ainsi que la taille:
<div id="source" onclick="javascript:changeSize('target',500);">
Clic ici pour changer la taille !
</div>



Exemple non testé, uniquement pour expliquer comment faire. A toi de jouer.
8
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 42674 internautes nous ont dit merci ce mois-ci

Bonjour le code proposer par kij82 a plusieurs erreur il manquer le underscor sur le newsize et width et height sont des string et nom des int bref il faut penser a rajouter le + "px"

du coup voici une correction :

<script language="javascript">
function changeSize (_divId_, _newSize_){
if ( document.getElementById(_divId_) != null ){
document.getElementById(_divId_).style.width = _newSize_ +"px";
}
}
</script>

et une evolution :

<script language="javascript">
function changeSize (divId, newSizex,newSizey){
if ( document.getElementById(divId) != null ){
document.getElementById(divId).style.width = newSizex +"px";
document.getElementById(divId).style.height= newSizey +"px";
}
}
</script>
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
681
en jquery ce serait plus simple



<!doctype html>
<html><head>
<meta charset="UTF-8">
<title>Document sans nom</title>
<style>
#change {
width:100%;
height:300px;
background-color:#FFFF99;
}
</style>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
</head>

<body>
<script>
$(document).ready (function(){
$("#achanger").toggle(function(){
$("#change").css("height", "500px");
},function(){
$("#change").css("height", "300px");
});
})
</script>

<div id="change"></div>
<button id="achanger">click ici</button>
</body>
</html>
Messages postés
31
Date d'inscription
vendredi 11 juillet 2008
Statut
Membre
Dernière intervention
26 octobre 2019
3
Salut
MErci pour ta reponse rapide, mais ça ne fonctionne pas
pourtant le code a l'air ok

bizarre quand meme

J'utilise ça :

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

function petit(ob)
{
	document.getElementById(ob).style.width="10"+'px';
}
function grand(ob)
{
	document.getElementById(ob).style.width="200"+'px';
}
</script>



avec une div "exemple"

j'appelle

<a onclick="grand('exemple');">agrandir</a>
ou
<a onclick="petit('exemple');">rapetisser</a>

ça fonctionne impect

Ce que je veux fair ec'est utiliser un sule lien
quand je clique dessus ça agrandit si c'etait petit et ça rapetisse si c'etait grand

Merci de m'aider
Messages postés
4088
Date d'inscription
jeudi 7 avril 2005
Statut
Contributeur
Dernière intervention
30 septembre 2013
852
Bonjour,

C'est un exemple. Je pense que ta DIV n'étant pas occupée à 100%, la taille à remise à celle du contenu.
Si tu joue sur une autre propriété je pense que ça fonctionnera.
A toi de voir comment gérer cette taille au niveau des propriétés CSS donc, mais l'idée est là.
tu n'est pas obligé de concaténer la valeur et le pixel:
document.getElementById(ob).style.width="200px"; 

suffit déjà