Changer la taille d'un div avec onclick
Fermé
tidave
Messages postés
31
Date d'inscription
vendredi 11 juillet 2008
Statut
Membre
Dernière intervention
26 octobre 2019
-
19 avril 2010 à 16:28
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 6 mai 2014 à 00:46
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 6 mai 2014 à 00:46
A voir également:
- Changer la taille d'un div avec onclick
- Comment réduire la taille d'un fichier - Guide
- Changer dns - Guide
- Piratage facebook changer mot de passe - Guide
- Changer clavier qwerty en azerty - Guide
- Comment reduire la taille d'une photo - Guide
4 réponses
kij_82
Messages postés
4088
Date d'inscription
jeudi 7 avril 2005
Statut
Contributeur
Dernière intervention
30 septembre 2013
857
19 avril 2010 à 16:58
19 avril 2010 à 16:58
Bonjour,
Il faut utiliser du javascript pour changer la taille de ta div.
1- Identifie ton composant DIV avec un identifiant comme suit:
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:
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:
Exemple non testé, uniquement pour expliquer comment faire. A toi de jouer.
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.
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>
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>
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
738
6 mai 2014 à 00:46
6 mai 2014 à 00:46
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>
<!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>
tidave
Messages postés
31
Date d'inscription
vendredi 11 juillet 2008
Statut
Membre
Dernière intervention
26 octobre 2019
3
19 avril 2010 à 17:52
19 avril 2010 à 17:52
Salut
MErci pour ta reponse rapide, mais ça ne fonctionne pas
pourtant le code a l'air ok
bizarre quand meme
J'utilise ça :
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
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
kij_82
Messages postés
4088
Date d'inscription
jeudi 7 avril 2005
Statut
Contributeur
Dernière intervention
30 septembre 2013
857
20 avril 2010 à 10:04
20 avril 2010 à 10:04
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à.
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à.
