changer la taille d'un div dans OnClick

**kelyly** · 07/05/2010, 14h25

Bonjour
Je voudrais qu'en cliquant sur une rubrique, elle puisse s'ouvrir dans un div d'en-dessous mais pas avec la même taille
Par exemple, le div nommé "accueil" qui fait 410px de hauteur serait remplacé par une nouvelle rubrique mais avec une plus grande hauteur.
Est-ce possible ?

Merci.

Code :

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

<li><a href="rubrique.html" onclick="document.getElementById('accueil').src=this.href;return false;">ma rubrique</a></li>

**vermine** · 07/05/2010, 14h43

Oui, c'est possible.
Je vous conseille de lire la FAQ et de faire des recherches sur le forum afin que vous appreniez par vous-même.
Pour commencer, je séparerais le code:

Code html :

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

1
2
 
onclick="document.getElementById('accueil')...

deviendrait:

Code html :

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

1
2
 
onclick="ma_fonction('accueil', this.href); return false;"

Avec la fonction:

Code js :

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

1
2
3
4
5
 
function ma_fonction(la_div, la_page)
{
    document.getElementById(la_div).src=la_page;
}

Et c'est dans cette fonction que j'en profiterais pour changer la taille de la div. C'est-à-dire changer le style de la div.

**kelyly** · 07/05/2010, 14h54

Merci, mais je ne comprend pas très bien comment on peut changer la taille d'une fonction et où on doit la mettre ou l'enregistrer. Je ne trouve pas de tutoriels là dessus :S

**kelyly** · 07/05/2010, 15h01

J'ai trouvé un tutoriel mais ça ne m'aide pas +

Sinon j'ai fait comme ça mais ça ne marche pas :

Code :

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

1
2
3
4
5
6
7
<head> <SCRIPT language="Javascript">
function taille(accueil, rubrique.html)
{
    document.getElementById(accueil).src=rubrique.html;
}
</SCRIPT>
</head>

[...]

Code :

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

	<body>	<li><a href="rubrique.html" onclick="taille('accueil', this.href); return false;">Rubrique</a></li>   </body>

**vermine** · 07/05/2010, 15h13

Vous ne pouvez pas mettre de "." dans les noms de paramètres:

Code :

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

1
2
function taille(accueil, rubrique.html)

Pour le reste faites une recherche sur le forum Javascript avec les mots clefs:

modifier style taille

Vous obtiendrez sans doute de quoi lire.

**kelyly** · 07/05/2010, 16h00

J'ai essayé plein de codes que j'ai trouvé, mais ça ne marche toujours pas. Tant pis j'vais me débrouiller autrement. Merci quand même

**vermine** · 07/05/2010, 17h12

Essayez quelque chose du genre:

Code :

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

1
2
3
4
 
document.getElementById(accueil).style = "width:200;height:200";
document.getElementById(accueil).setStyle = "width:200;height:200";
document.getElementById(accueil).cssStyle = "width:200;height:200";

Je ne sais plus vraiment la syntaxe et là je n'ai pas le temps de chercher.

**kelyly** · 07/05/2010, 20h02

Merci. Malheureusement ça marche toujours pas. Tant pis

merci beaucoup en tout cas.

Je mets les codes au cas où quelqu'un verrait où est-ce qu'il y a un problème.

Code :

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

1
2
3
4
5
6
7
8
9
10
<head>
<SCRIPT language="Javascript">
function taille(accueil, rubrique)
{ document.getElementById(accueil).src=rubrique.html;
document.getElementById(accueil).style = "width:200;height:200";
document.getElementById(accueil).setStyle = "width:200;height:200";
document.getElementById(accueil).cssStyle = "width:200;height:200";}
 
</SCRIPT>
</head>

ou sinon j'avais essayé avec ça :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<head>
<SCRIPT language="Javascript">
function taille(accueil, rubrique)
{ document.getElementById(accueil).src=rubrique.html;}
function size(accueil, rubrique)
{this.className = 'large';
    this.style.width = '450px';
    this.style.height = 'auto';}
 
</SCRIPT>
</head>

ET dans le body :

Code :

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

<a HREF="rubrique.html" onclick="taille('accueil', this.href); return false;">TEST</a>

**vermine** · 08/05/2010, 02h54

Vous passez déjà le href dans le paramètre donc pas besoin de le repréciser:

Code :

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

1
2
3
4
 
{ document.getElementById(accueil).src=rubrique.html;}
//devient
{ document.getElementById(accueil).src=rubrique;}

**kelyly** · 09/05/2010, 19h31

Merci, mais ça n'arrange pas le problème

**kelyly** · 10/05/2010, 21h07

Personne d'autre connait une solution?

**dukej** · 11/05/2010, 08h59

Envoyé par kelyly

Personne d'autre connait une solution?

tu repostes ton nouveau code, on va l'analyser ensemble

**kelyly** · 11/05/2010, 13h11

En fait je re-expose mon problème.
Voilà le début de mon site (je sais pas si j'ai le droit de le mettre donc j'éditerai et je le supprimerai si j'ai pas le droit) : http://jcamal.online.fr/index2.html

Il y a 4div principaux : celui du haut avec la bannière, la barre de navigation, l'accueil (main), la barre du bas.
Quand on clique sur "cheveux>nattes" le lien s'ouvre dans un nouvel onglet (pcq j'ai pas d'autres solutions pour l'instant) mais j'aimerai qu'il s'ouvre dans le div "accueil". Jusque là ça marche.

Mais le problème c'est que j'aimerai que le div soit plus grand sinon ça fait pas beau (cf. "cheveux>test")

Donc le début du code (avec l'aide de "vermine") :

dans <head> :

Code :

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

1
2
3
4
5
6
7
8
<SCRIPT language="Javascript">
function taille(accueil, nattes)
{ document.getElementById(accueil).src=nattes;
document.getElementById(accueil).style = "width:200;height:200";
document.getElementById(accueil).setStyle = "width:200;height:200";
document.getElementById(accueil).cssStyle = "width:200;height:200";}
 
</SCRIPT>

dans <body> :

Code :

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

<li><a href="nattes.html" onclick="taille('accueil', this.href); return false;">TEST</a></li>

**vermine** · 11/05/2010, 13h27

Haha, je me suis mal exprimé. En fait je ne me souviens plus de la syntaxe et je vous ai proposé trois solutions en guise de test mais n'en faut qu'une seule:

Code :

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

1
2
3
4
 
document.getElementById(accueil).style = "width:200;height:200";
document.getElementById(accueil).setStyle = "width:200;height:200";
document.getElementById(accueil).cssStyle = "width:200;height:200";

et il faut de toute façon rajouter l'unité de mesure. C'est un oubli de ma part:

Code :

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

1
2
 
document.getElementById(accueil).setStyle = "width:200px;height:200px";

**kelyly** · 11/05/2010, 13h49

J'ai essayé les trois formules mais ça ne marche toujours pas

Code :

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

1
2
3
4
5
6
<SCRIPT language="Javascript">
function taille(accueil, nattes)
{ document.getElementById(accueil).src=nattes;
document.getElementById(accueil).setStyle = "width:600px;height:700px";}
 
</SCRIPT>

Invité · 11/05/2010, 14h01

ce serait pas plutot ca

Code :

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

1
2
3
4
5
6
7
8
<SCRIPT language="Javascript">
function taille(accueil, nattes)
{
document.getElementById(accueil).src=nattes;
document.getElementById(accueil).style.width=600+"px";
document.getElementById(accueil).style.height=700+"px";
}
</SCRIPT>

**kelyly** · 11/05/2010, 14h17

Code :

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

1
2
3
4
5
6
7
<SCRIPT language="Javascript">
function taille(accueil, nattes)
{
document.getElementById(accueil).src=nattes;
document.getElementById(accueil).style.height=650+"px";
}
</SCRIPT>

Ah oui voilà ça marche

merci
Par contre y'a un nouveau problème (je suis chiante désolée ^^) : le code marche très bien, la taille change quand on clique sur la rubrique mais quand on clique sur les rubriques qui devraient avoir la taille normale, elles gardent la nouvelle taille et pas l'ancienne.

Enfin je sais pas si vous voyez ce que je veux dire.
Par exemple :
- http://jcamal.online.fr/index2.html On voit que l'accueil a une taille normale (ainsi que la rubrique "liens")
- On clique maintenant sur la rubrique "cheveux>test". On constate que la longueur du div change.
- On retourne maintenant à l'accueil (rubrique "accueil") ou à la rubrique "liens" (rubrique "liens") la taille a aussi changé ...

**vermine** · 11/05/2010, 14h40

Vous pouvez refaire une fonction semblable en précisant la taille que vous voulez retrouver.

Invité · 11/05/2010, 15h04

on peut modifier la fonction de la sorte

Code :

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

1
2
3
4
5
6
7
<SCRIPT language="Javascript">
function taille(accueil, nattes,hauteur)
{
document.getElementById(accueil).src=nattes;
document.getElementById(accueil).style.height=hauteur+"px";
}
</SCRIPT>

la fonction devient generique et on peut l'utiliser pour teste mais aussi pour accueil

**kelyly** · 11/05/2010, 15h16

Voilà c'est bon tout marche ^^ bon ça fait beaucoup de scripts mais pas grave xD

Merci beaucoup pour votre aide vermine et mekal !!

changer la taille d'un div dans OnClick

JavaScript

Discussions similaires

Partager

Partager