Accordéon simpliste

L'idée est de créer un accordéon simpliste pour afficher des infos uniquement lorsque l'utilisateur sélectionne un élément.

avec un html très simple :

<div class="toggler">
Je suis un déclencheur
</div>
<div class="element">
   je suis le contenu
</div>

Et une fonction jquery tout aussi simple.

function initToggler()
{
    $(document).on('click','.toggler', function(){
        var $this = $(this);
        $this.addClass('open').next('.element').slideDown();
    });
    $(document).on('click','.open.toggler', function(){
        var $this = $(this);
        $this.removeClass('open').next('.element').slideUp();
    });
}
$(initToggler);​

Le jsfiddle pour tester :
http://jsfiddle.net/powerMugen/Fj9HU/


Et voilà c'est tout pour aujourd'hui.

Le streaming mp4 avec mediaelement.js

Avec l'utilisation de mediaelement.js, est possible que des vidéos mp4 au format video h.264 ne se lisent pas immédiatement avec IE et Firefox mais uniquement lorsque le fichier est chargé en entier.

En effet ce format est lu via le lecteur flash de mediaelement et le "streaming" ne fonctionne parfois pas du tout.

Il semble que ce problème soit lié à un mauvais en-tête du fichier .mp4 (le MOOV atom certainement cf : http://www.adobe.com/devnet/video/articles/mp4_movie_atom.html)

Heureusement pour nous il existe un outil adobe air qui permet de réécrite l'index des fichiers mp4 : 

http://renaun.com/blog/code/qtindexswapper/ 

(vous pouvez aussi trouver un logiciel en python qui le fait aussi https://github.com/danielgtaylor/qtfaststart)

 Le fichier .air s'installe comme un package linux une fois que adobe air est installé sur un poste, il faut ensuite choisir les vidéos à modifier.

Et c'est merveilleux, la nouvelle vidéo va se charger et se lire en "streaming" partout grâce à l'excellent mediaelement.js.

Deux colonnes (ou plus) rapidement en jquery

Les colonnes équilibrées reviennent souvent dans l'intégration de contenu, il existe tout un tas de solutions, mais on peut le faire très vite avec une boucle each() en jquery :

En récupérant la taille de chaque élément (outerHeight qui prend la taille du contenu, du padding, et du margin de l'élément ciblé) on le compare avec un variable et c'est cette variable qui est utilisée pour gérer la taille des éléments.



http://jsfiddle.net/powerMugen/SWyKG/

Et voilà ! Simple et rapide. J'ai rarement trouvé plus simple. Pour les chanceux qui ont des projets dans lesquels ils peuvent se lâcher en css3, il y a des solutions natives pour la gestion des colonnes :
- http://www.quirksmode.org/css/multicolumn.html
- http://www.w3.org/TR/css3-multicol/

Vider automatique un input type text avec jquery

Encore une petit bidouille jquery ce soir, parce que j'aime assez ça.

Il faut commencer par créer la function, qu'on appelera automatiquement lors du chargement de la page


function initFormsInputs()
{

Il faut commencer par récupèrer chaque input avec la class text, ce sont ceux que l'ont veut "vider" automatiquement quand on clique dedans (champ de recherche, de login...)

$("input.text").each(function(){

La value de l'input  est stockée dans l'élément grâce à la fonction .data() de jquery.

var storedValue = $(this).attr("value");
$(this).data("value", { datavalue : storedValue });

Lorsqu'on prend le focus sur l'élément on teste si la value est égale à la value stockée précédement, si c'est le cas, on vide de force la value

$(this).focus(function(){
if ($(this).val() == storedValue) 
{
$(this).val('');
}
});

Et maintenant on passe au blur (quand on quitte le champ sélectionné)
On récupère la value stockée, puis on vérifie que la value est vide (que l'utilisateur n'a pas entré de texte), dans le cas où le champ est vide, on restore la value stockée.

$(this).blur(function(){
var restoredValue = $(this).data("value").datavalue;

if ($(this).val() == '') 
{
$(this).val(restoredValue);
}
});
})
}

Et voilà, c'est assez simple et après plusieurs tests ça me semble assez bien fonctionner. Surtout qu'on ne rajoute aucuns éléments html et que le script fonctionne sur tous les input désigné par la class css choisie.

le code complet  :

function initFormsInputs()

{

$("input.text").each(function(){

var storedValue = $(this).attr("value");

$(this).data("value", { datavalue : storedValue });

$(this).focus(function(){

if ($(this).val() == storedValue) 

{

$(this).val('');

}

});

$(this).blur(function(){

var restoredValue = $(this).data("value").datavalue;

if ($(this).val() == '') 

{

$(this).val(restoredValue);

}

});

})

}

Allez, bonne nuit !

Edit : avec un retour de mon collègue Olivier on peut retrouver sur jsfiddle le code fonctionnel avec une petite modification et une autre technique utilisant la balise title :

http://jsfiddle.net/oilvier/vNdD7/

soucis de Formulaires dans Chrome et Safari ?

Lorsqu'un designer ou un client un peu pointilleux vient vous chatouiller sur les formulaires dans chrome ou safari, avant de l'envoyer sur les roses, il y a deux petites choses

Pour supprimer l'affichage de la bordure jaune (dans chrome) ou bleue (dans safari) qui apparaît lors du focus il suffit d'ajouter en css un outline:none; sur le champ incriminé.

De la même façon Chrome (uniquement) enregistre parfois des logins et mot de passe dans le navigateur qu'il réutilise automatiquement sur des champs login et mot de passe. Sauf qu'il y ajoute un superbe fond jaune très disgracieux et qui est souvent très différent de la charte du site.
Mais grâce à un astucieux code jquery (il y a un équivalent mootools que j'ajouterais rapidement) on peut
empêcher l'affichage de ce fond.


if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
$(window).load(function(){
$('input:-webkit-autofill').each(function(){
var text = $(this).val();
var name = $(this).attr('name');
$(this).after(this.outerHTML).remove();
$('input[name=' + name + ']').val(text);
});
});
}

C'est tout pour aujourd'hui.

jquery Nivo Slider memory trick

Quand on cherche un chouette slider jquery avec des images et des liens, Nivo arrive vite sur le haut du panier.

http://nivo.dev7studios.com/

Et c'est un slider vraiment intéressant, avec des effets sympas et un fonctionnement assez simple.
Sauf que quand on en charge plusieurs sur la page ça devient vite un peu lourd.

Alors avec jquery il y a une feinte sympa pour éviter de charger inutilement le navigateur avec le slider nivo qui tourne en tâche de fond, il suffit d'ajouter deux petites fonctions dans l'appel du slider :

$(window).blur(function() {
             $('#nivo').data('nivoslider').stop();
});
$(window).focus(function() {
                $('#nivo').data('nivoslider').start();
});

La première ligne permet de stopper le slider quand on quitte la fenêtre (retour sur windows ou changement de tab).
Et la seconde le relance quand on revient sur le site.

Voilà et ça fonctionne avec presque tous les scripts. Au final c'est simple et plutôt user-friendly (la ram de nos bécanes vous remerciera.

Une liste en élément flottant

Quand on fait une liste (de produits, de news, ou autre) avec des blocs flottants SOUVENT il y a des petits soucis quand on passe à la ligne. (un bloc qui veut pas s'aligner par exemple)
A part en fixant la hauteur des blocs en général c'est la galère.


Alors qu'avec une ligne de js on peut résoudre le problème (ici pour des lignes de 3 éléments flottants) :


On récupère la liste puis on applique un clear: both; sur le 4e élément flottant.
Cet élément revient dans le flux html et il n'y aura pas de saut de bloc sur la ligne suivante.


en jquery: 
$('#list-search > li:nth-child(3n+1)').css('clear','both');


en mootools
$$('#list-search > li:nth-child(3n+1)').setStyle('clear','both');


Après trois éléments flottant (une ligne), on remet l'élément suivant dans le flux et on repart sur une autre ligne.