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

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 le 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
# Tropactif #

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

http://urlz.fr/2OYC
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 le Mer 2 Juil 2014 - 18:14

Up

alv
# Tropactif #

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

http://urlz.fr/2OYC
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 le 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
Aidactif
Aidactif

Messages : 23417
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 le 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
# Tropactif #

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

http://urlz.fr/2OYC
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 le 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
Aidactif
Aidactif

Messages : 23417
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 le 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 :

alv
# Tropactif #

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

http://urlz.fr/2OYC
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 le 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
Aidactif
Aidactif

Messages : 23417
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 le 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
# Tropactif #

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

http://urlz.fr/2OYC
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 le Lun 7 Juil 2014 - 18:35

Up Very Happy

alv
# Tropactif #

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

http://urlz.fr/2OYC
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 le Lun 7 Juil 2014 - 18:45

Sur google chrome ça fonctionne : http://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
Aidactif
Aidactif

Messages : 23417
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 le 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
# Tropactif #

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

http://urlz.fr/2OYC
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


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