Blackotine

Corriger la largeur des options d’une liste select dans IE et afficher le contenu masqué

Voici un petit javascript permettant de corriger un bug d’Internet Explorer (qui a dit « Un de plus ! » ?) .

Il s’agit du cas où les options d’une liste à choix multiples d’un formulaire, sont trop longues pour rentrer dans la taille de cet élément select lorsqu’on a fixé sa taille en CSS. Dans un navigateur moderne, quand on visualise les choix disponibles, la taille de la liste est adaptée (la taille de l’élément parent select n’est pas modifiée). Dans ce cher IE, la liste garde la même taille que le select et on ne voit donc pas la totalité des options, n’ayant que les n premiers caractères affichés.

Les images valant mieux qu’un long discours, en voici deux pour illustrent ce problème. Ici, j’ai fixé la largeur à 300px :

Avec Firefox, Safari, Chrome, Opéra… :

Avec Internet Explorer toutes versions confondues :

Comme on peut le voir, avec IE, si les contenus des options sont long, ils sont tronqués, ce qui n’est pas très pratique.
Pour corriger ce problème un petit javascript qui ne sera executé que sous Internet Explorer.
Le principe est le suivant : On recherche tous les champs select (on peut être plus précis sur le sélecteur si besoin). On passe la largeur en auto le temps de récupérer la largeur nécessaire pour un affichage correct. Lors de l’ouverture de la liste, on applique cette largeur.
Pour ne pas modifier la mise en page, j’ai choisi de passer la liste en positionnement absolu lorsque sa taille est modifiée. C’est un choix qui pourrait avoir des conséquence sur votre mise en page. A vous de modifier ou de proposer une meilleure solution.

P.S : C’est à base de Mootools, mais adaptable à d’autres frameworks si besoin.

if(Browser.Engine.trident){
function adjustWidth(el,m){
el.setStyle('width',m+'px');
el.setStyle('position','absolute');
}
function reinitWidth(el,s,p){
el.setStyle('width',s);
el.setStyle('position',p);
}
$$('form select').each(function(cb){
var initsize = cb.getStyle('width'),initposition = cb.getStyle('position'),maxsize = 0;
cb.setStyle('width','auto');
maxsize=cb.offsetWidth;
cb.setStyle('width',initsize);
if (maxsize > initsize.substring(0,initsize.length-2)) {
cb.addEvent('mousedown',function(e){adjustWidth(cb,maxsize);});
window.document.addEvent('click', function(e) {if(e.target != cb) reinitWidth(cb,initsize,initposition);});
cb.addEvent('change',function(e){reinitWidth(cb,initsize,initposition);});
}
});
}

Label et input, syntaxe et accessibilité

L’élément label permet de rattacher une information à un contrôle par le biais d’une étiquette.
En clair, cliquer sur le texte à l’intérieur d’un élément label permet de place le curseur sur l’élément correspondant du formulaire. Il est à la fois question d’ergonomie et d’accessibilité.
Il est donc primordial d’ajouter un élément label pour chaque champs d’un formulaire.

Syntaxe

Deux méthodes existent, pour lier un label au champ correspondant, la relation peut être explicite ou implicite.

Relation explicite :

L’étiquette est définie par l’attribut for dans label et identifiée grâce à l’attribut id du champ de formulaire ciblé.

<label for="nom">Nom </label>
<input id="nom" name="firstname" type="text" />

Relation implicite :

Il s’agit d’imbriquer le champ dans la balise label, il n’est donc plus nécessaire de renseigner les attributs for de label et id du champ.

<label>
Nom
<input name="firstname" type="text" />
</label>

Ces deux méthodes sont détaillés dans la documentation du W3C

Accessibilité

Cependant la solution des labels implicites, bien qu’étant parfaitement valide, n’est plus admise car elle n’est pas reconnue par tous les dispositifs d’accessibilité, elle est d’ailleurs proscrite par les normes d’accessibilité WCAG2.0

Voilà, il n’y a donc en fait qu’une seule solution, la relation explicite, et l’autre, bien que fonctionnant, ne doit jamais être utilisée.

Mise à jour Wordpress 2.8 et message qui refuse de disparaitre

Les personnes ayant effectué une mise à jour de leur blog Wordpress vers la version 2.8 ont peut-être eu un souci avec le message « WordPress 2.8 est disponible ! Pensez à faire une mise à jour. » qui reste affiché une fois la mise à jour faite.

Ce problème vient de d’un bug lors de la génération des packs localisés et d’une variable manquante dans le fichier versions.php

La solution est assez simple, il suffit d’éditer ce fichier (wp-includes/version.php) et d’ajouter à la fin la ligne :
$wp_local_package = ‘fr_FR’;

Coins arrondis en css et javascript

Récemment, j’ai du découper un design comportant de nombreux coins arrondis, de tout styles, avec ou sans bordures, couleur de fond etc…

J’ai donc cherché un script simple à mettre en place et très modulable et comme je n’ai pas trouvé quelque chose qui correspondait exactement à mes besoins, j’ai décidé de créer mon propre script.

Avant tout, je suis contient que le fait de devoir créer des éléments supplémentaires juste pour satisfaire un besoin de mise en page est une technique à proscrire car cela n’a aucun sens. Tout devrait pouvoir se faire directement dans le CSS. Oui mais voilà, le CSS 3 et sa gestion native des bords arrondis (-moz-border-radius et -webkit-border-radius pour Firefox et Safari) est loin d’être implanté sur tous les navigateurs et nous sommes, malheureusement, dans l’obligation de ruser.

Ce que je voulais :

• Les balises ne servant qu’à la mise en page et n’ayant aucune portée sémantique sont générées en javascript.
• Un javascript non obstrusif, une mise en page non dégadée si le javascipt n’est pas activé / installé. Dans ce cas là, les coins restent simplement droits.
• Utilisation des images pour les coins pour un meilleur rendu et une plus grande modularité.
• Un script léger, syntaxe de l’appel simple mais paramétrable.
• Entièrement personnalisable via CSS.
• Conserve le DOM et génère du XHTML et du CSS valide.
• Rapide !

Pour commencer, voici une démo du script en action et une deuxième avec un bouton pour lancer le script.

Le script s’appuie sur le framework Javascript Mootools. Lire la suite »

Les fichiers .htaccess, exemples et astuces

Les fichiers .htaccess sont de puissants outils permettant de modifier la configuration du serveur web Apache de manière localisée, pour un site voire, pour un répertoire.

Voici quelques exemples utiles à utiliser sur vos sites.
Attention toutefois, car la moindre erreur de syntaxe provoquera une erreur interne sur le serveur et rendra votre site indisponible. Pensez donc à toujours garder une copie de sauvegarde permettant de revenir en arrière. Lire la suite »