Response title
This is preview!
Move this topic
[jQuery] Reversing the SlideUp and SlideDown functions to slide from the bottom and not the top
in Using jQuery
•
13 years ago
I saw this was posted before, but there was never a solution posted. I
want to use the Toggle function but have it slide up from the bottom
of the div instead of the top, I have tried searching through all the
plugins, and even tried writing my own but have had no luck. If
there's anyone who can help me I would be extremely grateful.
Replies(2)
<html><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><div apple-content-edited="true"><span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0; "><div style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; ">
</div></span></div><div><div>On Jan 27, 2009, at 11:07 PM, ryjohnson wrote:</div><br class="Apple-interchange-newline"><blockquote type="cite"><div>
I saw this was posted before, but there was never a solution posted. I
want to use the Toggle function but have it slide up from the bottom
of the div instead of the top, I have tried searching through all the
plugins, and even tried writing my own but have had no luck. If
there's anyone who can help me I would be extremely grateful.
</div></blockquote></div>
<div><div>The easiest way I have found to accomplish this is through CSS:</div><div>
</div><div>#myDiv {</div><div> position: absolute; /* could also be relative */</div><div> left: 0;</div><div> bottom: 0; /* *** this is the important one *** */</div><div>}</div><div>
</div><div>You'll have to tweak things to work in your situation, and you may have to add a height and width if you're setting position:absolute.</div><div>
</div><div>I implemented this "reverse slide" effect here:</div><div><a href="http://www.littleorangestar.com/">http://www.littleorangestar.com/</a></div><div>
</div><div>When you click on one of the badges, you'll see a "lightbox" effect, but also, if you look at the bottom of the viewport, you'll see the "close" bar slide up into view.</div><div><br class="Apple-interchange-newline">--Karl</div><div>____________</div><div>Karl Swedberg</div><div><a href="http://www.englishrules.com">www.englishrules.com</a></div><div><a href="http://www.learningjquery.com">www.learningjquery.com</a></div><div>
</div></div></body></html>
</div></span></div><div><div>On Jan 27, 2009, at 11:07 PM, ryjohnson wrote:</div><br class="Apple-interchange-newline"><blockquote type="cite"><div>
I saw this was posted before, but there was never a solution posted. I
want to use the Toggle function but have it slide up from the bottom
of the div instead of the top, I have tried searching through all the
plugins, and even tried writing my own but have had no luck. If
there's anyone who can help me I would be extremely grateful.
</div></blockquote></div>
<div><div>The easiest way I have found to accomplish this is through CSS:</div><div>
</div><div>#myDiv {</div><div> position: absolute; /* could also be relative */</div><div> left: 0;</div><div> bottom: 0; /* *** this is the important one *** */</div><div>}</div><div>
</div><div>You'll have to tweak things to work in your situation, and you may have to add a height and width if you're setting position:absolute.</div><div>
</div><div>I implemented this "reverse slide" effect here:</div><div><a href="http://www.littleorangestar.com/">http://www.littleorangestar.com/</a></div><div>
</div><div>When you click on one of the badges, you'll see a "lightbox" effect, but also, if you look at the bottom of the viewport, you'll see the "close" bar slide up into view.</div><div><br class="Apple-interchange-newline">--Karl</div><div>____________</div><div>Karl Swedberg</div><div><a href="http://www.englishrules.com">www.englishrules.com</a></div><div><a href="http://www.learningjquery.com">www.learningjquery.com</a></div><div>
</div></div></body></html>
Leave a comment on kswedberg's reply
Use the effects in jQuery-UI when you need more than basic slideUp/
slideDown. Using show & hide with the appropriate options will allow
you to slide in any direction. You also have a lot more effects to
choose from then just 'slide'
To open by sliding 'up', and close in reverse...
$E.show( 'slide', {direction: 'up'} );
$E.hide( 'slide', {direction: 'up'} );
To use a 'drop' effect instead of 'slide'...
$E.show( 'drop', {direction: 'up'} );
$E.hide( 'drop', {direction: 'up'} );
You can find details in the jQuery docs:
http://docs.jquery.com/UI/Effects
/Kevin
Leave a comment on ALLPRO's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to ryjohnson's discussion