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 :

thead fixed / tbody scroll v2


Sujet :

JavaScript

  1. #21
    Invité
    Invité(e)
    Par défaut
    As-tu VIDE le CACHE navigateur ?

  2. #22
    Membre régulier
    Profil pro
    Inscrit en
    Mars 2011
    Messages
    320
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2011
    Messages : 320
    Points : 79
    Points
    79
    Par défaut
    Oui je viens de le faire.

    Je fais de mon mieux pour comprendre ... et je pense que c'est un succession d'erreurs ...
    Je regarde ce que tu m'as demandé de faire et j'ai des questions.

    Tu m'as demandé de commenter dans resizeTables.js ce bout de code en fin de fichier :
    Code JS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    window.onresize = function () {
        table_thead_fixed_resize();
    }

    ce qui donne ceci pour resizeTables.js
    Code : 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
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    "use strict";
     
    function table_thead_fixed() {
        let tableDivWraps = document.querySelectorAll(".table-thead-fixed");
        tableDivWraps.forEach(function (tableDivWrap) {
            let tableRef = tableDivWrap.children[0],
                tableBodyScroll = document.createElement("div");
            tableBodyScroll.className += "tbody-scroll";
            tableDivWrap.insertBefore(tableBodyScroll, tableRef);
            tableBodyScroll.appendChild(tableRef);
            let tableHeadFixed = document.createElement("div");
            tableHeadFixed.className += "theader-fixed";
            tableHeadFixed.appendChild(tableRef.cloneNode(true));
            tableDivWrap.prepend(tableHeadFixed);
        });
        table_thead_fixed_resize();
    }
     
    function table_thead_fixed_resize() {
        let tableDivWraps = document.querySelectorAll(".table-thead-fixed");
        tableDivWraps.forEach(function (tableDivWrap) {
            let nbLigne = tableDivWrap.dataset.nbreligne !== undefined ? tableDivWrap.dataset.nbreligne : 20,
                tableHeadFixed = tableDivWrap.children[0],
                tableBodyScroll = tableDivWrap.children[1],
                tableRef = tableBodyScroll.children[0],
                hScrollBar = tableBodyScroll.offsetHeight - tableBodyScroll.clientHeight,
                nbLigneToShow = Math.min(nbLigne, tableRef.rows.length) + 1,
                rect1 = tableRef.rows[0].getBoundingClientRect(),
                rect2 = tableRef.rows[nbLigneToShow].getBoundingClientRect();
            tableBodyScroll.style.height = rect2.top - rect1.top + hScrollBar + "px";
            let hEntete = tableRef.tHead.offsetHeight,
                wScrollBar = tableBodyScroll.offsetWidth - tableBodyScroll.clientWidth;
            tableHeadFixed.style.height = hEntete + "px";
            tableHeadFixed.style.width = "calc(100% - " + wScrollBar + "px)";
            tableBodyScroll.onscroll = function () {
                tableHeadFixed.style.marginLeft = -this.scrollLeft + "px";
            };
        });
    }
     
    window.onload = function () {
        table_thead_fixed();
    }
    /*
    window.onresize = function () {
        table_thead_fixed_resize();
    }
    */

    Autrement, dans dashboard.js, je n'ai modifié que ceci :
    Code : 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
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
        function makeFriendsHTML(rf) {
            var field = "speed";
            if (rf === undefined) {
                return "No friend positions received yet";
            } else {
                sortFriends(rf);
                return '<div class="table-thead-fixed">' // table-wrap table-thead-fixed ou table-thead-fixed
                    +
                    '<table style=\"width:100%\">' +
                    '<thead>' +
                    friendListHeader() +
                    '</thead>' +
                    '<tbody>' +
                    Array.from(rf.table || []).map(makeFriendListLine, rf).join(' '); +
                '</tbody>' +
                '</table>' +
                '</div>';
            }
        }
     
        function makeTableHTML(r) {
            return '<div class="table-thead-fixed">' // table-wrap table-thead-fixed ou table-thead-fixed
                +
                '<table style="width:100%">' +
                '<thead>' +
                tableHeader +
                '</thead>' +
                '<tbody>' +
                (r === undefined ? "" : r.tableLines.join(' ')) +
                '</tbody>' +
                '</table>' +
                '</div>';
        }
    // table-wrap table-thead-fixed ou table-thead-fixed
    Je dirais table-thead-fixed ... la div table-wrap je m'en sers pas...

  3. #23
    Invité
    Invité(e)
    Par défaut
    Argh....
    On a oublié (mea culpa) une ligne de code... :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    function table_thead_fixed() {
    ...
        table_thead_fixed_resize();
    }
    SUPPRIME (ou "commente" *) aussi cette ligne !!

    *
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    function table_thead_fixed() {
    ...
    //    table_thead_fixed_resize();
    }

  4. #24
    Membre régulier
    Profil pro
    Inscrit en
    Mars 2011
    Messages
    320
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2011
    Messages : 320
    Points : 79
    Points
    79
    Par défaut
    Bon plus d'erreurs en console mais le thead fixe et tbody scroll ne fonctionne pas...

    Sur l'onglet Race log, je ne peux pas tester car il faut que ça se remplisse (et ça prends du temps une ligne toutes les 5 min) en revanche sur l'onglet Friends/Opponents ça devrait fonctionner mais rien c'est comme si j'avais rien fait (aucun code) car le comportement est identique à avant.

  5. #25
    Membre régulier
    Profil pro
    Inscrit en
    Mars 2011
    Messages
    320
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2011
    Messages : 320
    Points : 79
    Points
    79
    Par défaut
    En épluchant le code HTML je m'aperçois que les div ne sont pas crées.

    Dans mon autre extension j'arrive a les visualiser dans l'inspecteur.

+ Répondre à la discussion
Cette discussion est résolue.
Page 2 sur 2 PremièrePremière 12

Discussions similaires

  1. Thead fixe sur première ligne lors d'un scroll
    Par rlelamer dans le forum Mise en page CSS
    Réponses: 56
    Dernier message: 26/09/2018, 17h31
  2. Div pere fixe et scroll sur div fils
    Par mowegan dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 10/01/2011, 11h37
  3. image de fond cellule tableau html, fixe sur scroll
    Par laurentSc dans le forum Balisage (X)HTML et validation W3C
    Réponses: 11
    Dernier message: 08/09/2010, 18h25
  4. Position Fixed et scrolling
    Par Greg12345 dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 25/05/2010, 23h04
  5. Comment placer des divs fixes au scroll ?
    Par Jayrome dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 01/02/2009, 11h39

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