Most Amazing Single Page App Using Jquery

Sinlge Page Apps are really amazing in may aspects. They can save your bandwidth, your time and you can add amazing animations to your apps very easily.
There are tools like jquery scroll path.js,curtion.js and so on…. Recently most of the developers using backbone.js to create single page application. But in this post we will create single page app using only jQuery nothing else. This is very useful if you want to create some simple site. So let’s do it.


demo
download

Screen Shots

Most Amazing Single Page App Using JqueryHome
Most Amazing Single Page App Using JqueryAbout
service
Most Amazing Single Page App Using Jqueryblog
Most Amazing Single Page App Using Jquery404 page
Most Amazing Single Page App Using JqueryContact

index.html

<!DOCTYPE html> 
<html class="no-js" lang="en" manifest="mainfest.appcache"> 
<head> 
<title>Amazing Single Page App using jquery:Techumber </title> 
<meta content='Amazing Single Page App using jquery:Techumber ' name='description'/> 
<meta name="keywords" content="techumber,jquery,singlepage app" /> 
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/> 
<link href='http://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css'> 
<link href='css/style.css' rel='stylesheet' type='text/css'> 
<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script> 
<script type="text/javascript" src="js/jquery-firefly-0.1.js"></script> 
<script type="text/javascript" src="js/app.js"></script> 
</head> 
<body> 
<header id='header'> 
<div class="logo"> 
<img src='css/img/logo.png' /> 
</div> 
<menu id="menu"> 
<ul> 
<li><a rel="about" href="#home" class='active'>home</a></li> 
<li><a rel="product" href="#about">about</a></li> 
<li><a rel="work" href="#service">Service</a></li> 
<li><a rel="services" href="#blog">Blog</a></li> 
<li><a rel="contact" href="#contact" title='contact'>Contact</a></li> 
</ul> 
</menu> 

</header> 
<div class="clr"></div> 
<div id='main'> 
<div class='maincontent ' id='home'> 
<h2>WelCome to Techumber</h2> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

</div> 
<div class='maincontent goTop' id='about'> 
<h2>About us!</h2> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

</div> 
<div class='maincontent goTop' id="service" > 
<h2>PSD2HTML</h2> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
<h2>jQuery Plugin Development</h2> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
<h2>Web Designing</h2> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
</div> 
<div class='maincontent goTop' id='blog'> 
<h3>Arical Title 1</h3> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est <a href="#">Read More....</a></p> 
<h3>Arical Title 2</h3> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est <a href="#">Read More....</a></p> 
<h3>Arical Title 3</h3> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est <a href="#">Read More....</a></p> 
</div> 
<div class='maincontent goTop' id="404" > 
<div style="text-align:center;margin:30px auto;"> 
<h2>404</h2> <br /> <p>Page Not Found.</p> 
</div> 
</div> 
<div class='maincontent goTop ' id='contact' > 
<form id="contactForm" method="post" action=''> 
<fieldset> 
<legend>Contact Us</legend> 
<div> 
<label for="ContactName">Name</label> 
<input focus="focus" name="name" type="text" maxlength="100" value="" id="name" class='inputx'> 
</div> 
<div > 
<label >Email</label> 
<input name="email" type="text" maxlength="255" value="" id="email" class='inputx'> 
</div> 
<div > 
<label for="ContactMessage">Message</label> 
<textarea name="message" cols="30" rows="6" id='message'></textarea> 
</div> 
<input type="button" value="SEND" id='send'> 
</fieldset> 
</form> 
</div> 
</div> 
</div> 
<footer id="footer"> 
<div id="credit">Copyright 2012-2013 <a href="http://www.techumber.com/" style="color:#AFAFAF;">Techumber</a>. All rights reserved. 
</div> 
</footer> 
</body> 
</html> 

app Engine

Logic is petty simple. We simple get hash code or href value(when clicked on menu links). Then we will look for id with same hash value and will disply that div with some animation and hide all other divs that’s it. We using jquery.easing plugin for animation effect. Added firefly for nice spark fly effect.

$(function(){ 
//Fire fly plug in init 
$.firefly({images : [ 
'js/firefly/1.jpg', 
'js/firefly/2.jpg'], 
total : 40}); 

tuspa.init(); 
$("#menu a").on('click',function(e){ 
// e.preventDefault(); 
var $this=$(this); 
tuspa.loadPage($this.attr('href'),$this); 
$this.addClass('active'); 
}); 
}); 
//Techumber Single Page App Engine 
var tuspa={ 
init:function(){ 
this.loadPage(this.getHash()); 
}, 
getHash:function(){ 
if(window.location.hash) 
return window.location.hash; 
else 
return '#home' 
}, 
loadPage:function(pg,ths){ 
pg=pg.substr(1); 
var pgs = new Array("home","about","service","blog","contact"); 
if(pgs.indexOf(pg) == -1){ 
pg = '404'; 
} 
var mc=$('.maincontent'); 
$("#menu a").removeClass('active'); 
mc.css({'margin-top': "-600px"}); 
mc.addClass('goTop'); 
$('#'+pg).removeClass('goTop'); 
$('#'+pg).animate({'margin-top': "0px"},{duration: 'slow',easing: 'easeOutElastic'}); 
}, 
}; 

style.css

* 
{ 
margin:0px; 
padding: 0; 
border: 0; 
} 
body { 
background:#222 url(img/bg.jpg); 
color:#ddd; 
font-family:'Nunito',Helvetica,Arial; 
font-size:20px; 
} 
a{ 
color:#80c8ca; 
text-decoration:none 
} 
a:hover{ 
color:#80c8ca; 
text-decoration:underline 
} 
p { 
margin: 0 0 1.5em; 
} 
.clr{ 
clear: both; 
} 
/*Form Elements*/ 
fieldset, form, label { 
border: 0; 
font-weight: inherit; 
font-style: inherit; 
font-size: 100%; 
font-family: inherit; 
vertical-align: baseline; 
margin: 0; 
padding: 0; 
} 
label { 
font-weight: bold; 
display: block; 
} 
input, textarea, select { 
margin: 0.5em 0; 
border: 1px solid #BBB; 
} 
input[type="password"],input[type="text"],textarea,select{ 
width: 370px; 
padding: 5px; 
font: 1.3em "Helvetica Neue", Helvetica, Arial, sans-serif; 
} 
select{ 
width: 382px; 
} 
#header,#footer,#main{ 
width: 1000px; 
margin:0 auto; 
} 
#header{ 
height:100px; 
} 
#header .logo{ 
float:left; 
margin-top:10px; 
width:200px; 
} 
#menu { 
margin-top:40px; 
right: 0px; 
top: 9px; 
float:right; 
} 
#menu ul { 
list-style:none; 
margin: 0px 0px 0px 0px; 
} 
#menu ul li a { 
font-size: 12px; 
display: inline-block; 
padding: 0px 10px; 
height: 25px; 
width: auto; 
min-width: 40px; 
line-height: 25px; 
margin-left: 18px!important; 
background: transparent; 
color: #ddd; 
text-decoration: none; 
font-weight: bold; 
} 
#menu ul li { 
text-transform: uppercase; 
list-style-type: none; 
display: inline; 
} 
.active, 
#menu ul li a:hover { 
background-color:#0349e0; 
border-radius: 4px; 

} 
.active { 
background-color:#0349e0 !important; 

} 
.maincontent 
{ 
min-height:520px; 

} 
.goTop{ position:absolute; top:-600px; } 
#main h2{ 
text-align: center; 
margin: 10px auto 10px; 
color: #0349e0; 
} 
#main h3{ 
margin: 10px auto 10px; 
color: #0349e0; 
} 
#main p a{ 
color: #0349e0; 
} 
/*Contact Form */ 
#contactForm fieldset{ 
border: 1px solid #ddd; 
padding: 20px; 
border-radius: 3px; 
} 
#contactForm #send 
{ 
font-size: 13px; 
display: inline-block; 
padding: 0px 10px; 
height: 25px; 
width: auto; 
min-width: 40px; 
line-height: 25px; 
color: inherit; 
text-decoration: none; 
font-weight: bold; 
background: #0349e0; 
border: 0; 
border-radius: 5px; 
} 
#footer{ 
margin: 5px auto 10px; 
border: 1px solid #ddd; 
border-radius:5px; 
color: #ffffff; 
font-size: 11px; 
padding: 20px; 
text-align: left; 
-moz-border-radius: 9px; 
-webkit-border-radius: 9px; 
font-family: "Courier New", Courier, monospace; 
} 
#credit{ 
text-align: center; 
} 

mainfest.appcache

CACHE MANIFEST 
index.html 
style/style.css 
css/img/bg.png 
css/img/Logo.png 
js/jquery.min.js 
js/jquery.easing.1.3.js 
js/jquery-firefly-0.1.js 
js/app.js 

FALLBACK: 
/ no-internet.html 

NETWORK: 
* 

Conclusion

This kind of apps will be very useful for simple static like sites. If you want to create some very complex mvc pattern site you better depend on other libraries like backbone.js.