Comment éviter les flashes [Résolu]

chabinot 110 Messages postés mardi 10 novembre 2015Date d'inscription 14 janvier 2018 Dernière intervention - 24 sept. 2017 à 11:05 - Dernière réponse : chabinot 110 Messages postés mardi 10 novembre 2015Date d'inscription 14 janvier 2018 Dernière intervention
- 24 sept. 2017 à 14:11
Bonjour,
J'ai un script jQuery qui affiche ou cache certains éléments selon tel cas.
Voici le script :
$(function() {
    today = new Date();
    d = today.getDate();
    m = today.getMonth() + 1;
    y = today.getFullYear();
    d = d < 10 ? '0' + d : d;
    m = m < 10 ? '0' + m : m;
    today = y + m + d;
    dref = y + '0630';
    if (today <= dref) {
        $('#sem2').hide(200);
    } else {
        $('#sem1').hide(200);
    }
    $('#feries').hide(200);
    $('#sema').on("click", function() {
        $('#sem2').hide(200);
        $('#feries').hide(200);
        $('#sem1').show(200);
    });
    $('#semb').on("click", function() {
        $('#sem1').hide(200);
        $('#feries').hide(200);
        $('#sem2').show(200);
    });
    $('#fera').on("click", function() {
        $('#sem1').hide(200);
        $('#sem2').hide(200);
        $('#feries').show(200);
    });
    $('ul.men1 li').on('click', function() {
        $(this).parent().find('li.active').removeClass('active');
        $(this).addClass('active');
    });
});

Quand j'ouvre la page web, il ne peut pas s'empêcher d'ouvrir tout avec un effet de flashe avant d'afficher la page voulue.
J'ai mis un délai court au hide et show, mais en vain.
Si quelqu'un a une idée, je lui serais très reconnaissant.
Je continue à chercher sur internet.

Cordialement,
Afficher la suite 

1 réponse

Répondre au sujet
chabinot 110 Messages postés mardi 10 novembre 2015Date d'inscription 14 janvier 2018 Dernière intervention - 24 sept. 2017 à 14:11
0
Utile
Bonjour à tous,
Finalement, j'ai trouvé, il ne fallait pas utiliser hide et show, mais jouer avec le CSS. Dans le CSS, je mets tout à display: none; et dans le jQuery, je les mets soit à none, soit à block.
Voici le nouveau script :
$(function() {
    today = new Date();
    d = today.getDate();
    m = today.getMonth() + 1;
    y = today.getFullYear();
    d = d < 10 ? '0' + d : d;
    m = m < 10 ? '0' + m : m;
    today = y + m + d;
    dref = y + '0630';
    if (today <= dref) {
        $('#sem1').css("display", "block");
    } else {
        $('#sem2').css("display", "block");
    }
    $('#sema').on("click", function() {
        $('#sem1').css("display", "block");
        $('#sem2').css("display", "none");
        $('#feries').css("display", "none");
    });
    $('#semb').on("click", function() {
        $('#sem1').css("display", "none");
        $('#sem2').css("display", "block");
        $('#feries').css("display", "none");
    });
    $('#fera').on("click", function() {
        $('#sem1').css("display", "none");
        $('#sem2').css("display", "none");
        $('#feries').css("display", "block");
    });
    $('ul.men1 li').on('click', function() {
        $(this).parent().find('li.active').removeClass('active');
        $(this).addClass('active');
    });
});

Cela marche comme je le souhaitais

Merci encore pour votre coopération,
Cordialement,
Commenter la réponse de chabinot