IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

HTML Discussion :

Bloquer scroll lors d'un clic sur un lien


Sujet :

HTML

  1. #1
    Futur Membre du Club
    Homme Profil pro
    Inscrit en
    Août 2011
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Côtes d'Armor (Bretagne)

    Informations forums :
    Inscription : Août 2011
    Messages : 6
    Points : 5
    Points
    5
    Par défaut Bloquer scroll lors d'un clic sur un lien
    Bonjour,

    J'ai un tableau relativement grand, dans lequel chaque cellule est clickable, mais je souhaiterais qu'après avoir cliqué, le tableau se repositionne au même endroit.

    En utilisant les ancres, ça ne fonctionne qu'à moitié car le tableau se repositionne avec l'ancre en haut de la page, et non exactement à l'endroit du lien.

    Un exemple du tableau

    test.html
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
     
    <table>
    <tr>
    <td><a id='1'><a href='test.html#1'>lien</a></td>
    <td><a id='2'><a href='test.html#2'>lien</a></td>
    <td><a id='3'><a href='test.html#3'>lien</a></td>
    ...
    </tr>
    </table>
    Ce tableau, et donc l'ID, sont générés dynamiquement


    Un grand merci pour votre aide, j'y suis depuis 2 jours

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 022
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 022
    Points : 44 329
    Points
    44 329
    Par défaut
    Bonjour,
    pas sûr d'avoir compris le pourquoi cliquer sur un lien pour positionner le document?

    Le fichier test.html est-il rechargé, mais pourquoi, modification coté serveur, dans ce cas il faut mettre la référence de l'ancre au rechargement.

    En gros

  3. #3
    Futur Membre du Club
    Homme Profil pro
    Inscrit en
    Août 2011
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Côtes d'Armor (Bretagne)

    Informations forums :
    Inscription : Août 2011
    Messages : 6
    Points : 5
    Points
    5
    Par défaut
    Citation Envoyé par NoSmoking Voir le message
    Bonjour,
    pas sûr d'avoir compris le pourquoi cliquer sur un lien pour positionner le document?

    Le fichier test.html est-il rechargé, mais pourquoi, modification coté serveur, dans ce cas il faut mettre laréférence de l'ancre au rechargement.

    En gros
    Bonjour,

    Merci de ta réponse, ce n'est qu'un exemple bien sûr, car effectivement le lien provoque l'alimentation d'une table, par contre que veux-tu dire par la référence de l'ancre au rechargement ?

    Les ID sont générés par script (PHP) et toujours présents au rechargement du tableau.

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 022
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 022
    Points : 44 329
    Points
    44 329
    Par défaut
    pas un spécialiste de PHP mais
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <td id="td_1"><a href='test.html?td=td_1'>lien</a></td>
    <td id="td_2"><a href='test.html?td=td_2'>lien</a></td>
    et coté serveur
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <?php 
    if(isset($_GET['td'])){
      $ancre = $_GET['td'];
      header("Location: test.html#$ancre"); 
    }
    ?>

    peut être un complément d'information sur le forum PHP

  5. #5
    Futur Membre du Club
    Homme Profil pro
    Inscrit en
    Août 2011
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Côtes d'Armor (Bretagne)

    Informations forums :
    Inscription : Août 2011
    Messages : 6
    Points : 5
    Points
    5
    Par défaut
    Bonjour,

    Merci pour ta réponse, je note un point important, l'ID ne doit pas être numérique, selon moi, mais je peux me tromper, le header location et l'ID en GET ne sont pas utiles dans ce cas ?!

    Le tableau se repositionne, mais l'ancre se situe en haut de la page au rechargement.

    En fait je souhaiterais que la page se repositionne comme elle était avant le clic sur un lien, peut-être faut-il recourir à du javascript (mon point faible)


    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
     
        <table>
        <tr>
        <td><a id='A1' href='#A1'>lien</a></td>
        <td><a id='A2' href='#A2'>lien</a></td>
        <td><a id='A3' href='#A3'>lien</a></td>
        ...
        </tr>
        </table>

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 022
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 022
    Points : 44 329
    Points
    44 329
    Par défaut
    Le tableau se repositionne, mais l'ancre se situe en haut de la page au rechargement.
    visiblement j'avais mal compris

    J'avais fourni cette astuce
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    (function(){
      function getScrollPage(){
        var dE = document.documentElement,
            dB = document.body;
      	var posX = ( dE && dE.scrollLeft || dB && dB.scrollLeft || 0);
      	var posY = ( dE && dE.scrollTop  || dB && dB.scrollTop  || 0);
      	return {x : posX, y : posY};
      }
      window.onload = function(){
        if( window.name){
          var pos = window.name.split('=')[1] || 0;
          window.scrollTo( 0, pos);
        }
      }
      window.onunload = function(){
        var pos = getScrollPage();
        window.name = "scrollY=" +pos.y;
      }
    })();
    en stoquant la position du scroll dans le window.name, sinon il y a les cookies, le localStorage

  7. #7
    Futur Membre du Club
    Homme Profil pro
    Inscrit en
    Août 2011
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Côtes d'Armor (Bretagne)

    Informations forums :
    Inscription : Août 2011
    Messages : 6
    Points : 5
    Points
    5
    Par défaut
    Merci pour ta réponse NoSmoking.

    J'avais abandonné l'idée que ce soit faisable, tu me redonnes espoir

    J'y connais pas grand chose en JS, proche même de 0, mais je vais mettre ton script de côté.

    Ca serait pour l'utiliser ici http://videobob.phpnet.org/planningsIII (planning demo1), cette version sera en prod d'ici 15 jours j'espère

Discussions similaires

  1. [Débutant] Lors d'un clic sur un lien, faire dérouler un composant webPart
    Par Kuneru dans le forum Développement Sharepoint
    Réponses: 21
    Dernier message: 17/07/2015, 10h00
  2. afficher une balise div lors d'un clic sur un lien
    Par jules_diedhiou dans le forum Général JavaScript
    Réponses: 11
    Dernier message: 27/06/2011, 10h16
  3. Ouvrir 4 états lors d'un clic sur un bouton
    Par Seb33300 dans le forum WebDev
    Réponses: 8
    Dernier message: 28/01/2008, 15h53
  4. Réponses: 3
    Dernier message: 06/12/2007, 07h42
  5. Réponses: 3
    Dernier message: 23/10/2007, 13h35

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo