Demande de conseils Velocity.js

Fermé
flo39400 Messages postés 596 Date d'inscription mardi 8 avril 2008 Statut Membre Dernière intervention 9 septembre 2021 - 23 sept. 2017 à 16:56
 cyrano - 30 sept. 2017 à 08:50
Bonjour, voila je débute en javascript et je travail sur des fenêtres qui apparait et disparaît quand on clique sur un autre lien ou en dehors du cadre .

Donc avec deux cadres a afficher ça vas aucun bug a déclarer sauf via Safarie qui a du mal a afficher ce qu'il y a dans le cadre.

Sinon avec d'autre navigateurs ça vas, cela est fluide.

Mais avec un autre élément cela ne fonctionne pas du tout comme prévu, bug de déploiement des cadres, bug a l'affichage et au masquage de l'élément.

Voici le code js:

(function($){
    
    $divs_co = $('.box_co, .box-title, input, p');
    $divs_ins = $('.box_ins, .box-title, input, p');
    $divs_news = $('.box_news, .box-title, input, p');

   /* Ouverture de la fenetre*/
        $('.co').click(function(e){
        e.preventDefault();
        e.stopPropagation();
        $divs_co.hide().velocity('transition.flipXIn', { duration: 300, stagger: 500});
    });
    /* fermeture fenetre */
    $('.ins').click(function(e){
        e.preventDefault();
        $divs_co.hide();
    });
/* fermeture si clique en dehors de la fenetre */
    $('.box-overlay').click(function(e){
        e.preventDefault();
        $divs_co.velocity('transition.flipXOut', { duration: 500});
    });
/* On stop la propagation */
   $('.box_co').click(function(e){
       e.stopPropagation();
   });


    

    $('.ins').click(function(e){
        e.preventDefault();
        e.stopPropagation();
        $divs_ins.hide().velocity('transition.flipXIn', { duration: 300, stagger: 500});
    });
     $('.co').click(function(e){
        e.preventDefault();
        $divs_ins.hide();
    });
    
    $('.box-overlay').click(function(e){
        e.preventDefault();
        $divs_ins.velocity('transition.flipXOut', { duration: 500});
    });
     $('.box_ins').click(function(e){
       e.stopPropagation();
   });

    
    
   /* $('.news').click(function(e){
        e.preventDefault();
        e.stopPropagation();
        $divs_news.hide().velocity('transition.flipXIn', { duration: 500, stagger: 500});
    });
    $('.box_news').click(function(e){
        e.stopPropagation();
    });
     $('.box-overlay').click(function(e){
        e.preventDefault();
        $divs_news.velocity('transition.flipXOut', { duration: 500});
    });*/
    
    
    
    
})(jQuery);



Merci de votre aide :)

1 réponse

Yo,
Vous avez essayez Modernizr? Sinon possible de faire soi même son propre polyfil.

Plutôt compliqué de commencer JavaScript en utilisant direct des libraires / framework je suppose.
En ecma6(norme actuelle) sans avoir recours aux bibliothèques de ce genre il y a déjà un paquet de possibilités, à tel point que IBM l'a même indiqué comme meilleur langage du monde.
Je dirais pas autant mais c'est sûr que JavaScript en a fait du chemin depuis le temps où il servait à faire (moins bien) ce qu'a fait le CSS à son apparition.

Quant à velocity j'attaque en ce moment. Sinon vous pouvez tester avec GSap aussi qui l'intègre mais avec un framework plus gros et complet(lourd mais repèrera le bug). La licence devient payante pour certaines fonctionnalités je crois aussi.
0
Modernizr est censé rendre compatible au max les différents navigateurs(dans le sens il va intégrer toutes les fonctions récentes pour les ajouter quand elles manquent). C'est un simple fichier .js à intégrer, voir directement sur leur site.
0