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.