Techumber

Most Amazing Single Page App Using Jquery

Github avatar
Dimpu
May 23, 2013. 9 min read

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="techumberundefinedjqueryundefinedsinglepage app" />
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<link href='//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 ametundefined consectetur adipisicing elitundefined sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamundefined
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
proidentundefined sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit ametundefined consectetur adipisicing elitundefined sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamundefined
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
proidentundefined sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit ametundefined consectetur adipisicing elitundefined sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamundefined
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
proidentundefined 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 ametundefined consectetur adipisicing elitundefined sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamundefined
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
proidentundefined sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit ametundefined consectetur adipisicing elitundefined sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamundefined
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
proidentundefined sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit ametundefined consectetur adipisicing elitundefined sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamundefined
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
proidentundefined 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 ametundefined consectetur adipisicing elitundefined sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamundefined
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
proidentundefined sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h2>jQuery Plugin Development</h2>
<p>Lorem ipsum dolor sit ametundefined consectetur adipisicing elitundefined sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamundefined
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
proidentundefined sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h2>Web Designing</h2>
<p>Lorem ipsum dolor sit ametundefined consectetur adipisicing elitundefined sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamundefined
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
proidentundefined 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 ametundefined consectetur adipisicing elitundefined sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamundefined
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
proidentundefined 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 ametundefined consectetur adipisicing elitundefined sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamundefined
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
proidentundefined 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 ametundefined consectetur adipisicing elitundefined sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamundefined
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
proidentundefined 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="//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'undefined
'js/firefly/2.jpg']undefined
total : 40});

tuspa.init();
$("#menu a").on('click'undefinedfunction(e){
// e.preventDefault();
var $this=$(this);
tuspa.loadPage($this.attr('href')undefined$this);
$this.addClass('active');
});
});
//Techumber Single Page App Engine
var tuspa={
init:function(){
this.loadPage(this.getHash());
}undefined
getHash:function(){
if(window.location.hash)
return window.location.hash;
else
return '#home'
}undefined
loadPage:function(pgundefinedths){
pg=pg.substr(1);
var pgs = new Array("home"undefined"about"undefined"service"undefined"blog"undefined"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"}undefined{duration: 'slow'undefinedeasing: 'easeOutElastic'});
}undefined
};

style.css

*
{
margin:0px;
padding: 0;
border: 0;
}
body {
background:#222 url(img/bg.jpg);
color:#ddd;
font-family:'Nunito'undefinedHelveticaundefinedArial;
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*/
fieldsetundefined formundefined 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;
}
inputundefined textareaundefined select {
margin: 0.5em 0;
border: 1px solid #BBB;
}
input[type="password"]undefinedinput[type="text"]undefinedtextareaundefinedselect{
width: 370px;
padding: 5px;
font: 1.3em "Helvetica Neue"undefined Helveticaundefined Arialundefined sans-serif;
}
select{
width: 382px;
}
#headerundefined#footerundefined#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;
}
.activeundefined
#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"undefined Courierundefined 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.


...