Conference Schedule

conference-schedule.markdown

Conference Schedule

Example of a conference schedule that is responsive, progressive, accessible, dependency-free, and useful.

WORK IN PROGRESS

A Pen by Adrian Roselli on CodePen.

License.

index.html

<header id="Banner">
  <a href="#">WTF Conf 2016</a>
</header>

<main class="showall" id="ShowAll">
  <h1>WTF Conf 2016 Schedule</h1>

  <p>
    This is an example for my post <cite>Title TBD</cite>. It represents a two-day two-track conference that, hopefully obviously, does not really exist.
  </p>

  <p>
    <strong>This is in progress. The code is not ready. Do not use.</strong>
  </p>

  <p>
    <a href="" id="Reset" class="resetShow">Reset page</a>
    <a href="#ShowAll" id="Show" class="resetShow">Show all</a>
    <button class="abstractToggle" id="AbstractToggleAll" onclick="ToggleAllAbstracts(this.id);">Show all abstracts</button>
  </p>

  <ul id="DayChooser">
    <li><a href="#Day1" id="Day1_tab">Day 1</a></li>
    <li><a href="#Day2" id="Day2_tab">Day 2</a></li>
  </ul>


  <div class="day" id="Day1">
    <h2><span>Day 1</span><a href="#Day1">Day 1</a></h2>

    <table id="Day1">
      <tr>
        <th>Time</th>
        <th>
          Train Track<br>
          <a href="http://example.com/Room101">Room 101</a>
        </th>
        <th>
          Race Track<br>
          <a href="http://example.com/RoomA">Room A</a>
        </th>
      </tr>
      <!-- Day 1 session 1 -->
      <tr id="D1S1">
        <td><time datetime="2016-10-03 09:00-05:00">9:00am</time>
          <!-- http://www.brucelawson.co.uk/2012/best-of-time/ -->
        </td>
        <td>
          <p>
            <a href="http://example.com/talk1A">Winning All the Things</a>
          </p>
          <button class="abstractToggle" aria-label="Show abstract of Winning All the Things" onclick="ToggleAbstract(this.id);" id="D1S1A-abstract">+</button>
          <p>
            Stacy Stevens
          </p>
          <p id="D1S1A-abstract">
            <!-- Button hidden, abstracts expanded on page load, JavaScript fires to show all buttons, hide abstracts -->
            Listen to Stacy tell you how you too can win all the things, even the things you did not think you could win, things you did not want to win, and things you will immediately give back.
          </p>
        </td>
        <td>
          <p>
            <a href="http://example.com/talk1B">Selling All the Things</a>
          </p>
          <button class="abstractToggle" aria-label="Show abstract of Winning All the Things" onclick="ToggleAbstract(this.id);" id="D1S1B-abstract">+</button>
          <p>
            Steven Stacy
          </p>
          <p>
            Listen to Steven tell you how you too can sell all the things, even the things you did not think you could sell, things you did not want to sell, and things the customer will immediately give back.
          </p>
        </td>
      </tr>
      <!-- Day 1 session 2 -->
      <tr id="D1S2">
        <td><time datetime="2016-10-03 10:00-05:00">10:00am</time>
          <!-- http://www.brucelawson.co.uk/2012/best-of-time/ -->
        </td>
        <td>
          <p>
            <a href="http://example.com/talk2A">XForms, the Future of the Web</a>
          </p>
          <button class="abstractToggle" aria-label="Show abstract of XForms, the Future of the Web" onclick="ToggleAbstract(this.id);" id="D1S2A-abstract">+</button>
          <p>
            Linus Boyd
          </p>
          <p>
            <!-- Button hidden, abstracts expanded on page load, JavaScript fires to show all buttons, hide abstracts -->
            Linus Boyd will tell us why your HTML5 forms are completely wrong and how if you go back to using Firefox 3, you will find XForms are the wave of the future.
          </p>
        </td>
        <td>
          <p>
            <a href="http://example.com/talk2B">XHTML2 as the One True Way Forward</a>
          </p>
          <button class="abstractToggle" aria-label="Show abstract of XHTML2 as the One True Way Forward" onclick="ToggleAbstract(this.id);" id="D1S2B-abstract">+</button>
          <p>
            Stephanie Pinkerton
          </p>
          <p>
            Stephanie makes the case for how a many-years-abandoned spec can save your future content while freeing you from the burden of being able to use everything you have built to now.
          </p>
        </td>
      </tr>
      <!-- Day 1 session 3 -->
      <tr id="D1S3">
        <td><time datetime="2016-10-03 11:00-05:00">11:00am</time>
          <!-- http://www.brucelawson.co.uk/2012/best-of-time/ -->
        </td>
        <td>
          <p>
            <a href="http://example.com/talk3A">Grunting</a>
          </p>
          <button class="abstractToggle" aria-label="Show abstract of Grunting" onclick="ToggleAbstract(this.id);" id="D1S3A-abstract">+</button>
          <p>
            Caif Mann
          </p>
          <p>
            <!-- Button hidden, abstracts expanded on page load, JavaScript fires to show all buttons, hide abstracts -->
            Using grunt is as easy as making mouth noises without opening your mouth. We'll go over all the ways you can avoid opening your mouth.
          </p>
        </td>
        <td>
          <p>
            <a href="http://example.com/talk3B">Gulping</a>
          </p>
          <button class="abstractToggle" aria-label="Show abstract of Gulping" onclick="ToggleAbstract(this.id);" id="D1S3B-abstract">+</button>
          <p>
            Felicia Fisch
          </p>
          <p>
            We will talk about how you can be more productive at processing different liquified libraries by simply opening your mouth. We'll touch on Gasping as an add-on.
          </p>
        </td>
      </tr>
      <!-- Day 1 session 4 -->
      <tr id="D1S4">
        <td><time datetime="2016-10-03 12:00-05:00">12:00pm</time>
          <!-- http://www.brucelawson.co.uk/2012/best-of-time/ -->
        </td>
        <td colspan="2">
          <p>
            Lunch
          </p>
          <p>
            Lunch will be provided at the nearest McDonald's. Bring your meal voucher for a free small fry.
          </p>
        </td>
      </tr>
      <!-- Day 1 session 5 -->
      <tr id="D1S5">
        <td><time datetime="2016-10-03 14:00-05:00">2:00pm</time>
          <!-- http://www.brucelawson.co.uk/2012/best-of-time/ -->
        </td>
        <td>
          <p>
            <a href="http://example.com/talk5A">Basket Weaving</a>
          </p>
          <button class="abstractToggle" aria-label="Show abstract of Basket Weaving" onclick="ToggleAbstract(this.id);" id="D1S5A-abstract">+</button>
          <p>
            Washington Irving
          </p>
          <p>
            <!-- Button hidden, abstracts expanded on page load, JavaScript fires to show all buttons, hide abstracts -->
            The perfect post-lunch session. Minimal effort, maximum art credits.
          </p>
        </td>
        <td>
          <p>
            <a href="http://example.com/talk5B">Bike Shedding</a>
          </p>
          <button class="abstractToggle" aria-label="Show abstract of Bike Shedding" onclick="ToggleAbstract(this.id);" id="D1S5B-abstract">+</button>
          <p>
            Penny Farthing
          </p>
          <p>
            Learn how to build a shed to house your bike (or bikes if you somehow have decided you like to collect bikes).
          </p>
        </td>
      </tr>
      <!-- Day 1 session 6 -->
      <tr id="D1S6" class="current">
        <td><time datetime="2016-10-03 15:00-05:00">3:00pm</time>
          <!-- http://www.brucelawson.co.uk/2012/best-of-time/ -->
        </td>
        <td>
          <p>
            <a href="http://example.com/talk6A">Trapping a Snorlax</a>
          </p>
          <button class="abstractToggle" aria-label="Show abstract of Trapping a Snorlax" onclick="ToggleAbstract(this.id);" id="D1S6A-abstract">+</button>
          <p>
            Ash Ketchum
          </p>
          <p>
            <!-- Button hidden, abstracts expanded on page load, JavaScript fires to show all buttons, hide abstracts -->
            This coveted post-lunch later afternoon session is guaranteed to be full of sleepy heads, so now is your perfect chance to bag a Snorlax.
          </p>
        </td>
        <td>
          <p>
            <a href="http://example.com/talk6B">Nap Time</a>
          </p>
          <button class="abstractToggle" aria-label="Show abstract of Nap Time" onclick="ToggleAbstract(this.id);" id="D1S6B-abstract">+</button>
          <p>
            John Rugg
          </p>
          <p>
            The ultimate user study. Finally find out what it is like to sit through a user study session when you are not a stakeholder, a PM, a developer, or even a user. Guaranteed to make you rethink how you want to spend your afternoon.
          </p>
        </td>
      </tr>
      <!-- Day 1 session 7 -->
      <tr id="D1S7">
        <td><time datetime="2016-10-03 16:00-05:00">4:00pm</time>
          <!-- http://www.brucelawson.co.uk/2012/best-of-time/ -->
        </td>
        <td>
          <p>
            <a href="http://example.com/talk7A">Which Framework?</a>
          </p>
          <button class="abstractToggle" aria-label="Show abstract of Which Framework?" onclick="ToggleAbstract(this.id);" id="D1S7A-abstract">+</button>
          <p>
            Carrie Onn
          </p>
          <p>
            <!-- Button hidden, abstracts expanded on page load, JavaScript fires to show all buttons, hide abstracts -->
            We will review every framework available today (valid for all definitions of today that exclude the start of this session and forward) and choose the single most perfect one to use in your project for the next 3 days.
          </p>
        </td>
        <td>
          <p>
            <a href="http://example.com/talk7B">Write a Framework in 45 Minutes</a>
          </p>
          <button class="abstractToggle" aria-label="Show abstract of Write a Framework in 45 Minutes" onclick="ToggleAbstract(this.id);" id="D1S7B-abstract">+</button>
          <p>
            Peg Vershun
          </p>
          <p>
            Write your very own framework targetting your very specific needs that apply to no one else. With the remaining time, we will create a repo and start the process of chastising everyone who has not adopted it before the end of this session.
          </p>
        </td>
      </tr>
    </table>
  </div>
  
  <div class="day" id="Day2">
    <h2><span>Day 2</span><a href="#Day2">Day 2</a></h2>
  </div>

</main>

script.js

/* This function walks through all the toggles and runs the function to toggle them */
var ToggleState; // declare it outside the looping

function ToggleAllAbstracts(thisID) {
  try {
    if (ToggleState === undefined) { // if we haven't used it
      ToggleState = 'Hide'; // set it to hide
    }
    thisToggle = document.getElementById(thisID); // get this button
    thisToggleText = thisToggle.innerHTML; // get this button's text
    thisToggleStateText = thisToggleText.substring(0, 4); // pull out the first word
    oldToggleState = ToggleState; // set a variable
    if (ToggleState == 'Hide') {
      ToggleState = 'Show';
    } else {
      ToggleState = 'Hide';
    }
    toggles = document.getElementsByClassName('abstractToggle'); // get all toggles
    for (i = 0; i < toggles.length; i++) { // loop through all toggles
      toggledID = toggles[i].id; // get the id of each toggle button
      ToggleAbstract(toggledID, ToggleState); // run the toggle function
    }
    var newToggleText = thisToggleText.replace(thisToggleStateText, oldToggleState);
    thisToggle.innerHTML = newToggleText;
  } catch (e) {
    console.log('ToggleAllAbstracts(): ' + e);
  }
}

/* This function toggles the class on the button, which is all we need to display the abstract. It also toggles the plain text value as well as the ARIA label. */
function ToggleAbstract(thisID, globalToggle) {
  try {
    //alert(globalToggle);
    thisButton = document.getElementById(thisID);
    thisButtonText = thisButton.textContent;
    thisButtonClasses = thisButton.classList;
    thisButtonARIALabel = thisButton.getAttribute('aria-label');
    // this is a minus sign: −
    /*
    if (thisButtonText == 'Show abstract') {
      thisButton.textContent = 'Hide abstract';
    } else {
      thisButton.textContent = 'Show abstract';
    }
    */
    if (thisButtonText == '+') {
      thisButton.textContent = '−';
    } else {
      thisButton.textContent = '+';
    }

    if (thisButtonClasses.contains('show')) {
      thisButtonClasses.remove('show');
    } else {
      thisButtonClasses.add('show');
    }
    if (thisButtonARIALabel.substring(0, 4) == 'Show') {
      newARIALabel = thisButtonARIALabel.replace('Show', 'Hide');
      thisButton.setAttribute('aria-label', newARIALabel);
    } else {
      newARIALabel = thisButtonARIALabel.replace('Hide', 'Show');
      thisButton.setAttribute('aria-label', newARIALabel);
    }
  } catch (e) {
    console.log('ToggleAbstract(): ' + e);
  }
}

/* Add the classes to the toggle buttons. Doing it with JavaScript ensures that JavaScript is available, which is necessary for the toggles to work; this is a form of progressive enhancement */
function ActiveAbstractToggles(buttonClass) {
  try {
    toggles = document.getElementsByClassName(buttonClass);
    for (i = 0; i < toggles.length; i++) {
      toggles[i].classList.add('active');
    }
  } catch (e) {
    console.log('ActiveAbstractToggles(): ' + e);
  }
}

window.onload = function() {
  ActiveAbstractToggles('abstractToggle');
};

// Create the variable, also used to see if page is a fresh load
var oldHash;
// Script to identify the tab to highlight
function ChooseTab() {
  try {
    var hash = location.hash.substring(1); // check the URL for a hash
    if (hash.length > 0) { // if there is a hash
      if (oldHash !== undefined) { // if there was an active tab
        var InactiveTab = document.getElementById(oldHash + '_tab'); // Get the tab with the old ID
        InactiveTab.removeAttribute('class'); // unstyle it as the selected tab
        InactiveTab.removeAttribute('aria-selected'); // make it the selected tab
      }
      var ActiveTab = document.getElementById(hash + '_tab'); // Get the tab with that ID
      ActiveTab.className = 'sel'; // style it as the selected tab
      ActiveTab.setAttribute('aria-selected', true); // make it the selected tab
      oldHash = hash;
    }
  } catch (e) {
    console.log('ChooseTab(): ' + e);
  }
}

ChooseTab(); // run this on page load
window.onhashchange = ChooseTab; // run it again each time the URL changes

style.css

@import url(http://fonts.googleapis.com/css?family=Lato:400,700);
body {
  background-color: #6D695C;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAACVBMVEUAAAAAAAAAAACDY+nAAAAAA3RSTlMmDQBzGIDBAAAAG0lEQVR42uXIIQEAAADCMHj/0NdkQMws0HEeAqvwAUGJthrXAAAAAElFTkSuQmCC);
  font-size: 100%;
  color: #333;
  font-family: Lato, Arial, sans-serif;
  padding: 0;
  margin: 0;
}

h2 {
  clear: both;
}

a:link,
a:visited,
a:active {
  color: #00f;
}

a:focus,
a:hover {
  color: #c00;
}

sup,
sub {
  font-size: 60%;
  line-height: 0;
}

header {
  margin: 0;
  padding: .5em;
  background-color: rgba(0, 0, 0, .5);
}

header::after {
  content: "";
  display: block;
  clear: both;
  margin-bottom: 1em;
}

header a {
  display: block;
  margin: 1em 0 0 1em;
  border: .2em solid #c90;
  width: 3em;
  color: #fff;
  background-color: #000;
  padding: .25em;
  text-align: center;
  transform: rotate(-365deg);
  transition: all .5s ease-in;
  color: #fff;
}

@media all and (min-width: 24em) {
  header a {
    float: left;
    font-size: 120%;
  }
}

header a:link,
header a:visited,
header a:active,
header a:hover,
header a:focus {
  text-decoration: none;
  color: #fff;
}

header a:hover,
header a:focus {
  color: #fff;
  transform: rotate(0deg);
  border-color: #f00;
  outline: none;
}

main {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: .5em;
  color: #000;
  background-color: rgba(204, 204, 204, .7);
  border: .07em solid rgba(0, 0, 0, .5);
}

@media all and (min-width: 42em) {
  main {
    width: 90%;
    margin: 1em auto;
    padding: 1em 2em;
    border-radius: .5em;
  }
}


/* tables */

table {
  margin: 0 0 1em 0;
  border-collapse: collapse;
  border-bottom: .1em solid #999;
  ;
}

th,
td {
  padding: .25em .5em;
  vertical-align: text-top;
  text-align: left;
  border-right: .1em solid #666;
  border-left: .1em solid #666;
}

table tr td:first-child {
  width: 10%;
}

table tr td {
  width: 45%;
  box-sizing: border-box;
  border-right: .1em solid #999;
  border-left: .1em solid #999;
}

tr:nth-child(even) {
  background-color: rgba(255, 255, 255, .1);
}

tr.current {
  background-color: #eee;
}

th {
  vertical-align: bottom;
  background-color: rgba(0, 0, 0, .6);
  color: #fff;
  font-weight: bold;
}

th a:link,
th a:visited {
  color: #ccc;
}

td a {
  font-weight: bold;
}

td button + p {
  margin-top: 0;
}

td > p:first-child {
  margin-bottom: .5em;
}


/* Abstracts */

.abstractToggle {
  display: none;
}

.abstractToggle.active,
.resetShow {
  display: inline-block;
  margin: 0 1em 1em -.5em;
  padding: .25em .5em;
  font-size: 80%;
  color: #333;
  font-family: Lato, Arial, sans-serif;
  border: .2em solid #999;
  background-color: rgba(255, 255, 255, .25);
  border-radius: 1em;
}

.resetShow:link,
.resetShow:visited {
  color: #333;
  text-decoration: none;
}

td .abstractToggle.active {
  border-radius: 50%;
  line-height: 1;
  font-weight: bold;
  float: left;
  margin: -.2em .5em 0 -.5em;
  padding: .25em .4em;
}

.abstractToggle.active.show {
  background-color: transparent;
}

.abstractToggle.active:focus,
.abstractToggle.active:hover,
.resetShow:focus,
.resetShow:hover {
  border-color: #c90;
  outline: none;
}


/*
.abstractToggle.active + p {
  display: none;
}

.abstractToggle.active.show + p {
  display: block;
}
*/

.abstractToggle.active + p + p {
  display: none;
}

.abstractToggle.active.show + p + p {
  display: block;
}


/* Days */


/* Day tabs */


/* Tab bits */

@media all and (min-width: 42em) {
  .day {
    display: none;
  }
  .day:target {
    display: block;
  }
  .day h2 a {
    display: none;
  }
  #DayChooser {
    display: inline-flex;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    padding: 0;
    border-bottom: none;
  }
  #DayChooser li {
    display: block;
    box-sizing: border-box;
    list-style-type: none;
    margin: 0 0 -.1em 0;
    padding: 0;
    width: 50%;
  }
  #DayChooser a {
    display: block;
    box-sizing: border-box;
    margin: 0 .25em;
    padding: .5em;
    border: .15em solid rgba(0, 0, 0, 0);
    border-radius: .5em .5em 0 0;
    text-align: center;
    text-decoration: none;
    background-color: rgba(0, 0, 0, .5);
    overflow: hidden;
    position: relative;
  }
  #DayChooser a:link,
  #DayChooser a:visited {
    color: #ddd;
  }
  #DayChooser a:hover,
  #DayChooser a:focus {
    border-top-color: #c90;
    border-left-color: #c90;
    border-right-color: #c90;
    outline: none;
  }
  #DayChooser a.sel {
    border-bottom: none;
    color: #333;
    background-color: transparent;
    border-color: rgba(0, 0, 0, .5);
  }
  #ShowAll:target .day {
    display: block;
  }
  #ShowAll:target #DayChooser {
    display: none;
  }
}


/* Accordion bits */

@media all and (max-width: 42em) {
  main {
    margin-bottom: 2em;
  }
  #DayChooser {
    display: none;
  }
  .showall .day {
    display: block;
  }
  .day table {
    display: none;
  }
  h2 {
    margin-bottom: 0;
  }
  table {
    width: 100%;
  }
  h2 a {
    position: relative;
    display: block;
    border: .1em solid #666;
    border-radius: .5em;
    text-decoration: none;
    padding: .5em 1em .75em 1em;
    background-color: rgba(0, 0, 0, .5);
    overflow: hidden;
  }
  h2 a:link,
  h2 a:visited {
    color: #ddd;
  }
  h2 a::after {
    content: "\25b6";
    display: block;
    position: absolute;
    top: .5em;
    right: 1em;
    color: #333;
  }
  h2 > span {
    display: none;
  }
  .day:target table,
  #ShowAll:target table {
    display: table;
  }
  .day:target h2 a::after,
  #ShowAll:target h2 a::after {
    content: "\25bc";
    top: .75em;
  }
  .day:target h2 a,
  #ShowAll:target h2 a {
    border-radius: 1em 1em 0 0;
    border-bottom: none;
    padding-bottom: .75em;
    color: #fff;
  }
  #Reset,
  #Show {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 50%;
    background-color: #000;
    padding: .5em;
    text-align: center;
    color: #fff;
    text-decoration: none;
    border: none;
    /* override class */
    border-radius: 0;
    /* override class */
    margin: 0;
    /* override class */
    font-size: 100%;
    /* override class */
    border-bottom: .1em solid #666;
  }
  #Show {
    left: 50%;
    right: 0;
    border-left: .1em solid #666;
  }
}