-
Notifications
You must be signed in to change notification settings - Fork 18
Getting started
- Download the project files: zip, tar or fork it.
- Browse to
index.htmlfrom your desktop and mobile. - Edit the file to your liking and make it your own.
If you got a server that runs php, start with index.php so you could enjoy TouchyPHP which enables embedding assets into the page (potentially speeding up load time).
There's a whole lot you can do with the Touchy projects. Full documentation can be found in TouchyJS and TouchyPHP.
Before starting, make sure touchy.js is loaded into the page.
Here's a few quick ones:
Your HTML structure should look like this:
<html>
<head>
<style>
.touchy-js{display: none}; /* To avoid a flash of content */
</style>
</head>
<body>
<!-- header -->
<div class="touchyjs-header">
...
</div>
<!-- content page #1 -->
<div class="touchyjs-content" id="page1">
...
</div>
<!-- content page #2 -->
<div class="touchyjs-content" id="page2">
...
</div>
</body>
</html>
Reload the page. Now, only the first "page" is displayed. Insert some content into it, refresh the page and drag the content up and down. The header part stays while the content scrolls. Neat.
You can use TouchyJS.Nav to control navigation and history handling. Make sure you provide id attributes to the .touchyjs-content elements.
Insert a link in the first page, that executes TouchyJS.Nav.goTo("page id"). Like so:
<!-- content page #1 -->
<div class="touchyjs-content" id="page1">
<a href="" onclick="TouchyJS.Nav.goTo('page2'); return false;">Go to next page</a>
...
</div>
Don't forget adding return false so a redirect is prevented.
Let's put a back button in the header:
<!-- header -->
<div class="touchyjs-header">
<a href="" onclick="TouchyJS.Nav.back(); return false;" class="btn-back">Back</a>
</div>
Click it, and the first page comes into view.
Of course, TouchyJS.Nav.goTo('page1') would have worked just as well, but "back/forward" browser button functionality would have been lost.
The only problem now is that the back button is visible even in the first page. No good. We want it to appear upon navigation and disappear when returning. TouchyJS.Nav can handle that with it's attachCallback method. Quick code:
<script>
var button = $("btn-back");
// Show button when navigating out of the first page
TouchyJS.Nav.attachCallback("page1", "out", function(){
button.show();
});
// Hide it when returning
TouchyJS.Nav.attachCallback("page1", "in", function(){
button.hide();
});
</script>
TouchyJS.Nav is even smarter than that, letting you attach function to address change events. More on that in the full documentation.