changer la taille d'un div dans OnClick

Version imprimable

07/05/2010, 14h25
kelyly

changer la taille d'un div dans OnClick

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:

<li><a href="rubrique.html" onclick="document.getElementById('accueil').src=this.href;return false;">ma rubrique</a></li>
07/05/2010, 14h43
vermine
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:

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

1 2 onclick="ma_fonction('accueil', this.href); return false;"
Avec la fonction:
Code:

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.
07/05/2010, 14h54
kelyly

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
07/05/2010, 15h01
kelyly
J'ai trouvé un tutoriel mais ça ne m'aide pas + :(

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

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:

<body> <li><a href="rubrique.html" onclick="taille('accueil', this.href); return false;">Rubrique</a></li> </body>
07/05/2010, 15h13
vermine
Vous ne pouvez pas mettre de "." dans les noms de paramètres:
Code:

1 2 function taille(accueil, rubrique.html)
Pour le reste faites une recherche sur le forum Javascript avec les mots clefs:

Citation:

modifier style taille

Vous obtiendrez sans doute de quoi lire. ;)
07/05/2010, 16h00
kelyly

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 :)

Essayez quelque chose du genre:
Code:

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. :oops:

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:

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:

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:

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

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

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

09/05/2010, 19h31
kelyly

Merci, mais ça n'arrange pas le problème :(
10/05/2010, 21h07
kelyly

Personne d'autre connait une solution?
11/05/2010, 08h59
dukej

Citation:

Envoyé par kelyly

Personne d'autre connait une solution?

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

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:

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:

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

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:

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:

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

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

Code:

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>

ce serait pas plutot ca

Code:

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>

11/05/2010, 14h17
kelyly
Code:

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é ...
11/05/2010, 14h40
vermine

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

on peut modifier la fonction de la sorte
Code:

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

11/05/2010, 15h16
kelyly

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

Merci beaucoup pour votre aide vermine et mekal !! :ccool: