Most Amazing Single Page App Using Jquery
Published on May 23, 2013
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.
Screen Shots
Home
About
service
blog
404 page
Contact
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='//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="//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.