[DOM] Adapter la taille du site a celle de la fenetre

**lysandre** · 18/12/2007, 21h21

Salut tout le monde!

Je viens de me mettre a javascript depuis disons 20 minutes, mais je ne suis pas trop perdu car je fais de l'actionscript.
Probleme classique: je veux adapter la taille du site a celle de la fenetre, lors du clic sur un bouton, en envoyant a php la taille de la fenetre, php renvoyant une page en conséquence.

J'ai introduis le code suivant dans un formulaire:

Code :

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

1
2
3
4
 
<script language="Javascript">
window.document.write("<input TYPE=\"IMAGE\" SRC=\"images/adapter.jpg\" name=\"adapter\" value=\"150\"><input type=\"hidden\" name=\"xad\" value=\""+document.body.clientWidth+"\"><input type=\"hidden\" name=\"yad\" value=\""+document.body.clientHeight+"\">");
</script>

Le probleme est que ce code prends en compte la taille de la fenetre quand elle a été chargée, pas quand on cliques (ce qui me semble logique puisque le code est exécuté au chargement de la fenetre). Comment faire pour qu'il prenne en compte la taille au clic?

**bigboomshakala** · 19/12/2007, 00h31

salut
tu débutes donc je ne m'étendrais pas trop sur le fait que la méthode qui consiste à écrire la page avec document.write n'est pas conseillé (mais il est vrai qu'en général on commence par là). la solution propre c'est d'utiliser le DOM (mais tu verras ça en temps et en heure).

sinon avec ta méthode ce qui ne va pas c'est que tu concatènes les tailles "du moment" à la chaine qui construit l'input. alors qu'en fait i lne faut pas que tu utilises les valeurs numériques actuelles, mais que tu conserves les variables.

Code :

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

value=\""+document.body.clientWidth+"\">

devient

Code :

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

value=\"document.body.clientWidth\">

et pareil pour le 2è champ

**lysandre** · 19/12/2007, 01h00

Merci bigboomshakala pour ta reponse, par contre je n'ai peut-etre pas tout compris: j'ai fait deux essais simples

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<html>
<head>
  <title>Untitled web-page</title>
</head>
<body>
<script language="Javascript">
window.document.write("<table bgcolor=#123456 width=\""+document.body.clientWidth+"\"><tr><td>deded</td></tr></table>");
</script>
</body>
</html>

et

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<html>
<head>
  <title>Untitled web-page</title>
</head>
<body>
<script language="Javascript">
window.document.write("<table bgcolor=#123456 width=\"document.body.clientWidth\"><tr><td>deded</td></tr></table>");
</script>
</body>
</html>

le premier marche mais pas le deuxieme en enlevant la concaténation. Et je ne comprends pas comment ca pourrait marcher:
enlever la concaténation et inclure la variable dans la chaine me fait penser au php ou pour faire plus court on peut l'ecrire de cette manière. Par contre je n'ai pas du tout compris pourquoi ca prendrait la valeur au moment du clic...si le javascript marche un peu comme l'actionscript, le code javascript doit etre exécuté dès l'ouverture de la page et donc utiliser la valeur a l'ouverture non? quand on cliques il n'y a aucune raison que le navigateur "rejoue" le code javascript, a moins d'appeler une fonction avec un evenement du type "onclic"? Ou je me trompes totalement?

En ce qui concerne le "DOM", ca peut m'intéresser étant donné que je ne vais pas me mettre vraiment au javascript, en tout cas pas pour l'instant. Il me faut juste du code pour adapter la taille du site a celle de la fenetre, en passant par php (donc avec envoi par post ou autre méthode)

**bigboomshakala** · 19/12/2007, 08h28

ouais effectivement j'ai mal lu le code, j'ai cru qu'il y avait un onclick...

**lysandre** · 19/12/2007, 14h45

Envoyé par bigboomshakala

ouais effectivement j'ai mal lu le code, j'ai cru qu'il y avait un onclick...

Je suis rassuré, je commencais a penser que le language javascript avait un comportement bizarre :o)

J'ai essayé avec ce code:

Code :

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

1
2
3
<input  TYPE="IMAGE" SRC="images/adapt.jpg" name="adapter" onClick="document.getElementById('xad').value=document.body.clientWidth; document.getElementById('yad').value=document.body.clientHeight;" value="150">
 
<input type="hidden" name="xad" id="xad" value=""><input type="hidden" name="yad" id="yad" value="">

qui marche tres bien sous firefox et nesc mais ne marche pas sous ie et opera...comment faire?

D'autre part j'aurais deux questions:
-quel est le pb avec document.write ?
-j'aimerais que le taille de mon site s'adapte automatiquement a la taille de la fenetre (sous une certaine condition qui sera traitée en php voir suite de l'explication). Mais cela doit forcement passer par php, car pour plusieurs raisons je dois adapter la taille du site avec php. Donc il me faut un moyen pour que javascript envoie automatiquement, quelque soit le lien pointant vers une autre page de mon site sur lequel je cliques, des données au serveur php. Je suppose que ca se fera sous forme POST? (je preferes éviter le GET, pour des raisons d'esthétique de l'url). Ce données (la taille de la fenetre) seront ensuite analysées par php en fonction de la condition. Comment faire?

**lysandre** · 19/12/2007, 16h57

Bon, j'ai trouvé comment resoudre mon probleme.

Par contre, mes deux dernieres questions n'ont pas encore eu de réponse, alors je ne met pas "résolu" tout de suite :o)

Pour ceux que ca intéresse, voila comment j'ai fait pour mon premier probleme:

Apparemment ie n'aime pas onclick sur les boutons de type image. Donc j'ai transformé une image en bouton:

Code :

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

1
2
3
4
5
6
 
<form action="blabla.php" method="POST" name="formu">
<a href="#" onClick="document.forms['formu'].elements['xad'].value=document.body.clientWidth; document.forms['formu'].elements['yad'].value=document.body.clientHeight; document.forms['formu'].submit();"><img src="images/adapt.jpg"></a>
<input type="hidden" name="xad" id="xad" value="">
<input type="hidden" name="yad" id="yad" value="">
</form>

[DOM] Adapter la taille du site a celle de la fenetre

JavaScript

Discussions similaires

Partager

Partager