Using jQuery's SlideUp() and SlideDown() Methods With Bottom-Positioned Elements
Posted January 25, 2010 at 9:58 AM
jQuery makes the creation of dynamic user interfaces easier than ever before. A few of the convenience methods that I use every single in my web application development are slideDown() and slideUp(). These are perfect for showing and hiding content in a non-jarring manner. The slideDown() method shows content by sliding open a given element; the slideUp() method, on the other hand, hides content by sliding closed a given element. These are very basic methods, but I describe them here in order to point out that sometimes, I get so attached the name of a given method, I lose sight of what it's actually doing.
| | | | | |
| | | |||
| | | |
I fell victim to this narrow-sightedness just last week. I had an element with a fixed position in which its position was defined using the, "bottom," CSS property. Essentially, I had a bottom window user interface panel. Now I didn't want this panel to be shown all the time; sometimes it would need to be out of sight, and sometimes, I wanted it to slide up onto the screen. I was so used to sliding things DOWN with jQuery, that when it came to sliding things UP, I was so out of context that I actually started to use the animate() method to achieve the slide-up effect.
After I got this approach to work, including the offset calculation and re-positioning that I needed to perform prior to slide-up, I had a "well d'uh" moment! It suddenly dawned on me that the methods "slideDown" and "slideUp" weren't just for "down" and "up" directions, respectively - they were for "open" and "close" actions in general. That's when I realized that the slideDown() method could be used to open an element in an upward direction.
Launch code in new window » Download code as text file »
- <!DOCTYPE HTML>
- <html>
- <head>
- <title>jQuery SlideDown() / SlideUp() With Bottom-Positioned Elements</title>
- <style type="text/css">
-
- #container {
- bottom: 0px ;
- display: none ;
- left: 20px ;
- position: fixed ;
- width: 90% ;
- }
-
- #inner {
- background-color: #F0F0F0 ;
- border: 1px solid #666666 ;
- border-bottom-width: 0px ;
- padding: 20px 20px 100px 20px ;
- }
-
- </style>
- <script type="text/javascript" src="jquery-1.4.js"></script>
- <script type="text/javascript">
-
- // When the DOM is ready, initialize the scripts.
- jQuery(function( $ ){
-
- // Get a reference to the container.
- var container = $( "#container" );
-
-
- // Bind the link to toggle the slide.
- $( "a" ).click(
- function( event ){
- // Prevent the default event.
- event.preventDefault();
-
- // Toggle the slide based on its current
- // visibility.
- if (container.is( ":visible" )){
-
- // Hide - slide up.
- container.slideUp( 2000 );
-
- } else {
-
- // Show - slide down.
- container.slideDown( 2000 );
-
- }
- }
- );
-
- });
-
- </script>
- </head>
- <body>
-
- <h1>
- jQuery SlideDown() / SlideUp() With Bottom-Positioned Elements
- </h1>
-
- <p>
- <a href="#">Show Div With SlideDown()</a>
- </p>
-
- <div id="container">
- <div id="inner">
-
- Check it out! This DIV is positioned based on its
- very sexy Bottom and then is opened using a slide-down
- animation effect (and closed using a slide-up)
- animation effect.
-
- </div>
- </div>
-
- </body>
- </html>
Once I had this realization, it made so much sense that I was, in fact, more than a little embarrassed that it didn't occur to me sooner. This is just a good reminder to myself to always stop and think about what I'm trying to do philosophically, and not just concentrate on which combinations of methods I need to call in order to accomplish a given task.
Download Code Snippet ZIP File
Post Comment | Ask Ben | Other Searches | Print Page
Newer Post
ColdFusion 9 CFScript Comments Handle Name-Spaces... And Just About Anything
Older Post
Java Matcher's QuoteReplacement() And Java 6 vs. Java 1.4.2
Reader Comments
I've been making use of this functionality over at my freelance site:
@Andy,
Cool effect! Yeah, I feel so silly that I had confusion about this :)
Yeah, that's pretty confusing. Rather than try to keep track in your head that up really means down, you might consider aliasing those methods.
$.fn.slideOpen = $.fn.slideDown;
$.fn.slideClose = $.fn.slideUp;
What about slideToggle()? It will automatically show or hide based upon visibility. Does this fail under certain circumstances?
$(function(){
$('a').click(function() {
$('#container').slideToggle();
});
});
@Patrick,
That's an interesting idea; but, the reality is that the slideDown and slideUp are very descriptive names for the methods. The issue was not with the method name so much as it was with my understanding of what it was doing.
@James,
I was going to go with slideToggle() at first, but I wanted to have the slideDown() and slideUp() method calls being made explicitly in the code (to help the conversation).
It sounds to me as if these methods would have been better named slideOpen(); and slideClose(); :)
@Jeff,
Maybe. I think because the down/up approach is the 99% use case for what they are, that would make sense. Someone could come along and make a slideRight() and slideLeft() method... but again, these are outliers.
I came across this page because I was searching for a certain behavior. I didn't just want the element to slide up; I wanted it's contents to slide up with it. As if the contents were written on a piece of paper that you were sliding up or down. Instead slideUp/Down/Toggle methods change the height of the element shrinking or expanding the element and in the usual case simply cutting off the contents as it gets smaller.
On Jeff's website mentioned above it gives the effect I want: the content slides up as if it were attached to something. However, I want my content to slide from the top not the bottom.
So i found a way to do it by placing my container element within an overflow:hidden wrapper and using the animate method to slide the element up using negative margin. (this is what google is doing on their adwords dashboard gadgets)
Here's the code, sorry for the long post just thought it might help someone looking for the same behavior. :)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.panel { width: 100px; background: #f3f3f3; border: solid #333; border-width: 0px 1px 1px 1px; padding: 1em; }
.dispensor { width: 100px; background: #ccc; border: 1px solid #333; padding: 1em;}
</style>
</head>
<body>
<div class="dispensor">
Dispensor
</div>
<div style="overflow: hidden">
<div class="panel">
<ul>
<li>apple</li><li>bear</li><li>cookie</li></ul>
</div>
</div>
<p>
some stuff below...</p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$(document).click(function () {
if ($('.panel').is(':hidden')) {
$('.panel').show();
$('.panel').animate({ marginTop: '0px' });
}
else {
$('.panel').animate({ marginTop: '-' + $('.panel').height() + 'px' }, function () {
$('.panel').hide();
});
}
});
});
</script>
</body>
</html>
Just a quick fix for the code example above:
$('.panel').height()
should instead be...
$('.panel').outerHeight()
@Thomas,
Not bad. I suppose you could do the same with Top as well as margin.
Ben you are my Hero !
I also found this confusing at first, but not now after I watch this video...
thank you Ben
thanks ben good effect
Awesome. Thanks. I just used it.
@Muhammadiq, @Sabaqahmad, @Derrick,
Glad you guys like it. It's trickier to change the mind set of what the term, "slideDown", actually means than it is to implement.
That's exactly the situation that came to my mind the other day. Saved my life there! xoxo
