HTML and CSS Reference
In-Depth Information
Paging with a Single-Page Container
Paging with a single-page container allows you to create a set of cards within a
deck in a single HTML page and navigate between them using JavaScript. As
your application grows, this could produce potential problems with trying to
manage numerous sections/features containing several cards. The solution to
this would be to split each deck or set of features into several HTML pages.
Within each HTML page, would be a deck of cards related to that particular
feature. To navigate between the different decks, you could either pull them in
via Ajax, or use standard HTML to navigate to and from them without animation.
Creating a single-page container mobile web application is simple, and works in
much the same way as the Ajax method.
First, create a folder within the exercise folder called
container
. Within this
folder, create a folder called
css
. Create a new CSS file called
mobile.css
and
add the CSS from Listing 4-5.
Listing 4-5.
CSS for Single-Page Container
/**
* Sets the body, html, and deck element styles
*/
body, html, #deck {
height: 100%; /** Sets the height of the document to 100% of the viewport **/
overflow: hidden; /** Set so that all content that flows outside is hidden
**/
margin: 0; /** The body's margin is usually never 0, so this removed any
margin **/
position: realtive; /** The card will be positioned relative to the deck **/
}
/**
* The card within the deck's styles
*/
#deck .card {
overflow: auto; /** If there is too much content, this lets the user scroll
**/
height: 100%; /** Sets the height of the card to be 100% **/
position: absolute; /** Allows the card to be absolutely positioned **/
left: -100%; /** Sets the default position to be off the screen (hidden) **/
width: 100%; /** Sets the width of the card to be the width of the deck **/
}
/**
* Sets the active card style so that it is visible when the class is added to
it
*/
