19 commentaires

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.

19 commentaires

gravatar
tester a dit :
Si vous voulez qu’un simple :hover déclenche le clic, placez le code précédent dans htmlElement.onhover().

gné ?

gravatar
Anon a dit :

Assez horrible les events en pure JS, je suis pas pour le 100% jQuery mais un simple :
$(document).on('mouseenter', '#elem', function(){
$(this).trigger('click');
});
me parait carrément plus intuitif !

gravatar
qwerty a dit :

Merci Timo pour ces astuces ! Zerofile stocke les fichiers en base64 ?

gravatar
Le Hollandais Volant a dit :

@tester : anéfé, c’est « onmouseover() » et pas « onhover » (oui, je suis trop intuitif pour le JS).

@nonos : Cette page est une perle, mais rien ne marche ici : le bloc est en positionnement absolue, donc ça ne marche pas.

@qwerty : en base64 chiffré oui !

gravatar
tester a dit :
htmlElement.onmouseover()

Presque !

htmlElement.onmouseover = function(){ htmlElement.dispatchEvent(evt);}


:p

gravatar
bigap a dit :

@Anon :
$(document).on('mouseenter', '#elem', function(){
$(this).trigger('click');
});

C'est pas clair du tout, non.

- $(document) : c'est quoi ? Déjà $, on ne sais pas ce que c'est.
tu as document, document.body si tu veux.
- mouseenter  : n'existe pas. C'est onmouseover
- 'click'  : passer une chaîne alors qu'on parle de code ? C'est onclick !
obj.onclick=function c'est bien plus pratique et c'est S-T-A-N-D-A-R-D !

gravatar
bigap a dit :

Petit rajout :
$(this) : ça veut dire quoi ? Et this se rapporte à document, event ou l'objet de elem ?
Dans 5 ans, tu ne sauras plus maintenir ce code...

gravatar
tester a dit :

@Anon : Jquery est très pratique si on dev du lourd/semi-lourd (c'est prémâché, cross-browser et maintenu à jour en +) par contre pour des petites appli c'est un poil ridicule quand même...

gravatar
tester a dit :

@bigap : dis-toi que jquery s'appuie sue vanilla pour concevoir son framework...si bien que tu es censés connaitre les réponses à tes questions normalement ;)

gravatar
ko_o a dit :

Pour centrer l'image verticalement j'utilise les flexbox. ça fait un peu bazooka anti-mouche mais le rendu est super confortable et c'est le pied après niveau souplesse d'utilisation (rajouter des images toussa toussa);

voila le css que j'utilise : (basiquement j'ai <figure> <img/> </figure )


figure{
max-width: 100%;
display: flex;
flex-direction:row;
margin:0 0 0 0 ;

}
.flexImg{
max-width: 100%;
background: radial-gradient( rgb(67, 66, 72), #05050F);

height:1200px;
vertical-align:middle;
margin-top:auto;
margin-bottom:auto;
margin-left: auto;
margin-right: auto;
}

gravatar
plob a dit :

@ko_o : Bof, supporté par Firefox et Chrome seulement. C'est trop limité.

gravatar
ko_lo a dit :

J'ai fail sur mon pseudo ><

@plob : pas trop d'accord sur le support :
http://caniuse.com/#search=flex
même si je suis 100% contre les -proprio- ça fonctionne pas trop mal (même sous IE10! :D)

gravatar
tester a dit :
même si je suis 100% contre les -proprio-

Moi pas spécialement mais là je viens de faire une exception pour tout dire :

https://github.com/jadorre/base64_Encryption

J'ai pondu cette class après avoir cherché en vain un truc dans le genre donc bon, si ça peut aider... ;)

gravatar
mastercase a dit :

Les codes fournis dans cet article sont drôlement pratiques. Ils permettent effectivement de rendre le site plus dynamique. Merci pour le partage.

gravatar
tester a dit :

Merci Timo (tout comme toi, j'ai pris la peine de mettre un "capitalize"'css à ton surnom ;) -c'est tout ce que tu mérites :p-).

Bref, il parait qu'il est plus facile de démonter un algo (ma class est un algo..., shouf bien) qu'en construire 1.

Challenge : 1 caisse de champagne (parole d'homme ;)) à qui décryptera ce mess crypté via l'algo sus-sourcé :

qCS/Z1mUuQtap6cTxpTJbjsrr3oevBbqoEPrsZuUy8YTFp8wpeFi1+DL3cqfmWsB99gbIwgXjWTvbnd+aZvecip+gnjKe6WosUcZQ3e0g

PS: impossible selon moi...

Les commentaires sont fermés pour cet article