HTML and CSS Reference
In-Depth Information
/**
* This will prevent the browser from following the URL.
*/
event.preventDefault();
});
});
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">
<head>
<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" />
</head>
<body>
<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>
<section class="card" id="card-second-page">
<h1>Page 2</h1>
<a data-method="push" href="#card-third-page">Page 3</a>
</section>
<section class="card" id="card-third-page">
<h1>Page 3</h1>
<a data-method="push" href="#card-index">Page 1</a>
</section>
</div>
<script>
[].forEach.call(document.querySelectorAll('.card a[data-method="push"]'),
function(el){
