HTML and CSS Reference
In-Depth Information
#deck .card.active {
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
body.
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.
*/
document.querySelectorAll('.card.active')[0].classList.remove('active');
/**
* Adds the active CSS class to the target card and brings it into view.
*/
document.querySelectorAll(to)[0].classList.add('active');
}
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>
