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.

Get posts by email

Like what you're reading? Get these posts delivered to your inbox.