HTML and CSS Reference
In-Depth Information
#deck {
left: 0; /** moves the card back into view **/
The first rule in this CSS will set the body , html , and deck to a height of 100% . This
will fill the web browser's viewport with the deck and cards. From here, you set
the overflow to hidden so that any content outside of these elements will be cut
off and not display scroll bars. You also set the margin to 0 ; this will apply only
to the body, but this saves having to write a new CSS rule specifically for the
The second rule sets the style for the cards themselves. Every card has the
overflow set to auto . This will allow users to scroll with their fingers for more
content within the card when the content flows beyond the visible height of the
screen. Each card has a position of absolute so that its position can be placed
anywhere within the deck itself. Doing this allows cards to be placed off screen
when they are not needed. Setting the left CSS rule to -100% will push all non-
active cards within the deck to the width of the viewport to the left so that it isn't
visible to the user.
The third rule sets the CSS rule to active cards. This will set the card's left
position to 0 , which will bring the card back in view for the user. Showing the
card is as simple as adding and removing the active class for the card you want
to present to the user using JavaScript. Listing 4-6 shows how to do this.
Listing 4-6. JavaScript to Show and Hide a Card
function goToCard(to) {
* Gets all cards with the active class and removes it. This hides the card
* from view.
* Adds the active CSS class to the target card and brings it into view.
From the goToCard method, you can see that it takes a to parameter. The to
parameter is a hash taken from the URL in a link from the HTML shown in
Listing 4-7
Listing 4-7. HTML for a Link to Load a Card from the Deck
<a data-method="push" href="#card-index">Page 1</a>
Search WWH ::

Custom Search