/
index.html
162 lines (154 loc) · 5.86 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Keyboard grid navigation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Keyboard grid navigation with gridnav.js</h1>
<p>Navigating long list with a keyboard can be frustrating as you either have to search for content or tab from each element to the next. Visually it is much easier to navigate as you can move around more freely.</p>
<p>Using gridnav.js you can allow keyboard users to use the keys or w, a, s, d to navigate around a list displayed as a grid. All you have to do is to include the script in your product and provide it with an HTML list to enhance.</p>
<p>You can try it out here, simply follow any of the links in the demo menu and start navigating using the cursor keys or w, a, s, d.</p>
<p>Please refer to the <a href="https://github.com/codepo8/gridnav/">README to learn about customisation</a>.</p>
<p><a href="https://github.com/codepo8/gridnav/">gridnav.js is on GitHub</a> an Open Source. It has no dependencies and is plain vanilla JS.</p>
<div id="demos">
<h2>Demos</h2>
<nav><ul id="nav">
<li><a href="#list">List with buttons, defined amount and element</a></li>
<li><a href="#links">List with links, defined amount and element</a></li>
<li><a href="#smaller">List without any data attributes (slower)</a></li>
</ul></nav>
</div>
</header>
<section id="gridnavs">
<pre><ul id="list" data-amount="8" data-element="button"></pre>
<div class="demo">
<ul id="list" data-amount="8" data-element="button">
<li><button>0</button></li>
<li><button>1</button></li>
<li><button>2</button></li>
<li><button>3</button></li>
<li><button>4</button></li>
<li><button>5</button></li>
<li><button>6</button></li>
<li><button>7</button></li>
<li><button>8</button></li>
<li><button>9</button></li>
<li><button >10</button></li>
<li><button >11</button></li>
<li><button >12</button></li>
<li><button >13</button></li>
<li><button >14</button></li>
<li><button >15</button></li>
<li><button >16</button></li>
<li><button >17</button></li>
<li><button >18</button></li>
<li><button >19</button></li>
<li><button >20</button></li>
<li><button >21</button></li>
<li><button >22</button></li>
<li><button >23</button></li>
<li><button >24</button></li>
<li><button >25</button></li>
<li><button >26</button></li>
<li><button >27</button></li>
<li><button >28</button></li>
<li><button >29</button></li>
<li><button >30</button></li>
<li><button >31</button></li>
</ul>
</div>
<pre><ul class="gridnav" data-amount="5" data-element="a"></pre>
<div class="demo">
<ul class="gridnav" id="links" data-amount="5" data-element="a">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li><a href="#">11</a></li>
<li><a href="#">12</a></li>
<li><a href="#">13</a></li>
<li><a href="#">14</a></li>
<li><a href="#">15</a></li>
<li><a href="#">16</a></li>
<li><a href="#">17</a></li>
<li><a href="#">18</a></li>
<li><a href="#">19</a></li>
<li><a href="#">20</a></li>
<li><a href="#">21</a></li>
<li><a href="#">22</a></li>
<li><a href="#">23</a></li>
<li><a href="#">24</a></li>
<li><a href="#">25</a></li>
</ul>
</div>
<pre><ul id="smaller"></pre>
<div class="borked">
<ul id="smaller">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li><a href="#">11</a></li>
<li><a href="#">12</a></li>
<li><a href="#">13</a></li>
<li><a href="#">14</a></li>
<li><a href="#">15</a></li>
<li><a href="#">16</a></li>
<li><a href="#">17</a></li>
<li><a href="#">18</a></li>
<li><a href="#">19</a></li>
<li><a href="#">20</a></li>
<li><a href="#">21</a></li>
<li><a href="#">22</a></li>
<li><a href="#">23</a></li>
<li><a href="#">24</a></li>
<li><a href="#">25</a></li>
</ul>
</div>
</section>
<footer>
<p>Written by <a href="http://twitter.com/codepo8">Chris Heilmann</a>. Hosted on GitHub</p>
<p>Thanks to <a href="http://twitter.com/heydonworks">Heydon Pickering</a> for the clever <a href="https://codepen.io/heydon/pen/bcdrl">CSS to create fixed amount grids</a>.</p>
</footer>
<script src="gridnav.js"></script>
<script>
var buttonlist = new Gridnav('#list');
var smallerlist = new Gridnav('#smaller');
</script>
<script>
document.querySelector('#nav').
addEventListener('click',function(ev) {
ev.preventDefault();
if (ev.target.tagName === 'A') {
var elm = document.querySelector(
ev.target.href.replace(/.*#/, '#'));
window.scrollTo(0, elm.offsetTop);
elm.children[0].children[0].focus();
}
}
);
// Prevent anchor navigation
document.querySelector('#gridnavs').
addEventListener('click',function(ev) {
ev.preventDefault();
}
);
</script>
</body>
</html>