Nov/090
Write a Bouncing Accordian with JQuery
The following example is of a bouncing accordian. The idea behind a bouncing accordian is to use ajax to pull content for a number of pages and populate a central div with that data. The content area on the main page will fade out resize to 0px and then rsize again back to a new height with the new content displayed. The following is the result of the labour.
So, now that you’ve had a peek at it working you can look over the code. The first thing is folder structure. I like base folder > assets > and then folders for each asset like > ajax for the pages of content and css for css and so on. The following is the HTML and JQUERY all on one page as its fairly simple to put together.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <title> Bouncing Accordian </title> <link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.ico" /> <link rel="stylesheet" type="text/css" media="screen" href="assets/css/style.css" /> <script type="text/javascript" src="assets/js/jquery.js"></script> <script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#nav_list li').live('click', function(e) {
loadContent(e.target.id);
});
function loadContent(pgNum){
$('#ajax').animate({'height' : '0px', opacity : 0}, 1000, function(){
//console.log($('#'+this.id).height());
$('#'+this.id).load('assets/ajax/' + pgNum + '.html', function(){
$('#'+this.id).animate({'height' : '420px' , opacity : 1}, 1000);
});
});
}
});
</script> </head> <body> <div id="main"> <div id="container" class="aligncenter"> <div id="nav"> <ul id="nav_list" class="aligncenter"> <li id="page1" >Home</li> <li id="page2">About</li> <li id="page3">Contact</li> </ul> </div> <div id="content"> <div id="ajax"> <img src="http://bulk.destructoid.com/ul/122540-hands-on-yakuza-3-japanese-demo/wow-468x.jpg" width="460px"/> </div> </div> <div id="footer"> <div>© Threadbare Canvas Productions & James Hogan</div> </div> </div> </div> </body> </html>
That was easy, a couple of lines of jquery and youve got a neat effect. Add some CSS for Style.
body{margin:0; padding:0px; background-color: #bdbdbd;}
a{text-decoration:inherit; color: inherit;}
.aligncenter{margin-left:auto;margin-right:auto;}
#main{
background-color:#dedede;
font-family:arial;
}
#container{
width:480px;
background-color:#dedede;
}
#nav{
border:5px #efefef solid;
-moz-border-radius:15px;
}
#nav #nav_list{
width:355px;
}
#nav #nav_list li{
display:inline;
margin-left:30px;
padding:5px;
border:1px #ccc outset;
background-color:#cdcdcd;
color:#fefefe;
-moz-border-radius:10px;
font-weight:bold;
cursor:pointer;
}
#content{
-moz-border-radius:15px;
min-height:0px;
padding:5px;
border-left: 5px #efefef solid;
border-right: 5px #efefef solid;
}
#content h1{
font-size:18px;
}
#content p{
font-size:14px;
}
#footer{
-moz-border-radius:15px;
border: 5px #efefef solid;
padding:5px;
text-align:center;
font-size:12px;
}
Also there are three other pages those are the ajax pages that will be dragged in to fill the content area.. So I created three files page1, page2, page3 .html and put them in an ajax folder then I gave an id of page1, page2, page3 to each of the buttons that i wanted to activate the ajax request for the content. The following is the sample content I had in those files.
<h1>Home</h1> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis </p> <p>et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci </p> <p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea</p> <p> commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate</p> <p> velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
And there you have it a few simple files and a few lines of jquery can create a really nice effect for a website. Even if it looks fuggley :). PEACE!!
Enjoy this article?
No comments yet.
Leave a comment
No trackbacks yet.