Learning jQuery: Horizontal Panel Sliding With animate() function
Spread it!
This post is of the Learning jQuery series. Today, we will learn to use the animate() function to slide the panel to the left. It’s useful for display your options for search page. By a trick, we will make the animation more simple.
Updated: I updated the code in the demo and download file. The previous version get error with IE7 by the extra comma in javascript code. Furthermore, I fixed the issue caused if the Left panel is taller than the Right Panel, the content of left side would be truncated. Thanks to roni & B!
HTML
Look at the demo, someone will think we are gonna create a HTML code like image below …
But we’re not gonna do as above. Because, when you do as above, you have to write javascript code to animate both of your left and right panel. If the left panel animates, but the right panel doesn’t, your right panel will keep the original size. We need to expand the width of right side if the left side animates. So, we are not gonna slide the left panel. The left panel will be inside the content. As the result, when we slide content panel to the left, of course, the left panel will animate, too. Out HTML code is:
The HTML code below is very simple. Copy and paste these HTML code below into your HTML file:
<div id="wrap"> <div id="control"> <a id="controlbtn" class="open" href="http://aext.net" alt="Show/View your stuffs">Hide your stuffs</a> </div> <div id="maincontent"> <div id="linkblock"> <h4>All tags</h4> <ul id="yourlist"> <li> <a href="http://aext.net/category/css/" title="CSS & XHTML"> CSS & XHTML</a> </li> <li> <a href="http://aext.net/category/php/" title="Resources"> PHP</a> </li> <li> <a href="http://aext.net/category/resources/" title="Resources"> Resources</a> </li> <li> <a href="http://aext.net/category/theme-layout/" title="Themes & Layouts"> Themes & Layouts</a> </li> </ul> </div> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi .... </p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi .... </p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi .... </p> </div> </div>
CSS Code
The following css code is used for styling the wrapper:
div#wrap {
position: relative;
width: 800px;
overflow: hidden;
margin: 100px auto 0px auto;
}
Remember to set the overflow hidden. Because, when the animation completed, the panel which one you want to hide, will go to the left side and go out side of the wrap. We use hidden value for overflow to hide this panel.
CSS code below makes up the link button:
a#controlbtn{
color: #333;
text-decoration: none;
display: inline-block;
padding-left: 20px;
}
a#controlbtn.open {
background: transparent url(images/toggle_minus.png) no-repeat left center;
}
a#controlbtn.close {
background: transparent url(images/toggle_plus.png) no-repeat left center;
}
We will change the toggle icon when users click on the link to show or hide the panel.
Anything else with CSS:
div#linkblock {
float: left;
width: 140px;
margin-left: -150px;
border-right: solid 1px #DDDDDD;
}
div#maincontent {
position: relative;
margin-left: 150px;
}
#yourlist {
list-style: none;
margin: 0px;
padding: 0px;
}
#yourlist li {
padding: 3px 5px 3px 0px;
position: relative;
margin-top: 0;
margin-right: 0;
margin-bottom: 5px;
margin-left: 0;
}
#yourlist li a {
color: #D4432F;
padding: none;
margin: none;
}
h4 {
margin: 0px;
font-size: 16px;
line-height: 26px;
color: #333333;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
clear: none;
}
Because, the div#linkblock’s position is absolute, we have to set position of div#maincontent relative. If not, absolute positioning will place based on the body size.
Working with Javascript
At first, we call $(document).ready() function to load everything inside it as soon as the DOM is loaded and before the page contents are loaded.
<script type="text/javascript"> $(document).ready(function() { // We will work here }); </script>
Next, will write some code to know the link click event.
e.preventDefault(); is used for disable default action of the link. When you click on the link, nothing will happen.
$("a#controlbtn").click(function(e) { e.preventDefault(); .... });
Next part, the script need to know when does the panel slide to the left or right.
var slidepx=$("div#linkblock").width() + 10; if (parseInt($("div#maincontent").css('marginLeft'), 10) < slidepx) { $(this).removeClass('close').html('Hide your stuffs'); margin = "+=" + slidepx; } else { $(this).addClass('close').html('Show your stuffs'); margin = "-=" + slidepx; }
slidepx is an amount in pixel that we will slide the panel. We get that by the width of the panel we want to hide, and plus with 10px is the amount that panel margins. See the CSS code to know why I plus 10px here.
Finally, animate the panel by code below.
The first line in the code is used for detecting if the panel is not animating.
if ( !$("div#maincontent").is(':animated') ) { $("div#maincontent").animate({ marginLeft: margin, }, 300); }
Animate with easing jquery plugin:
if ( !$("div#maincontent").is(':animated') ) { $("div#maincontent").animate({ marginLeft: margin, }, { duration: 'slow', easing: 'easeOutQuint' }); }
Related Posts
25 User Comments
Trackbacks/Pingbacks
-
-
02. Nov, 2009
[...] This post was mentioned on Twitter by Lam Nguyen and Web Design News, Web Development News. Web Development News said: Learning jQuery: Horizontal Panel Sliding With animate() function: This post is of the Learni.. http://bit.ly/41flTb #webdevelopment [...]
-
-
02. Nov, 2009
Social comments and analytics for this post…
This post was mentioned on Twitter by prlamnguyen: Learning jQuery: Horizontal Panel Sliding With animate() function http://bit.ly/3e4rJ2...
-
-
02. Nov, 2009
Learning jQuery: Horizontal Panel Sliding With animate() function…
Use the animate() function to slide the panel to the left. Its useful for display your options for search page. By a trick, we will make the animation more simple….
-
-
02. Nov, 2009
[...] Read the original article [...]
-
-
02. Nov, 2009
[...] Visit Source. [...]
-
-
03. Nov, 2009
[...] Learning jQuery: Horizontal Panel Sliding With animate() function [...]
-
-
03. Nov, 2009
[...] Learning jQuery: Horizontal Panel Sliding With Animate() Function [...]
-
-
03. Nov, 2009
[...] Learning jQuery: Horizontal Panel Sliding With animate() function Use the animate() function to slide the panel to the left. It’s useful for display your options for search page. By a trick, we will make the animation more simple. [...]
-
-
04. Nov, 2009
[...] Learning jQuery: Horizontal Panel Sliding With animate() function [...]
-
-
06. Nov, 2009
[...] We Have 30 Beautiful Fat Foots To Respond To The Showcase of Big Heads Guys [...]
-
-
06. Nov, 2009
[...] We Have 30 Beautiful Fat Foots To Respond To The Showcase of Big Heads Guys [...]
-
-
09. Nov, 2009
[...] Learning jQuery: Horizontal Panel Sliding With animate() function [...]
-
-
09. Nov, 2009
[...] We Have 30 Beautiful Fat Foots To Respond To The Showcase of Big Heads Guys [...]
-
-
01. Dec, 2009
[...] 11. Horizontal Panel Sliding With animate() function [...]
-
-
07. Dec, 2009
[...] 11. Horizontal Panel Sliding With animate() function [...]
Leave a Reply
About AEXT.NET
AEXT is a design magazine that publishes all things web design. Articles here are published by web professionals for web professionals featuring tutorials, collections, and resources.
on double click… if you are tricky enought to produce a fast enough double click (I am !
), the link & panels states are not in timed one with the other…
you can manage then to hide the menu, but have the link saying “hide your stuff”.
might need a flag somewhere to prevent the animation to trigger if already running.
Yeah, I know that. That is why I put animation function into the condition block if the animation already running. And the link saying should put in there, too.
IE 7 Throws a JS error, and clicking on show/hide only opens the associated link, no sliding!
I fixed it, thanks for the notification.
I found the error too… fixed it – it was that extra comma, wasn’t it?
Also, here’s another issue:
If the LHS content (the hidden) is taller than the RHS, it truncates.
So the height of the container is dictated by the content on the right, and not both!
I tried to create do an overflow:auto; on the LHS, but doesn’t work. The overflow:auto on the whole container works, but it would be nice to just have the vertical/horizontal scroll bar on the LHS, and not appear all the way over at the right.
Any hints?
Just to clarify…
If the LHS content is taller than the RHS, then add have a scroll-bar appear on the LHS, when setting a min-height for the LHS.
Otherwise, have the LHS AND RHS content both extend the height of the container – not just the RHS as is current.
I updated the demo, check it out, B. Thanks for catching the issue, and … what’s your name?
Thanks for the update… you can find me at http://www.codeproject.com/script/Articles/MemberArticles.aspx?amid=4645907
In safari 4.0.3, the slider doesn’t play well when you try to enlarge the text. The slider will creep across the page with each click. I thought this was because of the extra 10 px inserted into the javascript but that doesn’t seem to be it.
This is a great tutorial. Any guesses on how to trump this bug?
Hi everyone.
I tried this demo on Firefox 3.5.x and IE 8 and it works perfect but under IE 7 it does not.
In IE 7 when you press “hide your stuff”, the right text content goes to the left but the left content does not hide, how can we fix this to make it work on IE 7 ? can enyone help with this please ?
Thanks.
Greetings !!!