CODEWITHSUNDEEP
jquerysliding
Aditya
Aditya

Reputation: 1755

How to add Sliding affect to Jquery Top Panel

I am using a top Panel Drop Down. Something similar to this http://www.yootheme.com/tools/extensions/yootoppanel

Initially it was in mootools. But i was having issues in IE8. So i thought to change it to Jquery. I have made the slidedown and slide up functionality. But i am unable to add the sliding affect. As far as coding is concerned, I have called a function on click event of the button. Which adds height, position etc when sliding down and removes it while sliding up. 

function toggle(articleheight,height) {
        if(height < 0){
        slideIn(articleheight);
        }
    else{
        slideOut(articleheight);
        }
     }
function slideIn(articleheight){
    jQuery(".panel").css("margin-top",0);
    jQuery(".panel-wrapper").css("height",articleheight);

}
function slideOut(articleheight){
    jQuery(".panel").css("margin-top",-articleheight);
    jQuery(".panel-wrapper").css("height",0);

}

My HTML code

<div id="toppanel" class="toppanel">

        <div class="panel-container">
            <div class="panel-wrapper">
                <div class="panel">
                    <div class="content">
                        MY CONTENT
                    </div>
                </div>
            </div>

            <div class="trigger" style="<?php echo $css_left_position ?>">
                <div class="trigger-l"></div>
                <div class="trigger-m">Panel</div>
                <div class="trigger-r"></div>
            </div>
        </div>

    </div>

Please help

Upvotes: 0

Views: 2455

Answers (2)

user106197
user106197

Reputation:

I would consider using the jQuery sliding effects

Examples are included in the api reference

http://api.jquery.com/category/effects/sliding/

I added a quick example, you can easily make the height variable:

http://jsfiddle.net/dmpWa/19/

Upvotes: 1

Sinetheta
Sinetheta

Reputation: 9449

As suggested, slide effect. jsFiddle If you're coming from mootools to jquery you might want to stop bothering with dozen of functions. Simple declarative jquery will kill easy things like this one. 

<div class="topPanel"></div>
<div class="topTab"><a href="#">Top Panel</a></div>

...

$('.topTab a').toggle(function(){
    $(this).parent().prevUntil('.topTab').slideDown();
},function(){
    $(this).parent().prevUntil('.topTab').slideUp();
});

Upvotes: 0

Related Questions