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

JavaScript Discussion :

Div scrollable avec item (centrer item dans la div sur le clic )


Sujet :

JavaScript

  1. #1
    Membre du Club
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    226
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2008
    Messages : 226
    Points : 67
    Points
    67
    Par défaut Div scrollable avec item (centrer item dans la div sur le clic )
    Bonjour,

    j'ai une div qui fait une certaine taille exemple 400 px;
    le contenu de cette div et une liste avec plusieurs items cette liste fait 745 px;

    Donc la div est scrollable, j'aimerai quand je clique sur un item de ma liste pouvoir automatiquement centré cette element dans ma vu scrollable niveau vertical.

    C'est a dire je clic par exemple sur le 5 eme items, j'aimerais centré cette item via un scrolltop par exemple et centrer donc cette element dans mon scroll .

    Scroll verticale.

    je vous remercie de votre aide.

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 637
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 637
    Points : 66 658
    Points
    66 658
    Billets dans le blog
    1
    Par défaut
    en calculant le scrollTop nécessaire ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  3. #3
    Membre du Club
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    226
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2008
    Messages : 226
    Points : 67
    Points
    67
    Par défaut
    ben en faite c'est un peu la que je bloque.

    Car je recupere la hauteur de ma div scrollable, la hauteur de ma liste ainsi que la hauteur d'un item.

    Mais sachant que la hauteur de la div scrollable ainsi que la hauteur de la liste peuvent être variable selon la taille de la fenêtre et du nombre d'item.

    Dans tous les cas je récupère bien toute ces valeur mais le calcul, je n'arrive pas trop à visualisé comment faire.

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 637
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 637
    Points : 66 658
    Points
    66 658
    Billets dans le blog
    1
    Par défaut
    ben scrollTop = top de l'element + 1/2 hauteur de la zone scrollable
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  5. #5
    Membre du Club
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    226
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2008
    Messages : 226
    Points : 67
    Points
    67
    Par défaut
    de plus je peux recupere l'index de l'element sélectionner. Donc je pense récupérer tous les informations dont j'ai besoins mais le calcul je peche un peu

  6. #6
    Membre du Club
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    226
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2008
    Messages : 226
    Points : 67
    Points
    67
    Par défaut
    Citation Envoyé par SpaceFrog Voir le message
    ben scrollTop = top de l'element + 1/2 hauteur de la zone scrollable
    ça me semble bizarre quand meme.

    si je recupere le top de mon element cliquer : monElement.offset().top;

    la hauteur de ma zone de scroll : la divscrollable.height();

    la hauteur de la liste : parent.divscrollable.height()

    j'ai donc : 392 element
    607 taille liste
    468 zone de scroll

    scrollTop = 392 + 234 => 626

    je suis out de ma taille de liste.

  7. #7
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 637
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 637
    Points : 66 658
    Points
    66 658
    Billets dans le blog
    1
    Par défaut
    item = quelle balise ?
    il y a quoi dans ton div scrollable ?


    sinon un exemple
    http://jsfiddle.net/dWL4V/
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  8. #8
    Membre du Club
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    226
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2008
    Messages : 226
    Points : 67
    Points
    67
    Par défaut
    j'ai un tableau donc mes items sont des <tr>

  9. #9
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 637
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 637
    Points : 66 658
    Points
    66 658
    Billets dans le blog
    1
    Par défaut
    ça ne change pas grand chose
    http://jsfiddle.net/dWL4V/1/
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

Discussions similaires

  1. Centrer images dans un div
    Par Leeloe dans le forum Mise en page CSS
    Réponses: 7
    Dernier message: 18/02/2009, 10h14
  2. Réponses: 1
    Dernier message: 26/09/2008, 16h38
  3. [HTML] Lecture flv dans une "DIV Frame" avec overflow: auto
    Par bigjim21 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 1
    Dernier message: 25/10/2006, 00h35
  4. Déplacement dans une div scrollable
    Par kankrelune dans le forum Général JavaScript
    Réponses: 10
    Dernier message: 30/05/2006, 21h52
  5. Div scrollable avec taille en %
    Par Oluha dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 08/04/2005, 11h09

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