HTML and CSS Reference
In-Depth Information
mechanism for AJAX response insertion and handling concurrent calls ( https://
devices ) . You also can leverage some new features of HTML5 for parsing the
sponseText .
You can build on the code from the slide, flip, and rotate demos by adding some sec‐
ondary pages and linking to them. You can then parse the links and create transitions
on the fly.
<div id= "home-page"
class= "page" >
<h1> Home Page </h1>
<a href= "demo2/home-detail.html" class= "fetch" >
Find out more about the home page!
As you can see, this snippet leverages semantic markup with a link to another page. The
child page follows the same node/class structure as its parent. You could take this a step
further and use the data-* attribute for page nodes, and the like.
Here is the detail page (child) located in a separate HTML file ( /demo2/home-
detail.html ), which will be loaded, cached, and set up for transition on app load.
<div id= "home-page-detail"
class= "page" >
<h1> Home Page Details </h1>
<p> Here are the details. </p>
Now take a look at the JavaScript. For simplicity's sake, I'm leaving any helpers or op‐
timizations out of the code. The code is looping through a specified array of DOM nodes
to dig out links to fetch and cache. For the complete source, see
html5e/slidfast/blob/master/slidfast.js#L264 .
var fetchAndCache = function ()
// iterate through all nodes in this DOM to
//find all mobile pages we care about
var pages = document . getElementsByClassName ( 'page' );
for ( var i = 0 ; i < pages . length ; i ++ ) {
// find all links
var pageLinks = pages [ i ]. getElementsByTagName ( 'a' );
for ( var j = 0 ; j < pageLinks . length ; j ++ ) {
var link = pageLinks [ j ];
if ( link . hasAttribute ( 'href' ) &&
//'#' in the href tells us that this page is
//already loaded in the DOM - and
// that it links to a mobile transition/page
Search WWH ::

Custom Search