HTML and CSS Reference
In-Depth Information
From this, you can see that the
data
attribute is used to identify links to be used
to push content to the top of the deck. In this instance, push is used; however,
any other attribute can be used to your requirements. The
href
attribute is
associated with the ID of the card, as shown in Listing 4-8.
Listing 4-8.
HTML for a Deck
<section class="card" id="card-index">
<h1>Page 1</h1>
<a data-method="push" href="#card-second-page">Page 2</a>
</section>
As you can see from this section of code, the
id
of the card is set to
card-index
.
You use
card
as a prefix to help namespace the deck cards. This will prevent
you from inadvertently using
index
for instance on another HTML element,
causing issues with paging. Listing 4-9 shows how to use JavaScript to activate
the pages.
Listing 4-9.
Activating Cards within a Deck
/**
* Works in much the same way as the previous method. It will iterate over all
matched
* elements and call the callback method.
*/
[].forEach.call(document.querySelectorAll('.card a[data-method="push"]'),
function(el){
/**
* As you can see, the callback method is named. Instead of function(event){
* function pushCard(event) is used. This can help with debugging; e.g., in
* the JavaScript stack trace you can see the function's name rather than
* anonymous.
*/
el.addEventListener("click", function pushCard(event){
/**
* This gets the hash (#card-second-page) element of the href in
* the link and assigns it to pageid. The href object has various
* properties, all of which can be found at
* http://www.w3.org/TR/html5-author/urls.html#url-decomposition-idl-
* attributes.
*/
var pageid = this.href.hash;
/**
* This calls the goToCard method that will load the content with the
* specified pageID.
*/
goToCard(pageid);
