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

3 participants

Page 2 sur 2 Précédent  1, 2

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Changer au clic la couleur de fond de la destination de l'ancre

Message par alv Mar 10 Juin 2014 - 17:11

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

alv
Membre habitué

Messages : 1539
Inscrit(e) le : 09/07/2012

https://www.forumpeuplevert.com
alv a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer au clic la couleur de fond de la destination de l'ancre

Message par alv Mer 2 Juil 2014 - 18:14

Up
alv

alv
Membre habitué

Messages : 1539
Inscrit(e) le : 09/07/2012

https://www.forumpeuplevert.com
alv a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer au clic la couleur de fond de la destination de l'ancre

Message par Ea Jeu 3 Juil 2014 - 8:14

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.
Ea

Ea
Aidactif
Aidactif

Messages : 23583
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer au clic la couleur de fond de la destination de l'ancre

Message par alv Dim 6 Juil 2014 - 10:56

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.
alv

alv
Membre habitué

Messages : 1539
Inscrit(e) le : 09/07/2012

https://www.forumpeuplevert.com
alv a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer au clic la couleur de fond de la destination de l'ancre

Message par Ea Dim 6 Juil 2014 - 11:21

- 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.
Ea

Ea
Aidactif
Aidactif

Messages : 23583
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer au clic la couleur de fond de la destination de l'ancre

Message par alv Dim 6 Juil 2014 - 12:34

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 :
Changer au clic la couleur de fond de la destination de l'ancre - Page 2 1404643574-image
alv

alv
Membre habitué

Messages : 1539
Inscrit(e) le : 09/07/2012

https://www.forumpeuplevert.com
alv a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer au clic la couleur de fond de la destination de l'ancre

Message par Ea Dim 6 Juil 2014 - 13:47

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.

Ea

Ea
Aidactif
Aidactif

Messages : 23583
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer au clic la couleur de fond de la destination de l'ancre

Message par alv Dim 6 Juil 2014 - 15:33

Merci beaucoup pour toutes ces précisions Very Happy

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

alv
Membre habitué

Messages : 1539
Inscrit(e) le : 09/07/2012

https://www.forumpeuplevert.com
alv a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer au clic la couleur de fond de la destination de l'ancre

Message par alv Lun 7 Juil 2014 - 18:35

Up Very Happy
alv

alv
Membre habitué

Messages : 1539
Inscrit(e) le : 09/07/2012

https://www.forumpeuplevert.com
alv a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer au clic la couleur de fond de la destination de l'ancre

Message par Ea Lun 7 Juil 2014 - 18:45

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.
Ea

Ea
Aidactif
Aidactif

Messages : 23583
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer au clic la couleur de fond de la destination de l'ancre

Message par alv Lun 7 Juil 2014 - 19:07

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.
résolu
alv

alv
Membre habitué

Messages : 1539
Inscrit(e) le : 09/07/2012

https://www.forumpeuplevert.com
alv a été remercié(e) par l'auteur de ce sujet.

Page 2 sur 2 Précédent  1, 2

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum