Adaptation de la fenêtre d'édition au client
Permettre d'avoir une fenêtre d'édition plus ou moins grande en fonction de la résolution de son écran.
Solution 1
Je vois que personne n'a jamais réagi sur cette proposition... en dehors des masos qui utilisent lynx ;-) vous avez tous des écrans 15 pouces ???
Pour ma part je trouve de plus en plus agaçant d'avoir à éditer une page dans une fenêtre qui utilise moins de la moitié de mon écran (je suis en 1280x1024)...
Je pense qu'on peut traiter le problème de deux manières :
- comme WikiTavi?, permettre à l'utilisateur de régler lui même, dans , la taille de sa fenêtre d'édition
- avantages : c'est l'utilisateur qui choisit ; la solution fonctionne facilement avec tous les navigateurs
- inconvénients : ajoute un pouyème de complexité.
- modifier la nouvelle classe de style ".edit" pour adapter automatiquement la taille du formulaire de manière à ce qu'il prenne le maximum de place disponible
- avantages : fonctionnement transparent pour l'utilisateur ; centralisation des contrôles de mise en forme dans la feuille de style
- inconvénients : plus difficile à mettre en oeuvre ; pas évident à adapter sur tous les navigateurs.
Code HTML de la page expurgé des éléments non nécessaires.
<div class="page">
<form action="http://www.wikini.net/wakka.php?wiki=AdaptationAuClientDeLaFenetreDEditionWikiNi/edit" method="post">
<input type="hidden" name="wiki" value="AdaptationAuClientDeLaFenetreDEditionWikiNi/edit" />
<input type="hidden" name="previous" value="3370" />
<textarea onKeyDown="fKeyDown()" name="body" cols="60" rows="40" wrap="soft" class="edit">
XXXXXXXXXXXXXXXXXXXXXXXX
YYYYYYYYYYYYYYYYYYYYYYYY
ZZZZZZZZZZZZZZZZZZZZZZZZ
</textarea><br />
<input name="submit" type="submit" value="Sauver" accesskey="s" />
<input name="submit" type="submit" value="Aperçu" accesskey="p" />
<input type="button" value="Annulation" onClick="document.location='http://www.wikini.net/wakka.php?wiki=AdaptationAuClientDeLaFenetreDEditionWikiNi';" />
</form>
<hr class="hr_clear" />
</div>
Code CSS à modifier :
.page { background-color: #FFFFFF; padding: 10px; border: 1px inset; border-bottom: none; }
.edit { width: 100%; height: 400px; }
Code CSS remplaçant le précédent :
.page { width: 99%; }
html>body .page { width: auto; }
.edit { width: 100%; height: auto; }
--
CharlesNepote
- C'est bizard... avec ces modifications, la fenêtre d'édition déborde systématiquement m'obligeant à scroller pour voir les boutons sauver, apeçu et annulation, et ce sous mozilla 1.7. Mais dans la mesure où j'ai modifier déjà les CSS et le code pour utiliser un menu à gauche... -- JeanMorlet
Solution 2 ?
Ah mais je ne l'avais pas vue cette page !!! Voilà mes réflexions sur le sujet, que je transfère de ma page.
L'idéal serait en effet que la taille de cette zone s'ajuste à la fenêtre du navigateur,
aussi bien en horizontal qu'en vertical (au boulot je suis en 1280x1024, alors je me sens concerné !). Pour le moment elle est codée en dur à l'aide d'attributs
rows et
cols. J'ai regardé côté CSS ce qu'on peut faire, il y a
théoriquement moyen d'obtenir une taille ajustée dans les 2 directions. Une fois les attributs supprimés, on peut ajouter dans le CSS :
textarea.edit {
- width: 100%;
- height: 100%;
}
En pratique
ça fonctionne pour
width,
mais pas pour
height. Un petit tour au W3C donne la réponse : il faut que l'élément parent ait aussi un
height pour que celui de l'enfant soit pris en compte. Il suffit donc de mettre un
height au tag
form. Cependant ceci n'est actuellement pas possible car aucun
form n'a d'identifiant, donc je ne vous raconte pas la mise en page si on fait ça... Il faudrait donc mettre un identifiant au
form d'édition et on obtiendrait dans le Html :
<form id="edit" action="..." method="post">
<input type="hidden" name="wiki" value="..." />
<input type="hidden" name="previous" value="..." />
<textarea onkeydown="fKeyDown()" name="body" wrap="soft">
...
</textarea><br />
<input id="sauver" name="submit" type="submit" value="Sauver" accesskey="s" />
<input id="apercu" name="submit" type="submit" value="Aperçu" accesskey="p" />
<input id="annuler" type="button" value="Annulation" onclick="document.location='...';" />
</form>
et pour les CSS :
form#edit {
}
form#edit textarea {
- width: 100%;
- height: 100%;
}
Remarques :
- testé et... échoué pour l'ajustement vertical :-( Ca marche en Html 4.01 transitionnal mais pas en XHtml transitional, encore une sombre histoire de mode de compatibilité des navigateurs. Bon il faudra que je regarde cela de plus près.
- le height: 80% pour le form.edit, c'est pour garder de la place pour le texte hors formulaire (c'est un problème : on n'a pas le droit à une taille du genre 100% - n lignes).
- chez moi pas besoin de mettre une largeur au div.page, à moins que je n'ai pas suffisamment testé ?
- j'en ai profité pour ajouter des id aux boutons du formulaire.
Le bilan :
- largeur automatiquement ajustée OK
- hauteur automatiquement ajustée à approfondir
Bien sûr les volontaires pour tester sont les bienvenus !
--
JmPhilippe
Il me semble qu'on a dit quelque part que tout formulaire devrait inclure un bloc div en XHTML1.0 strict. Si je ne me trompe on aimerait bien pouvoir passer
WikiNi sous cette forme, donc ce serait peut-être mieux d'envisager cela tout de suite... Ah oui, c'est ici qu'on en parle :
WikiNiEnHTMLStrict --
LordFarquaad
Exact ! En fait le code que j'ai mis est tiré des essais que j'ai fait sur ma version, donc sans
<div> supplémentaire (je ne travaille pas avec la version CVS ;-) ). S'il ya des volontaires qui ont ce
div en plus, je leur laisse pour le moment le soin d'essayer un code à peine différent :
<form id="edit" action="..." method="post">
<div>
- <input type="hidden" name="wiki" value="..." />
- <input type="hidden" name="previous" value="..." />
- <textarea onkeydown="fKeyDown()" name="body" wrap="soft">
- ...
- </textarea><br />
- <input id="sauver" name="submit" type="submit" value="Sauver" accesskey="s" />
- <input id="apercu" name="submit" type="submit" value="Aperçu" accesskey="p" />
- <input id="annuler" type="button" value="Annulation" onclick="document.location='...';" />
</div>
</form>
et pour les CSS :
form#edit {
}
form#edit div,
form#edit textarea {
- width: 100%;
- height: 100%;
}
--
JmPhilippe
Solution 3
Hauteur auto adaptative IE/Firefox :
Exemple de code :
<SCRIPT LANGUAGE="
JavaScript">
function expandTextArea(textarealabel, e){
- nb_line=escape(textarealabel.value).split("%0A").length+1;
- nb_line=nb_line-1;
- if (nb_line<15) nb_line=15;
- textarealabel.rows=nb_line;
}
</SCRIPT>
<FORM NAME="formu" ACTION="./" METHOD=POST>
<TEXTAREA STYLE="width:99%;overflow:visible" NAME="content" ONKEYDOWN="expandTextArea(this, event);"> ..... </TEXTAREA>
</FORM>
<SCRIPT>
- expandTextArea(document.formu.content,0);
</SCRIPT>