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

Version imprimable

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:

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?

19/12/2007, 00h31
bigboomshakala

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:

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

devient

Code:

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

et pareil pour le 2è champ

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

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:

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)

19/12/2007, 08h28
bigboomshakala

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

Citation:

Envoyé par bigboomshakala

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

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

J'ai essayé avec ce code:
Code:

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?

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:

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>