Mise à jour
Mise à jour de la base de données, veuillez patienter...
Idleman avait fait un article comme ça aussi, avec quelques petites astuces PHP.
PHP : Trier un tableau selon une sous-clé
Admettons qu’on ait un tableau$tableau à deux dimensions, dont une des sous-clés soit la_cle.On veut trier ce tableau selon les valeurs de
la_cle. Pour ça, on va créer un tableau $cles_tri ne contenant que les valeurs de la_cle, puis trier ceux-là en leur associant les valeurs de $tableau :$cles_tri = array();
foreach ($tableau as $key => $entry) {
$cles_tri[$key] = $entry['la_cle'];
}
array_multisort($cles_tri, SORT_DESC, $tableau);
On dispose maintenant de ce tableau, trié selon la valeur de la sous-clé
la_cle et ré-indexé.JavaScript & HTML5 : récupérer le code Base64 d’un fichier
Là aussi, ça se fait en quelques lignes avec le HTML5 :Le HTML :
<input id="file" type="file" onchange="loadFile(this.files)" />
Le JS :
function loadFile(files) {
var filename = files[0];
var fr = new FileReader();
fr.onload = function(e){alert(e.target.result);};
fr.readAsDataURL(filename);
}
Ce qui importe ici, c’est le « readAsDataURL » : c’est lui qui permet de lire le fichier comme du code Base64.
Il est aussi possible de le lire comme du code binaire ou comme un arrayBuffer ; voir la doc pour ça.
Prenez note que le code Base64 d’un fichier pèse 33% plus lourd que le fichier lui-même. Mais ça peut être sympa quand même pour envoyer des fichiers sur un serveur sans utiliser le $_FILES. C’est le code que j’utilise sur cette page.
HTML5 : rendre instantanément vos pages lisibles sur les smartphones
Ajoutez juste ceci dans le<head> :<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
Ceci fixera le niveau de zoom et la largeur de la page pour qu’il soit à l’échelle de votre écran (le navigateur faisant un calcul avec la résolution de l’écran).
Attention, le premier qui me met un « no » au user-scalable je lui jette une malédiction digne du nom de ce site.
JavaScript : simuler un clic de la souris
Comment créer un clic de la souris sur un élémenthtmlElement, par exemple lors d’un :hover ? Comme ceci :var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
htmlElement.dispatchEvent(evt);
evt.preventDefault();
Si vous voulez qu’un simple :hover déclenche le clic, placez le code précédent dans
htmlElement.onmouseover().HTML & CSS : afficher une image au maximum de sa taille dans une lightbox
Voici une astuce CSS que j’ai mis au point il y a un petit moment, qui permet d’afficher une image dans une page :- sans que l’image ne perde son ratio
- sans qu’il ne dépasse de l’écran (ni verticalement, ni horizontalement), donc s’affichant au maximum à l’écran.
- sans sur-zoomer l’image
- sans JavaScript
HTML, CSS :
<div id="d1">
<div>
<img src="image.jpg"/>
</div>
</div>#d1 {/* dans le cas d’une lightbox, j’ai ça pour pas que ça dépasse de l’écran */
position: fixed;
top: 5%; right: 5%; bottom: 5%; left: 5%;
}
#d1 div img {
max-width: 100%; max-height: 100%;
width: auto;
height: auto;
}
#d1 div {
width: 100%; height: 100%;
display: inline-block; /* lui il est important */
}
C’est ceci que j’utilise dans BlogoText pour le slideshow.
Seule impossibilité : centrer verticalement l’image. Là, il faut du JavaScript, je n’ai pas trouvé comment faire autrement.
Un peu occupé en ce moment, je vous met ici quelques liens en vrac, concernant le numérique et la politique depuis la rentrée :