Le Hollandais Volant

Quelques rapides codes PHP, JS ou HTML

samedi 21 septembre 2013 à 01:09

J’ai déjà une page où je met quelques fonctions PHP qui peuvent resservir au cas où, ici je vais mettre quelques codes beaucoup plus courts.
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ément htmlElement, 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.