Portland Community College | Portland, Oregon Portland Community College

Web services

Pagination

Pagination links let users navigate through a series of steps or sequential content, with each step on a different page. We use two different types of pagination:

  • Number: Users can navigate by clicking on the numbers or by using the back and next arrows.
  • Letter: Good for A to Z index lists (like the IT services list and the Intranet forms page). Letters with entries link to that section of the page, and letters without entries are grayed-out/inactive.

Number pagination development info

  • Stylesheet location: /source-v6/styles/components/_pagination.scss
  • id="pagination"
  • It’s possible for JavaScript to generate the pagination (as opposed to building it by hand, which is also an option). If there’s a need, we can move the script from Panther Tracks to the general website.
  • <div id="pagination">
  <ol class="local-nav">
    <li class="back-button">
      <a href="" class="prev">
        back 
        <span>number of previous page</span> 
        <span class="epithet">Title of previous page</span>
      </a>
    </li>
    <li>
      <a href="">
        <span>1</span>
        <span class="epithet">Title of page 1</span>
      </a>
    </li>
    <li>
      <a href="">
        <span>2</span>
        <span class="epithet">Title of page 2</span>
      </a>
    </li>
    <li>
      <a href="">
        <span>3</span>
        <span class="epithet">Title of page 3</span>
      </a>
    </li>
    <li class="next-button">
      <a href="" class="next">
        next 
        <span>number of next page</span> 
        <span class="epithet">Title of next page</span>
      </a>
    </li>
  </ol>
</div>

Letter pagination development info

  • Stylesheet location: /source-v6/styles/components/_pagination.scss
  • class="azIndex"
  • It’s possible for JavaScript to generate the pagination (as opposed to building it by hand, which is also an option). Talk to Keith.
  • <!-- the pagination -->
<div class="azIndex">
  <ul>
    <li data-index="A"><a href="#a">A</a></li> <!-- active -->
    <li class="jxAzEmpty" data-index="B"><a href="#b">B</a></li> <!-- inactive -->
    <li data-index="C"><a href="#c">C</a></li> <!-- active -->    
    ...
  </ul>
</div>

<!-- the content -->
<div class="jxAzList"> <!-- could also be an indexlist -->
  <div data-index="A">
    <h4 id="A">A</h4> <!-- whatever heading level you need -->
    <!-- ul if indexlist, or other content -->
    <!-- no B, so go straight to C (in this example) -->
    <h4 id="C">C</h4>
    ...
  </div>
</div>
</div>

Styling

Pagination looks similar to other websites that have sequential series of pages, such as Google Search.

  • Numbers: Links are displayed as numbers in chronological order. When you hover over the numbers, that page’s title appears. Users can also use the back and next arrows to navigate. A turquoise box shows your current location in the series.
  • Letters: Active letters look like buttons (teal background with white text), and inactive letters are grayed-out. The letters go across the page in a horizontal row.
Responsive behavior
  • Numbers: On large screens, the pagination links display in a long, horizontal line. On small screens, the back and next arrows stack on top of the numbers. On very small screens, the numbers wrap to form a grid.
  • Letters: On large screens, the pagination links display in a long, horizontal line. As soon as the page becomes too narrow, each letter box will drop to the next line and form a second (or third) row.

Number pagination

Letter pagination

Jump to: