Skip to content

Instantly share code, notes, and snippets.

@handerson
Created October 21, 2011 12:23
Show Gist options
  • Save handerson/1303684 to your computer and use it in GitHub Desktop.
Save handerson/1303684 to your computer and use it in GitHub Desktop.
body {
background-color: #C5CCD6; /* Background color */
color: #222; /* Foreground color used for text */
font-family: Helvetica;
font-size: 14px;
margin: 0; /* Amount of negative space around the outside of the body */
padding: 0; /* Amount of negative space around the inside of the body */
-webkit-user-select: none;
overflow-x: hidden;
}
h1{
font: bold 18px "Helvetica Neue", Helvetica;
text-shadow: rgba(255,255,255,.2) 0 1px 1px;
color: rgb(76, 86, 108);
}
.header h1{
text-overflow: ellipsis;
color: #fff;
}
.header {
position:absolute;
top:0; left:0;
width:100%;
height:45px;
line-height:45px;
background: url(images/toolbar.png) #6d84a2 repeat-x;
-webkit-box-sizing: border-box;
border-bottom: 1px solid #2d3642;
padding:0;
color:#eee;
font-size:20px;
text-align:center;
}
.button{
position: absolute;
overflow: hidden;
top: 8px;
right: 6px;
margin: 0;
border-width: 0 5px;
padding: 0 3px;
width: auto;
height: 30px;
line-height: 30px;
font-family: inherit;
font-size: 12px;
font-weight: bold;
color: #fff;
text-shadow: rgba(0, 0, 0, 0.5) 0px -1px 0;
text-overflow: ellipsis;
text-decoration: none;
white-space: nowrap;
background: none;
-webkit-border-image: url(images/toolButton.png) 0 5 0 5;
}
#header div.leftButton {
position: absolute;
top: 7px;
left: 6px;
height: 30px;
font-weight: bold;
text-align: center;
color: white;
text-shadow: rgba(0,0,0,0.6) 0px -1px 0px;
line-height: 28px;
border-width: 0 8px 0 8px;
-webkit-border-image: url(images/backButton.png) 0 8 0 8;
}
.back {
left: 6px;
right: auto;
padding: 0;
max-width: 55px;
border-width: 0 8px 0 14px;
-webkit-border-image: url(images/backButton.png) 0 8 0 14;
}
.page{
display:none;
position:absolute;
width: 100%;
left: 0px;
min-height: 375px !important;
-webkit-backface-visibility: hidden;
-webkit-box-sizing: border-box;
-webkit-transform: translate3d(0px, 0px, 0px) rotate(0deg) scale(1);
display: none;
}
.page.active{
display:block;
}
.pages{
position:relative;
}
/*
* jQuery Mobile Framework
* Copyright (c) jQuery Project
* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
*/
/* Transitions from jQtouch (with small modifications): http://www.jqtouch.com/
Built by David Kaneda and maintained by Jonathan Stark.
*/
.in, .out {
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-duration: 350ms;
}
.slide.in {
-webkit-transform: translateX(0);
-webkit-animation-name: slideinfromright;
}
.slide.out {
-webkit-transform: translateX(-100%);
-webkit-animation-name: slideouttoleft;
}
.slide.in.reverse {
-webkit-transform: translateX(0);
-webkit-animation-name: slideinfromleft;
}
.slide.out.reverse {
-webkit-transform: translateX(100%);
-webkit-animation-name: slideouttoright;
}
@-webkit-keyframes slideinfromright {
from { -webkit-transform: translateX(100%); }
to { -webkit-transform: translateX(0); }
}
@-webkit-keyframes slideinfromleft {
from { -webkit-transform: translateX(-100%); }
to { -webkit-transform: translateX(0); }
}
@-webkit-keyframes slideouttoleft {
from { -webkit-transform: translateX(0); }
to { -webkit-transform: translateX(-100%); }
}
@-webkit-keyframes slideouttoright {
from { -webkit-transform: translateX(0); }
to { -webkit-transform: translateX(100%); }
}
/*scroll wrapper*/
.wrapper {
position:absolute; z-index:1;
top:45px;/* bottom:48px;*/ left:0;bottom: 0px;
width:100%;
overflow:hidden;
}
.scroller{
position:relative;
/* -webkit-touch-callout:none;*/
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-box-sizing: border-box;
box-sizing: border-box;
float:left;
width:100%;
padding:0 10px 0 10px;
}
//#########################
// Configuration
//#########################
//**************************
// Global Variables
//**************************
var currentPage;
//**************************
// Utilities
//**************************
function preventBehavior(e){
e.preventDefault();
};
// simple changePage without transition animation
function simpleChangePage($to, $from ){
currentPage = "#" + $to.attr("id")[0];
$from.removeClass("active");
$to.addClass( "active" );
window.scrollTo(0,0);
saveNavigationState();
reverseTransition = false; // reset the transition animation to forward
x$(document).fire('changePageComplete');
}
function changePage(reverse, $to, $from ){
var name = "slide";
var reverseClass = reverse ? " reverse" : "",
donefunc = function(){
$to.removeClass( "out").removeClass( "in").removeClass( "reverse").removeClass( name );
if ( $from ) {
$from.removeClass( "out").removeClass( "in").removeClass( "reverse").removeClass( name );
$from.removeClass("active");
}
$to.un('webkitAnimationEnd', donefunc);
saveNavigationState();
reverseTransition = false; // reset the transition animation to forward
x$(document).fire('changePageComplete');
};
// transitioning to and from the same page causes no page to be shown, so fallback to simpleChagePage
if($to.attr("id")[0] !== $from.attr("id")[0]){
currentPage = "#" + $to.attr("id")[0];
$to.on('webkitAnimationEnd', donefunc);
if ( $from ) {
$from.addClass( name ).addClass( "out").addClass( reverseClass );
}
$to.addClass( "active" ).addClass( name ).addClass( "in").addClass( reverseClass );
}else{
simpleChangePage($to, $from );
}
}
// checks the network status using the phonegap api
function checkConnection() {
if(navigator.network){
var networkState = navigator.network.connection.type;
if(networkState === Connection.NONE){
navigator.notification.navigator.notification.alert(
'This app requires a network connection to function.', // message
'No Network Connection', // title
'Continue' // buttonName
);
}
}
}
/*
* JavaScript Simple Template
* Copyright (c) John Resig (jquery.com)
*/
/*
Examples:
assert( tmpl("Hello, <%= name %>!", {name: "world"}) ==
"Hello, world!", "Do simple variable inclusion." );
var hello = tmpl("Hello, <%= name %>!");
assert( hello({name: "world"}) == "Hello, world!",
"Use a pre-compiled template." );
*/
(function(){
var cache = {};
this.tmpl = function tmpl(str, data){
// Figure out if we're getting a template, or if we need to
// load the template - and be sure to cache the result.
var fn = !/\W/.test(str) ?
cache[str] = cache[str] ||
tmpl(document.getElementById(str).innerHTML) :
// Generate a reusable function that will serve as a template
// generator (and which will be cached).
new Function("obj",
"var p=[],print=function(){p.push.apply(p,arguments);};" +
// Introduce the data as local variables using with(){}
"with(obj){p.push('" +
// Convert the template into pure JavaScript
str
.replace(/[\r\t\n]/g, " ")
.split("<%").join("\t")
.replace(/((^|%>)[^\t]*)'/g, "$1\r")
.replace(/\t=(.*?)%>/g, "',$1,'")
.split("\t").join("');")
.split("%>").join("p.push('")
.split("\r").join("\\'")
+ "');}return p.join('');");
// Provide some basic currying to the user
return data ? fn( data ) : fn;
};
})();
//#########################
// Application
//#########################
//**************************
// Helper Functions
//**************************
//**************************
// Models
//**************************
var Example = function(){
return {
init: function(){
}
};
}();
//**************************
// Templates/Views
// - includes templates
// - not initialized until page loads
//**************************
var Views = {
init: function(){
Views.test = tmpl("test");
}
}
var EventListeners = function(){
return {
init: function(){
}
};
}();
//**************************
// Controllers/Routing
//**************************
function Controllers(){
var StartController = function(){
changePage(true, x$("#start"), x$(currentPage));
};
var AboutController = function(){
x$("#about .scroller").html(Views.test({testoutput: "Hello"}));
changePage(false, x$("#about"), x$(currentPage));
};
Hasher.add("/about", AboutController);
Hasher.add("/start", StartController);
Hasher.setup();
}
//**************************
// Initialization
//**************************
//prevent dragging,
document.addEventListener("touchmove", preventBehavior, false);
function onDeviceReady(){
checkConnection();
new FastClick(document.body);
Views.init();
Example.init();
Controllers();
EventListeners.init()
window.location = "#/start";
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" id="viewport" content="initial-scale=1.0,user-scalable=no">
<title>Mobile App</title>
<script src="js/json2.js" type="text/javascript"></script>
<script src="javascript/phonegap-1.0.0.js" type="text/javascript"></script>
<script src="js/xui.min.js" type="text/javascript"></script>
<script src="js/jquerycompat.js" type="text/javascript"></script>
<script src="js/iscroll.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="js/fastclick.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/hasher.js"></script>
<script src="javascript/application.js" type="text/javascript"></script>
<link rel="stylesheet" href="application.css" type="text/css" media="screen" />
</head>
<body onload="docReady();">
<script type="text/tmpl" id="test">
<p><%=testoutput%></p>
</script>
<div class="pages">
<div class="page" id="start" >
<div class="header">
<h1>Mobile App</h1>
<a class="button" href="#about">About</a>
</div>
<div class="content pinstripes wrapper">
<div class="scroller">
<p>test content</p>
</div>
</div>
</div>
<div class="page" id="about" >
<div class="header">
<a class="button leftButton back" href="#start">Back</a>
<h1>About</h1>
<a class="button" href="#about">About</a>
</div>
<div class="content pinstripes wrapper">
<div class="scroller">
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment