Se balader dans l'arbre DOM

Comment se positionner au dessus d'un div ?

L'auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

Bonsoir,

Je m'explique avec cette question bizarre. J'ai comme ce qu'on appel des blocks de div, j'utilise les flêches du clavier afin d'aller soit au précédent div avec la fonction jquery prev() soit au block suivant avec la fonction next(). Cependant, j'aimerais dans mon alignement de bloque, pouvoir me déplacer au dessus et en dessous avec les flêches up et down. Mais je ne trouve pas de fonction, solution afin de faire cela… Même en regardant la doc

Comment me 'balader' dans l'arbre DOM en haut et en bas du div actuel ?

 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
var current = $(".selected");

    if(data.action === "goLeft"){

      $(".selected").removeClass("selected");

      if($(current).prev().attr("id") === "start-block"){
        $("#end-block").prev().addClass("selected");  
      } else{
        $(current).prev().addClass("selected");   
      }

    }
    else if(data.action === "goRight"){

        $(".selected").removeClass("selected");

        if($(current).next().attr("id") === "end-block"){
            $("#start-block").next().addClass("selected");  
        } else{
            $(current).next().addClass("selected");   
        }

    }
    else if(data.action === "goUp"){
        console.log('Je fais comment ?');
    }
    else if(data.action === "goDown"){
        console.log('Je fais comment ?');
    }
    else if(data.action === "enter"){
        console.log('Enter');
    }
    else if(data.action === "leave"){
        console.log('Leave');
    }

Édité par Seb

Seb.

+0 -0
Staff

Cette réponse a aidé l'auteur du sujet

Salut,

Avec si peu d'infos, impossible de t'aider.

Si ta grille est faite de lignes séparées en colonnes (exemple), c'est facile. Tu indexes chaque bloc avec un nombre de 1 à n (avec un id par exemple #block-1, #block-2, …), puis un bête calcul prenant en compte l'index du bloc actuel et les nombres de blocs sur les 3 lignes précédente-actuelle-suivante te donnera l'index du bloc vers lequel te déplacer.

Si c'est pas ton cas, et que par exemple les blocs se réarrangent ou dépendent de la largeur de leur conteneur (exemple), c'est super compliqué. Il va te falloir indexer avec une boucle qui prend en compte la position de chaque bloc par rapport au haut de la page ($.top() je suppose).

Je parle de JavaScript et d'autres trucs sur mon blog : https://draft.li/blog

+0 -0
Auteur du sujet

Salut, c'est réglé:

Dîtes moi si je procède correctement, merci :)

  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
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
<!DOCTYPE html>
<html>
    <head>
      <title>Code de TEST</title>
      <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
        <style type='text/css'>
            .gridApp {
                font-size: 0;
                width: 70%;
            }
            .app.selected {
                border:2px solid #000;
                box-sizing:border-box;
            }
            .app {
                position: relative;
                height: 80px;
                background-color: #FFE06B;
                display: inline-block;
                width: 14.2853%;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
            }
            .appText {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                top: 50%;
                text-align: center;
                line-height: 0;
                font-size: 40px;
            }
        </style>

    <script type='text/javascript'>
    $(window).load(function(){

        var position = { x: 0, y: 0 };
        var appMap = [];
        var countapp = 0;
        var countrow = 0;

        $(document).ready(function () {
            $('.row').each(function () {
                appMap.push([]);
                $('.app', this).each(function () {
                    appMap[appMap.length - 1].push($(this));
                    countapp++;
                });
                countrow++;
            });
            highlightCell();
        });

        $(window).on('keydown', function (e) {
            if (e.keyCode === 37) // left
                moveLeft();
            else if (e.keyCode === 38) // up
                moveUp();
            else if (e.keyCode === 39) // right
                moveRight();
            else if (e.keyCode === 40) // down
                moveDown();
            highlightCell();
        });

        function moveLeft() {
            position.x--;
            if (position.x < 0)
                position.x = (countapp / countrow) - 1;
        }

        function moveUp() {
            position.y--;
            if (position.y < 0)
                position.y = (countrow - 1);
        }

        function moveRight() {
            position.x++;
            if (position.x >= appMap[0].length)
                position.x = appMap[0].length - (countapp / countrow);
        }

        function moveDown() {
            position.y++;
            if (position.y >= appMap.length)
                position.y = appMap.length - countrow;
        }

        function highlightCell() {
            $('.app').removeClass('selected');
            appMap[position.y][position.x].addClass('selected');
        }
    });

    </script>
</head>
    <body>
        <div class="gridApp">
            <div class="row">
                <div class="app">
                    <div class="appText">0</div>
                </div>
                <div class="app">
                    <div class="appText">1</div>
                </div>
                <div class="app">
                    <div class="appText">2</div>
                </div>
                <div class="app">
                    <div class="appText">3</div>
                </div>
                <div class="app">
                    <div class="appText">4</div>
                </div>
                <div class="app">
                    <div class="appText">5</div>
                </div>
                <div class="app">
                    <div class="appText">6</div>
                </div>
            </div>
            <div class="row">
                <div class="app">
                    <div class="appText">7</div>
                </div>
                <div class="app">
                    <div class="appText">8</div>
                </div>
                <div class="app">
                    <div class="appText">9</div>
                </div>
                <div class="app">
                    <div class="appText">10</div>
                </div>
                <div class="app">
                    <div class="appText">11</div>
                </div>
                <div class="app">
                    <div class="appText">12</div>
                </div>
                <div class="app">
                    <div class="appText">13</div>
                </div>
            </div>
            <div class="row">
                <div class="app">
                    <div class="appText">14</div>
                </div>
                <div class="app">
                    <div class="appText">15</div>
                </div>
                <div class="app">
                    <div class="appText">16</div>
                </div>
                <div class="app">
                    <div class="appText">17</div>
                </div>
                <div class="app">
                    <div class="appText">18</div>
                </div>
                <div class="app">
                    <div class="appText">19</div>
                </div>
                <div class="app">
                    <div class="appText">20</div>
                </div>
            </div>
            <div class="row">
                <div class="app">
                    <div class="appText">21</div>
                </div>
                <div class="app">
                    <div class="appText">22</div>
                </div>
                <div class="app">
                    <div class="appText">23</div>
                </div>
                <div class="app">
                    <div class="appText">24</div>
                </div>
                <div class="app">
                    <div class="appText">25</div>
                </div>
                <div class="app">
                    <div class="appText">26</div>
                </div>
                <div class="app">
                    <div class="appText">27</div>
                </div>
            </div>
            <div class="row">
                <div class="app">
                    <div class="appText">28</div>
                </div>
                <div class="app">
                    <div class="appText">29</div>
                </div>
                <div class="app">
                    <div class="appText">30</div>
                </div>
                <div class="app">
                    <div class="appText">31</div>
                </div>
                <div class="app">
                    <div class="appText">32</div>
                </div>
                <div class="app">
                    <div class="appText">33</div>
                </div>
                <div class="app">
                    <div class="appText">34</div>
                </div>
            </div>
        </div>
    </body>
</html>

Ce code a quand même un défaut majeur, c'est qu'il ne fonctionne pas correctement si mes nombres de cellules (app) celui mes colonnes horizontales (row)…

Édité par Seb

Seb.

+0 -0
Staff

Salut !

Oui, pas mal du tout. Maintenant, tu pourrais indiquer quelque part la largeur des cellules, et faire un calcul basé sur le nombre de cellule et la largeur des cellules pour sauter correctement à une cellule plus large qu'une autre, dans le cas où elles ne sont pas toutes identiques.

Je parle de JavaScript et d'autres trucs sur mon blog : https://draft.li/blog

+0 -0
Auteur du sujet

Salut, j'ai une question. Quelqu’un m'a conseillé d'utiliser ce code, devrais-je procéder comme cela avec les fonctions DOM javascript ou ma méthode est d'autant bonne?

PS: excusez mes 2 précédents posts, cela est dû à un bug sur mobile en voulant éditer mes messages…

Édité par Seb

Seb.

+0 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte