teaching machines

CS 318: Lab 18 – Tabbed Viewing

April 9, 2018 by Chris Johnson. Filed under cs318, lectures, spring 2018.

Dear students,

Last time we started implementing dropdown menus. We decided to continue that effort today, though I do want to add one extra and related exercised: a tabbed viewer.

Here’s your TODO list:

• Breathe easy!

See you next time!

Sincerely,

Lab

First, we finish up our lab 17 exercise on switching between small and large displays of our nav links.

Second, create a lab18 directory. Add a partners.html and include your first names and last initials. In this exercise, we’ll tackle the task of presenting content in tabs.

Tabs

Create a second page named tabs.html and an accompanying stylesheet named tabs.css. Your goal is to create a page that allows the viewer to switch between views within a single web page. Something like this:

I suggest tackling this exercise in this order:

• Create a div with an ID of parent.
• Create within parent three divs of class tab. Give each a unique ID. Give as content the labels of the tabs.
• Style the tabs as inline blocks (so they appear on the same line) and with a light background color, a fixed width, some padding, and rounded top corners. You know, like tabs.
• Switch the tab buttons’ cursor to pointer.
• Add a :focus pseudoselector rule for these tabs so that focused tabs have a darker background color. The :focus pseudo-selector is much like :hover, but focus can “stick.” It is activated when the viewer clicks on an item. This is important for us, because unlike :hover, we want a tab to stay selected even after the mouse moves on.
• You’ll find that your :focus rule doesn’t have any effect. That’s because divs aren’t naturally focusable. In the HTML, add a tabindex attribute of 0 to each of your tab buttons. The name is coincidental. tabindex refers to the actual Tab key on your keyboard, not the tabbed view that we are trying to create. Pressing the Tab key cycles through the focusable elements in the page, and by giving your divs a tabindex, they become focusable. The numeric value of the tabindex imposes an ordering on the focusable elements. After setting it, you should be able to see your focused tab button show prominently against its neighbors.
• Disable the outline that appears around your tab button by setting a tab’s outline property to none.
• Add another div to parent for the default view. (Your parent should now have four children.) Give it the ID panel0 and class panel. Give panel0 the muted background color that you used for non-focused tab buttons. It will hold the default content when no tab has been focused. Put whatever you want in it.
• Add three more divs to parent for the views that will appear when their corresponding tab is focused. Give them IDs panel1, panel2, and panel3. Put them all in the class panel. Give them each some unique content so that you can test your work. Give one an image, another a paragraph of text, and another a list or quote.
• Style the panel class to appear below the tabs. This is most easily done with absolute positioning. First, give parent relative positioning so it can serve as an anchor point. Then give panel absolute positioning. Anchor the left edge against the anchor’s left edge. Offset them from the top of their anchor by the height of the tabs. We don’t know exactly how tall the tabs are, so use a relative measure. You should see them all stack on top of each other below the buttons.
• Color all panels by the darker, focused color. panel0 should override this to use the lighter, unfocused color.
• Probably your tab views are filling the whole page. Make parent display as an inline-block so it automatically sizes itself around its children and doesn’t greedily eat up the browser window. Alternatively, one could leave it as block and just explicitly set the width.
• Hide all the panels using the display property.
• Override panel0 so that it always displays as a block element.
• Override each of your other panels so that they display as block elements only when their corresponding button is focused. We can use the sibling selector to achieve this:

  #tab3:focus ~ #panel3 {
    ...
  }
  

  Read this as “select the element with an id of panel3, such that it is a sibling element of a focused element with an id of tab3.” When the button’s not focused, the general panel rule takes effect and hide that tab’s content. Unfortunately, no comprehensive rule can be written to apply to all three views at once. You will need three separate rules.
• Give yourself a high five.

Publish and Validate

Commit and push your work. Verify that all pages have been uploaded by visiting https://USERNAME.github.io/cs318/lab17 and https://USERNAME.github.io/cs318/lab18 in your browser.

Validate your pages with the W3C Validator. Paste in the URLs to your pages, one at a time, and address all concerns raised by the validator. Fix your changes on the local machine, commit, and push until the validator reports no errors or warnings.