Changer au clic la couleur de fond de la destination de l'ancre

[alv]

Rappel du premier message :

Bonjour,
Un lien comme ceci :

Code:

<a href="#ancre">Ancre</a>

Un template index_box comme ceci :

Code:

......
<table>
   <tr class="categorie">
      <td>
         ......
         <div class="forumlink" style="width: 560px">
            <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
         </div>
         ......
      </td>
   </tr>
</table>
......

Un forum qui a pour nom :

Code:

<span id="ancre">Lien</a>

Je souhaiterais que quand on clique sur le lien "ancre", que ça descende sur l'ancre et qu'en plus, le <tr class="categorie"> du forum concerné soit en couleur de fond rouge, par exemple, pendant 1 seconde et qu'après ça redevienne en couleur de fond normal. Avec une transition dans le changement de couleur de fond.
Comment faire ceci ?
Merci d'avance.

[alv]

Up

[Ea]

Je pense que j'ai trouvé la source du problème. C'était une bêtise mais il m'a fallu du temps pour la voir.

Il faudrait remplacer le javascript par :

Code:

$(function(){
  var f= function(){
    var o = $(window.location.hash).closest('table').find('tr.categorie').addClass("moved-to-anchor");
    setTimeout(function(){ o.removeClass('moved-to-anchor') }, 2000);
  };
  $(window).on('hashchange', f);
  f();
});

Cordialement.

[alv]

Bonjour,
J'ai constaté ceci en testant :
- Au clic, ce sont tous les forums de la catégorie qui deviennent rouge et pas le forum en question.
- Au clic depuis une autre page que l'index, l'animation de 2 secondes ne s'effectue pas.

[Ea]

- Au clic, ce sont tous les forums de la catégorie qui deviennent rouge et pas le forum en question.

dans le premier post, on parlait d'agir sur <tr class="categorie">, si il faut agir sur <td class="section"> le code js deviendrait :

Code:

$(function(){
  var f= function(){
    var o = $(window.location.hash).closest('td.section').addClass("moved-to-anchor");
    setTimeout(function(){ o.removeClass('moved-to-anchor') }, 2000);
  };
  $(window).on('hashchange', f);
  f();
});

et le code css :

Code:

td.section {
  -webkit-transition: background-color 500ms linear;
  -moz-transition: background-color 500ms linear;
  -o-transition: background-color 500ms linear;
  transition: background-color 500ms linear;
}
 
.section.moved-to-anchor {
  background-color: blue;
}

- Au clic depuis une autre page que l'index, l'animation de 2 secondes ne s'effectue pas.

Le code est le même pour les deux cas ( si on vient d'une autre page ça devrait agir à l'affichage de la page ) donc c'est étrange. Mais si ce n'est pas en place je ne sais pas constater et voir pourquoi ça arrive.

Cordialement.

[alv]

Ce que je souhaite, c'est que la ligne entière soit d'une autre couleur, pas juste une cellule, ni tout le tableau.
J'ai réussi en modifiant le code comme ceci :

Code:

$(function(){
  var f= function(){
    var o = $(window.location.hash).closest('tr.categorie').addClass("moved-to-anchor");
    setTimeout(function(){ o.removeClass('moved-to-anchor') }, 2000);
  };
  $(window).on('hashchange', f);
  f();
});

Code:

tr.categorie {
  -webkit-transition: background-color 500ms linear;
  -moz-transition: background-color 500ms linear;
  -o-transition: background-color 500ms linear;
  transition: background-color 500ms linear;
}
 
.categorie.moved-to-anchor {
  background-color: blue;
}

Pour la transition qui ne fonctionne pas en cliquant sur le lien ancre depuis une autre page que l'index, ça doit être du au code qui s'exécute lors du chargement de la page. Est-il possible de faire en sorte que l'animation ne s'exécute qu'une fois la page chargée ?

Une autre question : est-il possible de faire que, quand on clique sur le lien ancre, ça descend dessus mais avec une "marge" de 200px, par exemple, en haut de l'ancre ? Voici une image explicative :

[Ea]

Pour la transition qui ne fonctionne pas en cliquant sur le lien ancre depuis une autre page que l'index, ça doit être du au code qui s'exécute lors du chargement de la page. Est-il possible de faire en sorte que l'animation ne s'exécute qu'une fois la page chargée ?

Pour le moment ça s'exécute une fois que le </html> est traité par le navigateur.

On pourrait soit mettre un retard, soit attendre que toute la page ( donc ce compris les images et iframes ) soit chargée. Ou bien on peut faire une combinaison des deux.

Pour la première façon, on peut remplacer f(); par :

Code:

setTimeout(f, 1000);

cela exécutera la fonction f après 1000 millisecondes ( donc 1 seconde ).

Pour le chargement une fois que la page est "entièrement" chargée, on peut mettre :

Code:

$( window ).load(f);

Pour un mélange des deux :

Code:

$(window).load(function(){ setTimeout(f, 1000); });

On attends que la page charge entièrement et puis encore 1 seconde après ça.

Une autre question : est-il possible de faire que, quand on clique sur le lien ancre, ça descend dessus mais avec une "marge" de 200px, par exemple, en haut de l'ancre ? Voici une image explicative :

On peut soit utiliser un "hack", c'est ce qui est utilisé sur forumactif quand la toolbar est activée, l'ancre est vide et grâce à du css est affichée X pixels plus haut qu'elle devrait, par exemple :

Code:

<span id="ANCREMISTERE" style="position: relative; top: -200px;"></span>ancre mystere est 200 pixels plus haut que ceci

à ce moment là c'est le navigateur qui ira de lui-même dessus.

Une autre façon ce serait de modifier :

Code:

  var f= function(){
    var o = $(window.location.hash).closest('tr.categorie').addClass("moved-to-anchor");
    setTimeout(function(){ o.removeClass('moved-to-anchor') }, 2000);
  };

en y ajoutant un code javascript pour remonter 200 pixels plus haut que l'on est :

Code:

  var f= function(){
    var o = $(window.location.hash).closest('tr.categorie').addClass("moved-to-anchor");
    if(o.length) $('body').scrollTop($('body').scrollTop()-200);
    setTimeout(function(){ o.removeClass('moved-to-anchor') }, 2000);
  };

Pour l'esprit du fun on pourrait également animer la montée :

Code:

var f= function(){
    var o = $(window.location.hash).closest('tr.categorie').addClass("moved-to-anchor");
    if(o.length) $('body').animate({scrollTop: $(window).scrollTop() - 200}, 500);
    setTimeout(function(){ o.removeClass('moved-to-anchor') }, 2000);
  };

cela prendra 500 millisecondes pour arriver 200 pixels plus haut.

Cordialement.

[alv]

Merci beaucoup pour toutes ces précisions

Malheureusement, le décalage de 200px ne s'applique pas. J'ai mis ceci :

Code:

$(function(){
   var f= function(){
      var o = $(window.location.hash).closest('tr.categorie').addClass("ancre");
      if(o.length) $('body').scrollTop($('body').scrollTop()-200);
      setTimeout(function(){ o.removeClass('ancre') }, 200);
   };
   $(window).on('hashchange', f);
   $(window).load(f);
});

CSS :

Code:

tr.categorie{
   -webkit-transition: background-color 200ms linear;
   -moz-transition: background-color 200ms linear;
   -o-transition: background-color 200ms linear;
   transition: background-color 200ms linear;
   }
.categorie.ancre{
   background-color: red;
   }

[alv]

Up

[Ea]

Sur google chrome ça fonctionne : https://i.imgur.com/lGyRJNP.png mais sur internet explorer ça n'a pas fonctionné pour mon essai.

Peut-être que les événements sont un peu différent sur d'autres navigateurs que google chrome et il faut mettre un retardement au déplacement de la scrollbar.

Par exemple en remplaçant :

Code:

if(o.length) $('body').scrollTop($('body').scrollTop()-200);

Par :

Code:

if(o.length) setTimeout(function(){$('body').scrollTop($('body').scrollTop()-200);}, 100);

Cordialement.

[alv]

Bonsoir,
Ca ne marche pas mieux sur Firefox.
C'est pas grave, je vais utiliser :

Code:

<span id="ANCREMISTERE" style="position: relative; top: -200px;"></span>ancre mystere est 200 pixels plus haut que ceci

Merci beaucoup pour votre aide.