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>
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
* elements and call the callback method.
[]'.card a[data-method="push"]'),
* 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
* attributes.
var pageid = this.href.hash;
* This calls the goToCard method that will load the content with the
* specified pageID.
Search WWH ::

Custom Search