Menu
i am trying to implement the push.js engine from ratchet:
http://maker.github.com/ratchet/#push
i downloaded the ratchet files from here:
http://maker.github.com/ratchet/ratchet.zip
and am using apache to serve all js, css and html. all files are in the same directory.
here is my one.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ratchet template page</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Include the compiled Ratchet CSS -->
<link rel="stylesheet" href="ratchet.css">
<!-- Include the compiled Ratchet JS -->
<script src="ratchet.js"></script>
</head>
<body>
<!-- Make sure all your bars are the first things in your <body> -->
<header class="bar-title">
<h1 class="title">one.html</h1>
</header>
<!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->
<div class="content">
<ul class="list">
<li>
<a href="two.html">
<strong>two</strong>
<span class="chevron"></span>
</a>
</li>
</ul>
</div>
</body>
</html>
and here is my two.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ratchet template page</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Include the compiled Ratchet CSS -->
<link rel="stylesheet" href="ratchet.css">
<!-- Include the compiled Ratchet JS -->
<script src="ratchet.js"></script>
</head>
<body>
<!-- Make sure all your bars are the first things in your <body> -->
<header class="bar-title">
<h1 class="title">two.html</h1>
</header>
<!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->
<div class="content">
<ul class="list">
<li>
<a href="one.html">
<strong>one</strong>
</a>
</li>
</ul>
</div>
</body>
</html>
how do i link these two files together?
it looks like push.js is included but when i clicking on the a href's does nothing.
i feel like i am missing something glaringly obvious about this implementation.
thanks for the help.
296
Ratchet works off of touch events, which are not available in your browser. In Chrome go to chrome://flags/ and enable "Force enable touch events". That should do the trick for browser development. If you want to make this work on desktops without the flag you are going to need a js framework to convert touch events to pointer events. Something like https://github.com/maker/ratchet/blob/master/docs/js/fingerblast.js should do the trick.
126
Ratchet uses touch events on mobile devices that are different than the pointer events used in a desktop browser.
You can use the Chrome flags as mentioned in earlier answers or your can use @fat's fingerblast.js that converts touch events to pointer events.
The fingerblaster.js file can be found here: https://github.com/stephanebachelier/fingerblast.js
IMPORTANT: In order to enable fingerblaster.js you need to include a script such as the following at the end of your body element (once your html content has loaded):
<script type='text/javascript'>
var fb = new FingerBlast ('body');
</script>
This will create a new FingerBlast object and set the listener on body of the html document (you can put any css selector string in place of 'body').
10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
