HTML and CSS Reference
In-Depth Information
* This will prevent the browser from following the URL.
You use the same style of JavaScript as the Ajax method to bind events to links
with the push data attribute. Within the event listener, you get the hash from the
link using this.href.hash . This is passed to the goToCard method from Listing
4-5, which removed the active class from the visible card and adds it to the
card to be shown to the user. The complete code example can be seen in
Listing 4-10.
Listing 4-10. Complete Single-Page Container Example
<!DOCTYPE html>
<html lang="en-GB" dir="ltr">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0;
maximum-scale=1.0; user-scalable=0; target-densitydpi=device-dpi;"/>
<title>Single Page Container</title>
<link rel="stylesheet" type="text/css" href="css/mobile.css" />
<div id="deck">
<section class="card active" id="card-index">
<h1>Page 1</h1>
<a data-method="push" href="#card-second-page">Page 2</a>
<section class="card" id="card-second-page">
<h1>Page 2</h1>
<a data-method="push" href="#card-third-page">Page 3</a>
<section class="card" id="card-third-page">
<h1>Page 3</h1>
<a data-method="push" href="#card-index">Page 1</a>
[]'.card a[data-method="push"]'),
Search WWH ::

Custom Search