11499 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous/toutes !

J'ai mis mon portfolio en ligne, un peu dans l'urgence par ici. Bien entendu, il y a encore quelques détails à régler, et principalement un gros souci de jQuery qui me résiste depuis des jours Smiley lol

Je m'explique.

Tout d'abord, j'ai l'impression que le smooth scroll de navigation n'est absolument pas fluide. Parfois il bloque, parfois j'ai l'impression qu'il fait un peu ce qu'il veut avant de scroller au bon endroit.

Le système est assez similaire pour l'accordéon, et c'est là que ca devient moche et flagrant. Essayez de déployer un projet, puis de déployer celui d'en dessous : la page remonte avant de redescendre au bon endroit. Forcément : le projet du dessus se referme, la page est donc moins longue avant le déploiement du deuxième projet.

Mon deuxième souci (qui n'est pas présent sur le site pour éviter que ce soit trop moche) est que je n'arrive pas à remplacer le contenu du bouton "en savoir plus" par "masquer" lorsque le projet est déployé et vice versa. J'ai essayé les méthodes text() et html() mais rien n'y fait.

Vous pouvez accéder au code complet sur Github (js/application.js).

Je colle aussi le Jquery ici au cas où.

(function (window, undefined) {
    "use strict";

    var $ = jQuery.noConflict();

    $(document).ready(function() {
        $('.accordeon').hide();

        // Au clic sur les liens à ancre (navigation pricipale)
        $('a[href^="#"]').on('click', function (event) {
            var the_id;

            // Because this is relative link
            the_id = $(this).attr("href");

            // Déclenche la fonction animate()
            $('html, body').animate({  
                scrollTop: $(the_id).offset().top  
            }, 1000); 

        }); 

        // Au clic sur les éléments de classe .details (boutons)
        $('.details').on('click', function (event) {
            var the_id, accordion;

            the_id    = $(this).attr("href"),
            accordion = $(this).parents('.project').children('.accordeon');

            // Close all accordions
            $('.accordeon').slideUp();

            // If current accordion is opened, return
            if (accordion.is(":visible")) { 
                return false; 
            }

            // If current accordion is closed, we open it
            accordion.slideDown(400, function () {

                // Déclenche la fonction animate()
                $('html, body').animate({  
                    scrollTop: $(this).parents('.project').offset().top-$('#nav-header').height()
                }, 'slow');             
            }); 
        });
    });

}(jQuery));


Merci d'avance à tous ceux qui pourront me venir en aide Smiley smile
essai de mettre ca pour le scroll sur en savoir plus :


// Déclenche la fonction animate()
                $('html, body').animate({  
                    scrollTop: $(this).next('.accordeon').offset().top-$('#nav-header').height()
                }, 'slow');             
            }); 
Je ne savais pas trop de quelle fonction animate tu parlais (menu ou accordéon ?) donc j'ai essayé les deux. En ce qui concerne le menu, toujours la même chose, pour l'accordéon, renvoie undefined Smiley ohwell