CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sirac
Sirac

Reputation: 693

jQuery - slide down panel

I want to create a website where the user has to enter soma data. To make this as easy as possibble, i just show the main input elements and let a helper panel slide down if needed. As possible, these panels should be draggable (i am looking for javascript for that in the moment). My main problem is that when the panel slides down, the content at the top is shown first, but i want to slide down like shown below:

slide-down1

slide-down2

slide-down3

Is there any way to make this?

Thanks in advance.

Upvotes: 1

Views: 1763

Answers (2)

jave.web
jave.web

Reputation: 15052

Quick access: Fiddle: http://jsfiddle.net/VuPyL/1/ (updated) , BTW: I made it toggle-like.

Generally it seems to be only solve-able with animate, if you dont want to have any wrapper element you would really like to use DOM's native property "scrollHeight" - that allows you to scroll always to bottom, in combination with a height toggle, it does exactly what you need.

Overflow: hidden dont have to be in the CSS - jQuery is adding it itself while toggling height.

This solution may seem a bit longer, but is more clear in what is actually happening :) :

HTML

<div id="helper-panel">
    Here's
    <br />
    My
    <br />
    Content    
</div>
<button id="show-helper">Show/hide Helper Panel</button>

CSS

#helper-panel{
   height: 70px;
   width: 375px;
   position: relative;
   overflow: hidden; /*optional - jQuery is adding it*/ 
   display: none;
}

JS/jQuery

$('#show-helper').click(function(){
    var $helper = $('#helper-panel');
    $helper.animate({
        height: "toggle"
    },{
        duration: 800,
        progress: function(){
            $helper.scrollTop( $helper[0].scrollHeight );       
        }
    });
});

As suggested by @Andrew Pope to have item draggable/droppable it is best to use jQuery UI's draggables&droppables.

Also check sortable if you just want to change the order of the helper-menu items using drag&drop ;)

jQuery UI is not a standard part of jQuery - so dont forget to include it.
When using these it is good to wrap each draggable element. So the HTML would be:

<div id="helper-panel">
    <div>Here's</div>
    <div>My</div>
    <div>Content</div>    
</div>

And the jQuery (with jQuery UI):

$('#helper-panel').sortable() //make the items inside #helper-panel sortable
                  .disableSelection() //when sorting, you dont want selecting
                  .css('cursor','default'); //looks better with default cursor

Upvotes: 1

Andy
Andy

Reputation: 4778

Look at this JSFiddle.

This should show the principle to achieve this effect. You need a container div with overflow: hidden; and a child positioned to the bottom of the container div, then you can change the height of the container with jQuery to show/hide the content.

Also, to make the panels draggable, jQuery UI has a great function called draggable which works great. Give it a try.

Upvotes: 1

Related Questions