Carousel

stubbornella edited this page Sep 13, 2010 · 4 revisions

Documenting how this should work.

  • 100% of the width of its parent container, adapts to any sized container.
  • Controls can be above, below, or right/left.
  • Items width must be set in pixels (they can’t be %, no way to inherit container width from parent’s parent)
  • Ideally it would not have half-items visible, in JS remove the extra bit or expand the units to fill more space?

Brainstorming common markup for tabs, carousel, toggle, and accordion using the html5 syntax.

tabs

<div class="section tabs">
  <div class="control">
    <ul> <!-- menu? -->
      <li>Tab 1</li>
      <li>Tab 2</li>
      <li>Tab 3</li>
    </ul>
  </div>
  <div class="details open"> Content Area </div>
  <div class="details"> Content Area </div>
  <div class="details"> Content Area </div>
</div>

toggle block

<div class="section toggle">
  <div class="control">
    <h1>Clicking on me toggles the display of the content area</h1>
  </div>
  <div class="details open"> Content Area </div>
</div>

Carousel

<div class="section carousel">
  <div class="control"> radio buttons for section and buttons for left/right or top/bottom scroll </div>
  <div class="details open"> Content Area </div>
</div>

Accordion

<div class="section accordion">
  <div class="section">
    <div class="control">
      <h1>Clicking on me opens the adjacent accordion content area</h1>
    </div>
    <div class="details open"> Content Area </div>
  </div>
  <div class="section">
    <div class="control">
      <h1>Clicking on me opens the adjacent accordian content area</h1>
    </div>
    <div class="details"> Content Area </div>
  </div>
  <div class="section">
    <div class="control">
      <h1>Clicking on me opens the adjacent accordian content area</h1>
    </div>
    <div class="details"> Content Area </div>
  </div>
</div>
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.