Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
24
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>JS Bin</title>
6
</head>
7
<body id="my-demo" class="foo bar tartar">
8
  <main id="main" class="main-content" tabindex=0>
9
    <h1>Focus demo</h1>
10
    <p data-id="first" aria-label="Needless aria label" tabindex="0">Here be content that's focusable.</p>
11
    <p>Note that I've purposely added <code>tabindex=0</code> to a lot of these elements simply for demonstration purposes.</p>
12
    <p>Assuming you're not on mac (and Firefox or Safari) you can focus these links too.</p>
13
    <ul class="links" data-count=4 tabindex=0>
14
      <li><a href="#one">one</a></li>
15
      <li><a href="#two">two</a></li>
16
      <li><a href="#three">three</a></li>
17
      <li><a href="#four">four</a></li>
18
    </ul>
19
  </main>
20
  <footer tabindex=0 class="footstuff links" data-position="footer" data-stuff="cruft">
21
    <p>Obligortary footer content. @rem &copy; 2014 :) just kidding!</p>
22
  </footer>
23
</body>
24
</html>
39
 
1
html, body {
2
  margin: 0;
3
}
4
​
5
body {
6
  font-family: open sans, sans-serif;
7
  background: #ccc;
8
}
9
​
10
main {
11
  padding: 10px;
12
  background: white;
13
}
14
​
15
main h1 {
16
  margin-top: 0px;
17
}
18
​
19
ul {
20
  overflow: hidden;
21
  padding: 0;
22
}
23
​
24
li {
25
  float: left;
26
  display: inline-block;
27
}
28
​
29
li a {
30
  display: block;
31
  margin: 5px;
32
}
33
​
34
footer {
35
  background: #ccc;
36
  color: #fff;
37
  font-size: 75%;
38
  padding: 1px 10px;
39
}
40
 
1
(function () {
2
  var active = document.createElement('pre');
3
  document.body.appendChild(active);
4
  active.tabindex = -1;
5
  with (active.style) { // warning: `with` I know what I'm doing!
6
    position = 'fixed';
7
    right = '20px';
8
    bottom = '60px';
9
    margin = 0;
10
    padding = '4px';
11
    fontSize = 12;
12
    color = '#fff';
13
    background = '#aaa';
14
    whiteSpace = 'pre-wrap';
15
    maxWidth = '95%';
16
    borderRadius = '2px';
17
  }
18
  var lastActive = null;
19
​
20
  var showActive = function () {
21
    var el = document.activeElement;
22
    var html = '';
23
    var attrs = el.attributes;
24
    var i = 0;
25
​
26
    if (el !== lastActive && el !== active) {
27
      lastActive = el;
28
​
29
      for (; i < attrs.length; i++) {
30
        html += ' ' + attrs[i].name + '="' + attrs[i].value + '"';
31
      }
32
​
33
      active.textContent = '<' + el.nodeName.toLowerCase() + html + '>';
34
    };
35
​
36
    requestAnimationFrame(showActive);
37
  }
38
​
39
  showActive();
40
})();
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x