jQuery – DesireLabs

En attendant Noël, je vous offre un calendier de l’Avent 2.0

Franck — Tue, 01 Dec 2015 21:43:34 +0000

Chaque année je me dis que je vais faire des cartes de vœux à envoyer à mes proches, mes amis, ma famille, connaissances, partenaires. Et bien sûr je ne le fais jamais. Cette année, j’offre donc à toutes et tous un calendrier de l’Avent interactif. Vous pourrez chaque jour accéder à une surprise supplémentaire Les cartes déjà découvertes resteront affichées tant que vous ne viderez pas votre cache navigateur.

Cliquez ici pour accéder au calendrier.

Joyeuses fêtes

L’article En attendant Noël, je vous offre un calendier de l’Avent 2.0 est apparu en premier sur DesireLabs.

jQuery Ajax, setInterval() et Internet Explorer

Franck — Wed, 08 Oct 2014 21:41:45 +0000

Mes requêtes ajax ne passent pas sous IE alors qu’avec Firefox et Chrome aucun problème. Ce genre de cas de figure, lorsqu’on y est confronté peut devenir un vrai casse tête… quand on ne sait pas où chercher.

Récemment j’ai travaillé sur un projet de taille dans lequel étaient générées des requêtes ajax, en boucle tant que la réponse n’était pas celle attendue. Grossomodo, ça ressemblait à ça :

// Mon timer qui lance la requete ajax toutes les secondes
var timer = setInterval(function(){
    request()
}, 1000);

// Tant que la response n'est pas success, on recommence
function request() {
    $.ajax({
        url,
        data,
        success: function(response) {
            if(response === 'success')
                clearInterval(timer);
        }
    });
}

Sauf que setInterval() s’exécute toutes les secondes, peu importe que la requête ait aboutie ou pas. Traduction, si la requête met plus d’une seconde à s’exécuter, mon timer s’exécutera quand même, et donc on aura des requêtes multiples. Et ça, bah IE, il aime pas.

En réalité dans ce genre de cas, c’est setTimout() qu’il faut utiliser en lieu et place de setInterval().

// Mon timer qui lance la requete ajax toutes les secondes
var timer = setTimeout(function(){
    request()
}, 1000);

A la difference de setInterval(), setTimeout() ne s’exécute qu’une fois que la requête a retourné une réponse. Du coup l’interval entre les requêtes peut varier, en fonction de la vitesse à laquelle les réponses sont renvoyées, mais au moins pas de risque de voir des requêtes croisées, et hop ! plus de caca nerveux de IE.

Alors bon, j’ai quand même bien sué pour débugguer ~~cette bouse~~ ce casse tête mais c’était une super expérience et une réelle satisfaction

Au passage, ce qui m’a mis sur la voie ce sont les requêtes dans la partie Network de la console de Firefox/Chrome (parce que celle d’iE, merci…)

hope this’ll help

L’article jQuery Ajax, setInterval() et Internet Explorer est apparu en premier sur DesireLabs.

Astuce – Faire fonctionner dailymotion avec prettyphoto

Franck — Wed, 10 Sep 2014 14:59:56 +0000

Je n’aime pas beaucoup prettyphoto, si vous avez lu l’article précédent, vous connaissez déjà où va ma préférence Cependant, quand on travaille avec des thèmes WordPress qu’on n’a pas soi même développés, bah des fois, on n’a pas le choix. Et si en plus les-dits thèmes ont été développés par des personnes non francophones(philes ?), vous devinerez aisément qu’ils supportent rarement (jamais) les services comme dailymotion. Alors le combo prettyphoto + dailymotion, c’est le calvaire assuré. Alors voici la solution :Pour faire fonctionner dailymotion avec prettyphoto, c’est tout bête en fait. Il suffit de récupérer ou construite le lien comme suit :

www.dailymotion.com/embed/video/id_video

en remplaçant « id_video » par le vrai id, puis de lui adjoindre quelques paramètres pour préciser le format à renvoyer :

?iframe=true&width=720&height=480

Ce qui nous donne :

www.dailymotion.com/embed/video/id_video?iframe=true&width=720&height=480

Voilà, on a le lien complet avec la taille à utiliser (là, c’est à vous de voir), il suffit à présent de créer la balise prettyphoto qui va bien en modifiant l’attribut rel (ou data-rel) avec « prettyphoto[iframes] » :

J’ai un peu suer pour trouver mes petits donc si vous aussi, n’hésitez pas à partager l’astuce

L’article Astuce – Faire fonctionner dailymotion avec prettyphoto est apparu en premier sur DesireLabs.

Au moins une raison possible au fait que fancybox ne s’exécute qu’au second click

Franck — Wed, 10 Sep 2014 09:07:48 +0000

Je vais parler aujourd’hui d’une petite aventure qui m’est arrivée avec fancybox. Pour les besoins d’un projet WordPress utilisant le plugin Team, j’avais pour mission de masquer les éléments affichés sauf la photo, puis d’afficher ces éléments dans une fancybox au click sur la photo. Problème : fancybox ne s’exécute qu’au second click. Et il y a une raison à celà !Voici la partie html :


    
        
            
        
    
            Jane Do
        

        Project manager
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        
            
                Email me

Le but du jeu est de masquer par exemple la balise

pour ensuite l’injecter lors du clic sur le nom (

) dans une fancybox.

La démarche me semblait simple :

créer un click event
récupérer le contenu dans une variable à ce moment là
le passer en valeur de « content » dans fancybox

Voici le code js :

// Team View 
$ = jQuery.noConflict();
$(document).ready(function () {
    var teamBox = $('.ns-bp-team-box');
    // hide contents
    var contents = teamBox.find($('.ns-bp-team-box-inner p')).hide();
    // fancybox - on click on the name, fancybox appears with the p content text
    $('.fancybox').on('click', function(e){
        var content = $(this).parent().parent().find($('p')).text();
        $(this).fancybox({
            content: content,
            padding : 20,
            maxWidth : '600px',
            maxHeigh : '800px'
        });
    });
});

Voici le jsFiddle

Erreur : obligé de cliquer 2x pour faire apparaitre la fancybox.

En réalité ce qui se passe, c’est que lorsqu’on attache l’event click, on se contente de binder le lien .fancybox, mais aucun trigger event n’est initialisé.
Ce qu’il faut faire, c’est chaîner le .fancybox() directement après l’event click.

Voici la partie html à nouveau avec un href qui pointe vers une div vide et masquée :


    
        
            
        
    
            Jane Do
        

        Project manager
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        
            
                Email me

et le js corrigé :

// Team View 
$ = jQuery.noConflict();
$(document).ready(function () {
    var teamBox = $('.ns-bp-team-box');
    var content;
    var target = $('#target');
    // hide contents
    var contents = $(this).find($('.ns-bp-team-box-inner p')).hide();
    // Binds .fancybox to fancybox THEN trigger it right after
    $('.fancybox').on('click', function (e) {
        e.preventDefault();
        // Get content and had it to the #target div
        content = $(this).parent().parent().find($('p')).text();
        target.html(content);
    }).fancybox({ // trigger fancybox
        content: target,
        padding: 20,
        maxWidth: '600px',
        maxHeigh: '800px',
        afterClose: function () {
            // empty the #target
            target.html();
        }
    });
});

Et le jsFiddle

Voilà, c’est tout. Celà fait partie de ces subtilités inhérentes au javascript. Hope this’ll help

L’article Au moins une raison possible au fait que fancybox ne s’exécute qu’au second click est apparu en premier sur DesireLabs.