javascript - Ratchet Push.js Not Pushing -
i've build php app on top of codeigniter, works moving controller controller (.php files) instead of 1 static page (.html files).
problem: links reject work.
i'm not sure problem, but i've gone through docs , seems exception in comparing source code - i'm calling .php file instead of .html file.
before inquire - on system, booknav viable controller, loading viable view upon clicking it.
also - can see snippet here working. i'm trying debug - how come snippet here sends link, while equivalent on server not?
here eventual html file: class="snippet-code-html lang-html prettyprint-override"><!doctype html> <html> <head> <meta charset="utf-8"> <title>project</title> <!-- including ratchet css + js + custom css !--> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-status-bar-style" content="black"> <link href="//cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/css/ratchet.css" rel="stylesheet" /> <script src="//cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/js/ratchet.js"></script> </head> <body> <header class="bar bar-nav"> <h1 class="title">select book</h1> </header> <div class="content"> <div class="card"> <ul class="table-view"> <li class="table-view-cell"> <a class="navigate-right" href="booknav" data-transition="slide-in"> <span><strong> book 1</strong></span> </a> </li> <li class="table-view-cell"> <a class="navigate-right" href="booknav" data-transition="slide-in"> <span><strong> book 2</strong></span> </a> </li> <li class="table-view-cell"> <a class="navigate-right" href="booknav" data-transition="slide-in"> <span><strong> book 3</strong></span> </a> </li> </ul> </div> </div> </body> </html>
if click link , browser navigates http://yourwebserver/projectroot/booknav rather swapping page content transition animation, because you're not emulating device in browser. push.js isn't triggered because touchend event isn't fired. utilize chrome developer tools, or install ripple.
ratchet adds handler window touchend events, intercepts navigation , loads entire target page separately dom, , swaps new contents content containers on dom.
some general requirements running ratchet.js
1) testing app running within web server or deployed device. 2) must utilize emulator trigger touch events (or run on device) 3) page content needs formatted. should have matching header, footer, nav, content elements on each page. there should no missing data-transition tags on links.
you can trigger touch events in chrome enabling developer tools , enabling device emulation, or library hammer.js touch emulator. if trigger click, bypass push.js , browser navigate isn't want.
if content isn't formatted, browser reload page whatever current location is, isn't want.
javascript ratchet-2 ratchet-bootstrap
No comments:
Post a Comment