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

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

Dismiss x
public
Bin info
rempro
0viewers