Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Failing Focus in Animated UI</title>
</head>
<body>
​
<article id="example-introduction">
  <h1>Failing Focus in Animated UI</h1>
​
  <p>This example shows the basic concept of a carousel, accordion and similar content-revealing UI widgets.</p>
  <p>
    The buttons reveal their associated slides by using the CSS properties <code>transform</code> and <code>transition</code>.
    The checkbox controls if focus should be shifted to the slide as it is revealed.
  </p>
  <p>Note how shifting focus interferes with the content being presented, because of the browser scrolling elements into view when they become the active element.</p>
</article>
​
<div id="example-html">
  <main>
    <section data-active-item="first">
      <fieldset>
        <legend>show slide</legend>
​
        <p>
          <button type="button" data-show="first">first</button>
          <button type="button" data-show="second">second</button>
          <button type="button" data-show="third">third</button>
        </p>
        <p>
          <label><input type="checkbox" id="with-focus"> shift focus to slide</label>
        </p>
        <p>
          <button type="button" id="reset">reset scroll position</button>
        </p>
      </fieldset>
​
      <div id="cropper">
        <ul>
          <li id="first" tabindex="-1">First</li>
          <li id="second" tabindex="-1">Second</li>
          <li id="third" tabindex="-1">Third</li>
        </ul>
      </div>
    </section>
  </main>
</div>
</body>
</html>
​
 
​
​
main p {
  margin: 0;
}
​
main p + p {
  margin-top: 10px;
}
​
#cropper {
  width: 200px;
  border: 1px solid black;
  margin-top: 10px;
  overflow: hidden;
}
​
section ul {
  box-sizing: border-box;
  width: 600px;
  border: 1px solid grey;
  margin: 0;
  padding: 0;
​
  list-style: none;
​
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  -webkit-justify-content: center;
            -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-content: stretch;
     -ms-flex-line-pack: stretch;
          align-content: stretch;
  -webkit-align-items: stretch;
       -ms-flex-align: stretch;
          align-items: stretch;
​
  transition: transform 1s ease-in-out;
}
​
section[data-active-item="first"] ul {
  transform: translate3d(0px, 0px, 0px);
}
​
section[data-active-item="second"] ul {
  transform: translate3d(-200px, 0px, 0px);
}
​
section[data-active-item="third"] ul {
  transform: translate3d(-400px, 0px, 0px);
}
​
section[data-active-item="first"] #first,
section[data-active-item="second"] #second,
section[data-active-item="third"] #third {
  visibility: inherit;
  transition: visibility 0s 0s linear;
}
​
section ul li {
  display: flex;
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  margin: 0;
​
  visibility: hidden;
  transition: visibility 0s 1s linear;
}
​
#first {
  background: #ccccff;
}
#second {
  background: #ccffcc;
}
#third {
  background: #ffcccc;
}
 
​
var section = document.querySelector('section');
var withFocus = document.getElementById('with-focus');
section.addEventListener('click', function(event) {
  var id = event.target.getAttribute('data-show');
  if (!id) {
    return;
  }
​
  // transition to slide
  section.setAttribute('data-active-item', id);
​
  if (withFocus.checked) {
    // shift focus to slide
    document.getElementById(id).focus();
  }
}, true);
​
var cropper = document.getElementById('cropper');
var reset = document.getElementById('reset');
reset.addEventListener('click', function() {
  cropper.scrollLeft = 0;
}, true);
​
​
Output

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

Dismiss x