11521 sujets

JavaScript, DOM et API Web HTML5

Modification de css par jQuery qui persiste au clic sur précédente

Bonjour à tous,

Je rencontre un soucis sur un site que je suis en train d'intégrer. Pour résumer, je souhaite créer une transition lors du changement de page.

Le code se présente comme ça :

<body>
    <div id="colorEffect"></div>
    <a class="lien1">lien 1</a>
    <a class="lien1">lien 2</a>
    <a class="lien1">lien 3</a>
</body>




#colorEffect {
    display: none;
    position: fixed;
    width: 100%;
    height: 100vh;
    z-index: 999999999;
}




    $('.lien1').click(function () {
        $('#colorEffect').css('background-color', '#f8af2f');
        $('#colorEffect').fadeIn(500);
    });
    $('.lien2').click(function () {
        $('#colorEffect').css('background-color', '#01c6ff');
        $('#colorEffect').fadeIn(500);
    });
    $('.lien3').click(function () {
        $('#colorEffect').css('background-color', '#c1dac8');
        $('#colorEffect').fadeIn(500);
    });

//Je retarde l'ouverture des liens de 500ms avec le code suivant
$('.delay').click(function(e) {
    var anchor = $(this), h;
    h = anchor.attr('href');
    e.preventDefault();
    anchor.animate({'opacity' : 0}, 500, function() {
        window.location = h;
    });
});


La transition en elle même fonctionne très bien. Le problème est que sur Firefox et Safari, lorsque l'on revient sur la page précédente (via le bouton précédent du navigateur par exemple), la div #colorEffect ne repasse pas en display:none;. Elle reste donc apparente par dessus tout le reste. Il faut actualiser la page pour régler le problème. Si on revient à la page précédente via un lien du menu par contre pas de problème.
Ce problème n'apparait pas sur Chrome...

Donc ma question est la suivante. Comment empêcher cet effet indésirable ?

Merci,
Léo
Modifié par leos (31 Oct 2017 - 09:27)
leos a écrit :
Le problème est que sur Firefox et Safari, lorsque l'on revient sur la page précédente (via le bouton précédent du navigateur par exemple), la div #colorEffect ne repasse pas en display:none;.


c'est le but du bouton précédent hein, revenir en "arrière", dans l'état d'avant quoi.

tu peux rajouter une condition mais il faut passer par un librairie history.js
exemple.

jQuery(document).ready(function($) {

  if (window.history && window.history.pushState) {

    window.history.pushState('forward', null, './#forward');

    $(window).on('popstate', function() {
      alert('Back button was pressed.');
    });

  }
});

Modifié par JENCAL (31 Oct 2017 - 10:24)
Merci pour ta réponse,

Oui je sais que c'est le but du bouton retour en arrière mais ça m'étonne que Chrome ne réagisse pas de la même manière que les autres...

Je note l'idée de la condition. En attendant j'ai trouvé une solution un peu crado mais qui fonctionne :


    $('.link1').click(function () {
        $('#colorEffect').css('background-color', '#f8af2f');
        $('#colorEffect').fadeIn(500);
        setTimeout(function(){
            $('#colorEffect').fadeOut();}, 500);
    });


Mais ça ressemble plus à un cache misère qu'une vraie solution Smiley confus
Sujet clos
Aller à