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

[alv]

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

[alv]

Up

[alv]

Up svp

[-Tancrède-]

Je pense que tu aurais plus de succès dans la catégorie "problème avec un script", en CSS on peut changer la couleur d'un élément parent au clic sur un enfant, mais là ça ne fonctionnerait pas, donc je pense que ce sera du java script....

[alv]

Bonjour,
Merci de ta remarque.

[alv]

Up

[Ea]

Bonjour,


J'ai déplacé.

que ça descende sur l'ancre

Cela signifie bien comme avec les ancres habituelles : que la fenêtre défile afin que l'ancre en soit placée tout en haut ?

et qu'en plus, le <tr class="categorie"> du forum concerné

Donc j'imagine que le lien vers l'ancre et l'ancre se trouvent sur l'index, mais comment est-ce qu'on associe l'ancre à un forum donné ?

Cordialement.

[alv]

Bonsoir,

que ça descende sur l'ancre

Cela signifie bien comme avec les ancres habituelles : que la fenêtre défile afin que l'ancre en soit placée tout en haut ?

Exactement.

et qu'en plus, le <tr class="categorie"> du forum concerné

Donc j'imagine que le lien vers l'ancre et l'ancre se trouvent sur l'index

Le lien vers l'ancre sera dans toutes les pages par le template overall_header et l'ancre se trouvent sur l'index.

mais comment est-ce qu'on associe l'ancre à un forum donné ?

En nommant un forum comme ceci dans panneau d'administration > Général > Catégories et forums :

Code:

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

[Ea]

On pourrait ajouter ce code javascript :

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);
});

Le code ajoute pendant deux secondes ( 2000ms ) une classe "moved-to-anchor" à l'élément <tr class="categorie"> dans lequel se trouve l'élément avec :

Code:

id="partie après # dans l'url"

ensuite il suffit de jouer avec du CSS pour faire ce qu'on veut, par exemple :

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: red;
}

Cordialement.

[alv]

Bonjour,
Merci mais ça n'a pas marché. J'ai mis le code javascript dans "Gestion des codes Javascript" et sur toutes les pages.

[-Tancrède-]

Vous avez pensé a mettre le CSS aussi ?

[alv]

Bonjour,
Oui, je l'ai bien mis.

[-Tancrède-]

On ne sait jamais, ça arrive a tout le monde d'oublier un truc stupide ^^

[alv]

Up

[alv]

Up

[alv]

Up svp

[alv]

Up

[alv]

Up  

[alv]

Up svp

[alv]

Up

[Ea]

Il y a un endroit avec le script et le css en place où voir que ça ne fonctionne pas ?

Cordialement.

[alv]

Bonjour,
Le CSS est dans le template overall_footer_end

Le forum concerné est celui de mon profil (le lien est en bas à gauche : "Ligue 1")

[Ea]

si j'y vais à partir d'une autre page j'ai l'effet sur toute la catégorie ( http://cartonvert.forumloire.com/#ligue1 ) mais si je clique en étant déjà sur la page effectivement rien ne semble se paser

[alv]

Bonjour,
Ça fait pareil chez moi.

[alv]

Up

[alv]

Up

[alv]

Up

[alv]

Up svp

[alv]

Up