Message d'avertissement

The subscription service is currently unavailable. Please try again later.

Lien retour haut de page affiché selon conditions

Information importante

En raison d'un grand nombre d'inscriptions de spammers sur notre site, polluant sans relache notre forum, nous suspendons la création de compte via le formulaire de "sign up".

Il est néanmoins toujours possible de devenir adhérent•e en faisant la demande sur cette page, rubrique "Inscription" : https://www.drupal.fr/contact


De plus, le forum est désormais "interdit en écriture". Il n'est plus autorisé d'y écrire un sujet/billet/commentaire.

Pour contacter la communauté, merci de rejoindre le slack "drupalfrance".

Si vous voulez contacter le bureau de l'association, utilisez le formulaire disponible ici, ou envoyez-nous un DM sur twitter.

Bonjour,

je voudrais insérer dans mon .tpl un lien retour haut de page mais qui ne s'afficherai que si cela est utile, pour cela je pense qu'il faut récupérer la hauteur de l'écran en pixel et comparer avec la longueur de la page à afficher...si cela dépasse le lien s'affiche, sinon la page reste en l'état...

voila pour la théorie car en pratique je ne sais pas coder en php...donc si quelqu'un à deja fait cela ou peut m'aider..

merci

Forum : 
Version de Drupal : 

ça tombe bien que tu ne saches pas faire ça en php parce qu'il va falloir le faire en javascript ^^

je passe tout ce qui concerne l'ajout de ton lien "retour en haut de page"

sur ce bouton il faut que tu fasses un script javascript dans le genre :

$(document).ready(function(){

var position = $(".LaClassDeTonLien").offset();
if(position.top > 1000){
$("#header").focus();
}
}
// offset() va te stocker les valeurs 'top' et 'left' de ton élément en absolut par rapport au haut et à la gauche de ta fenêtre
Ensuite tu check si la valeur 'top' est supérieur à une valeur que tu choisiras, en pixel (1000 dans mon exemple)
si c'est le cas tu fais un focus sur un élément en haut de page là le header car il y a de forte chance que cela te positionne en haut de ta page (c'est un exemple)

a force de voir du php partout je ne pense plus aux autres...bref voici mon adaptaition mais ya des problemes je pense..le JS ne m'atant pas plus familié que le php..

  <!-- retour haut selon resolution de l'ecran -->
       <script>
        $(document).ready(function(){
        var position = $(".retour_haut").offset(); if(position.top > 1024){ $("#general").focus(); } }
        //offset()
          </script>
       <a href="#general" class="retour_haut">Haut de page</a>

le lien ne prend pas le style css, bizarre, et surtout il est affiché quelque soit la longueur du contenu..

oula oui je t'ai marqué n'importe quoi j'ai pas suivit le fil de ma pensée je la refait

$(document).ready(function(){
var position = $(".retour_haut").offset();
if(position.top > 1024){
$(".retour_haut").show();
}

$("#general").click(function(){
$("#general").focus();
});
}

voila c'est plutôt ça ^^ donc je reprends : tu définis ton bouton en "display: none" dans son css. Si ton bouton est assez bas sur la page il va passer en display block ( $(".retour_haut").show() )
ensuite tu ajoute une action sur ton bouton de retour en haut : en gros quand tu cliques dessus il va focus ton élément voila ca devrait mieux marcher ^^

si ça marche je te recommande d'indenté ton code !! chaque ligne non indenté fait mourrir un bébé phoque ...

bon j'ai un souci, car le texte du lien ,ne prend pas la css, et il s'affiche quoiqu'il arrive..

   <script type="text/javascript">
          $(document).ready(function()
          { var position = $(".retour_haut").offset();
              if(position.top > 2000){ $("#retour_haut").show(); } $("#general").click(function(){ $("#general").focus(); });
          }
          </script>

je peux mettre le code js dans ma page html ? pas besoin de le mettre dans le ? j'ai essayé avec des id mais ca change rien...

Alors il te suffit de créer un fichier .js par exemple general.js que tu met dans ton thème, puis dans le fichier montheme.info tu rajoute scripts[] = general.js et tu fait un clear cache.

Après cela il te suffit de crée un lien sur page.tpl.php par exemple :

<a href="#" id="go_top">Aller en haut de page</a>

Un petit style dans ton fichier css :

a#go_top {
  bottom:20px;
  display:none;
  position:fixed;
  right:20px;
}

Et tu rajoute ce code dans ton fichier general.js :

Drupal.behaviors.goTop = function(context) {
  var link = $('#go_top', context);
 
  $(window).scroll(function(){
    if ($(window).scrollTop() >= 250) { // Si la page est descendue de 250px.
      link.fadeIn(500); // On fait un fadeIn pendant 500ms.
    } else {
      link.fadeOut(500); // On est au dessus de 250 donc fadeOut pendant 500ms.
    }
  });
 
  link.click(function(e) {
    e.preventDefault; // Lors d'un click on empêche le navigateur de rafraichir
    $.scrollTo(); // Et on va en haut de page.
  });
}

en voulant améliorer ceci, je voudrais y ajouter un scroll doux 'smooth scroll', et j'ai vu un exemple sur ce site : http://www.learningjquery.com/2007/08/animated-scrolling-for-same-page-l... qui est juste ce que ej veux, sauf qu'il faut mixer les deux car actuellement ça ne marche pas,l'ancre s'affiche mais le scroll est toujours dur...voici le code :

$(document).ready(function() {
$('a[href*=#]').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
            && location.hostname == this.hostname) {
            var $target = $(this.hash);
            $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
            if ($target.length) {
                $target.ScrollTo(400);
                return false;
            }
        };
    });
});

il y a 2 fois scrollTo et cela cause une erreur avec firebug qui dit que ce n'est pas une fonction...si un expert passe par la..

merci

voici quelque chose qui semble fonctionner:

Drupal.behaviors.goTop = function(context) {
  var link = $('#retour_haut', context);

  $(window).scroll(function(){
    if ($(window).scrollTop() >= 250) { // Si la page est descendue de 250px.
      link.fadeIn(500); // On fait un fadeIn pendant 500ms.
    } else {
      link.fadeOut(500); // On est au dessus de 250 donc fadeOut pendant 500ms.
    }
  });

  link.click(function(e) {
    e.preventDefault; // Lors d'un click on empêche le navigateur de rafraichir
    //$.scrollTo(400); // Et on va en haut de page.
    $('html,body').animate({scrollTop:0},'slow');
  });
}

si quelqu'un voit une meilleure solution je suis preneur :)