sites web & cie: juin 2009

C'est un vieux casse-tête qu'on voit régulièrement sur les forums, on y trouve même un certain fatalisme et le recours au javascript. Pourtant à une demande aussi simple la solution se devait simple aussi !

Pour qu'une feuille de style prenne en compte le height:100%; qu'on place dans un div, il faut lui préciser qu'on se base sur l'hauteur de l'ensemble de la page. Il faut donc ajouter height:100%; à deux endroits supplémentaires : html et body. Ce qui donne, pour un div dont l'id est contenant :

html { height:100%;}
body { background-color:#3a2f2f; height:100%; }
#contenant { min-height:100%; }

Ça marche avec firefox, IE, et Chrome (un nouveau navigateur plein d'avenir, essayez-le !). C'est en ligne ici.

Le site que je fais est en farsi et anglais. Selon la langue, l'alignement change (droite à gauche ou inversement). Pour cela je suis les conseils de spip en créant deux feuilles de style : messtyles.css et messtyles_rtl.css. Ensuite j'appelle ma feuille de style dans les squelettes ainsi :
<link href="[(#CHEMIN{votrefeuille.css}|direction_css)]" rel="stylesheet" type="text/css" />.

Je teste le squelette, en ligne, et ça ne marche pas, l'alignement reste le même quelque soit la langue choisie. Deux questions à se poser :

1) Ai-je bien placé le cookie dans le lien de changement de langue ?
http://www.monsite.net/spip.php?action=cookie&url=%2Fspip.php%3Frubrique12%26amp%3Blang%3Dfa&var_lang=en et non http://www.silk-road-hr.net/spip.php?rubrique12&var_lang=fr

2) Dans le code source du squelette, si j'utilise le critère lang="#LANG" dans ma balise HTML, donne-t-il bien la langue que j'ai choisi ? S'il ne la donne pas, il faut mettre la boucle principale du squelette après la balise HTML. Ainsi le squelette rubrique devra ressembler à ceci pour ses premières lignes :

#CACHE{7200}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml">
<BOUCLE_rubrique_principal(RUBRIQUES){id_rubrique}{doublons}{!lang_select}>

Et ceci pour les dernières :

</BOUCLE_rubrique_principal>
</html>

Si rien n'a changé après ces deux vérifications, il faut reprendre la gestion du multilinguisme au début...

Soit une liste déroulante présentant un certain nombre d'items. Je veux, losqu'un item est choisi dans la liste, que le cadre correspondant s'affiche juste en dessous.

Le script issu de "toutjavascript.com"

<script language="javascript">
//D'autres scripts sur http://www.toutjavascript.com
//Si vous utilisez ce script, merci de m'avertir !
var encours="";
function AffLayer(liste) {
var nomlayer=liste.options[liste.selectedIndex].value;
if (document.all) {
if (encours!="") {document.all[encours].style.visibility="hidden";}
encours=nomlayer;
if (nomlayer!="") {document.all[encours].style.visibility="visible";}
}
if (document.layers) {
if (encours!="") {document.layers[encours].visibility="hide";}
encours=nomlayer;
if (nomlayer!="") {document.layers[encours].visibility="show";}
}
if (document.getElementById) {
if (encours!="") {document.getElementById(encours).style.visibility="hidden";}
encours=nomlayer;
if (nomlayer!="") {document.getElementById(encours).style.visibility="visible";}
}
}
</script>

Le code HTML

<form> 
  <select name="liste" onchange='AffLayer(this)'> 
  <option value="">Choisissez un item</option>
  <option value="layer1">Premier item</option>
  <option value="layer2">Deuxième item item</option>
  </select>
  </form>

<div id="layer1" style="position:absolute; visibility:hidden;">
  Contenu du cadre correspondant au premier item
  </div> 

<div id="layer2" style="position:absolute; visibility:hidden;">
  Contenu du cadre correspondant au deuxième item
  </div>

Exemple en fonctionnement ici.

J'ai un article que je soumets à commentaires. Je veux pouvoir afficher les commentaires de cet article, mais aussi celui de ses traductions :

<BOUCLE_Art(ARTICLES){id_article}> <BOUCLE_Traductions(ARTICLES){traduction}> <BOUCLE_Commentaires(FORUMS){id_article}{plat}>
<div class="coms"> [<div class="texte">(#TEXTE|image_reduire{600})</div>] 
<div class="petit"> [<:par_auteur:> <a href="mailto:#EMAIL">(#NOM)</a>,][ (#DATE|affdate)]
[ - <:voir_en_ligne:>: <a href="#URL_SITE">(#NOM_SITE)</a><br />]</div> </div> <br /> </BOUCLE_Commentaires>
</BOUCLE_Traductions> </BOUCLE_Art>

Au début de mes commentaires, j'ai leur nombre entre parenthèses : Derniers commentaires (x). Je veux que x représente non seulement les commentaires de l'article en cours, mais l'addition de tous les commentaires des traductions de l'article + ceux de l'article en cours. Je vais pour cela utiliser le filtre plus :

<h3> <:derniers_commentaires:> <span class="petit"> (
<BOUCLE_NbreArt(ARTICLES){id_article}> <BOUCLE_NbreTraductions(ARTICLES){traduction}{exclus}> 
<BOUCLE_NbreCommentairesTrads(FORUMS){id_article}{plat}>#SET{nbre,#TOTAL_BOUCLE}</BOUCLE_NbreCommentairesTrads>
</BOUCLE_NbreTraductions>
<BOUCLE_NbreCommentaires(FORUMS){id_article}{plat}></BOUCLE_NbreCommentaires>[(#TOTAL_BOUCLE|plus{#GET{nbre}})]<//B_NbreCommentaires> </BOUCLE_NbreArt> 
) </span> </h3>

Le tout est visible ici.

Note : Grâce à la boucle <BOUCLE_NbreArt(ARTICLES){id_article}> ... </BOUCLE_NbreArt>, qui entoure le tout, je peux ajouter tout ce bout de code via un include : <INCLURE{fond=inc-commarts}{id_article}>.

Dans un formulaire d'inscription à un forum, je veux que les personnes qui le remplissent cochent obligatoirement la case mentionnant "j'accepte les conditions de participation". Je vais pour ça utiliser du javascript. Dans la page du formulaire je vais ajouter :
- La case à cocher, en HTML, ayant l'id et le name "conditions" :
<input type="checkbox" class="forml" name="conditions" id="conditions" />
- Le code javascript :

<script type="text/javascript">
function check() {
var conditions = document.getElementById('conditions');
if(conditions.checked == false) {
alert('Merci de cocher la case validant les conditions de participation au site.');
return false;
} else { return true; }
}
</script>

- Dans la balise form ce qui va faire marcher le tout : onsubmit="return check()"

Et voilà ! Le formulaire ne part pas si la case "conditions" n'est pas cochée.

lundi 29 juin 2009

[css] Appliquer une hauteur de 100% à un div

lundi 22 juin 2009

[spip] Pourquoi spip ne comprend pas que ma page est en anglais ?

lundi 15 juin 2009

[javascript] Afficher le cadre sélectionné dans une liste déroulante

Le script issu de "toutjavascript.com"

Le code HTML

lundi 8 juin 2009

[spip] Additionner le nombre de commentaires de plusieurs articles

lundi 1 juin 2009

[javascript] Rendre obligatoire de cocher une case avant de soumettre un formulaire

Où êtes-vous ?

Recherche

thèmes abordés

archives

sites à retenir

Bienvenue à bord