Side Panels

sorry...I was talking about the collapse feature...which in windows xp is used on the sidebar of every window. I'm glad jack was able to figure out what I meant.

Ah! The accordion. Yes. I assume Jack will be releasing it.

At which point I will throw my old accordion widget into the dustbin of "not quite good/integrated enough" code! :roll: :lol:

ah, i see the distinction. accordian entire collapses all other divs but this collapses , expands only the div in . Maybe the same widget can support a property to handle both cases.

Sanjiv

I noticed the that you implemented Side Panels that collapse and expand in your Downloads Dialog.

Will there be a Side Panels feature in the next release?

I also noticed some form action going on...will that be in there too?

I don't know what you mean by Side Panels? The download dialog looks like a standard tabset with the second one having an east/west split. Is it that east/west split that you're referring to?

sjivan, I've used Rico's Accordion widget before...it's great.

That's not what talking about though. With the Accordion widget, only one div can be viewed at a time. I'd like to have multiple panels open at once. But, to do so, I'd like the collapser panel to check the heights of the other panels and make sure it doesn't grow beyond the height of the container that is holding all of them.

hope that clears things up.

I just wrapped the dialog in a form. That was a snap. Optionally having the dialog do this automatically if definitely a possibility.

The collapser is a short and simple class I whipped up using autoHeight():

var Collapser = function(clickEl, collapseEl){
this.clickEl = getEl(clickEl);
this.collapseEl = getEl(collapseEl);
this.clickEl.addClass('collapser-expanded');
this.clickEl.mon('click', function(){
this.collapsed === true ?
this.expand() : this.collapse();
}, this, true);
};

Collapser.prototype = {
collapse : function(){
this.collapseEl.clip();
this.collapseEl.setHeight(1, true, .35, this.afterCollapse.createDelegate(this), YAHOO.util.Easing.easeOut);
},

afterCollapse : function(){
this.collapsed = true;
this.collapseEl.setDisplayed(false);
this.clickEl.replaceClass('collapser-expanded','collapser-collapsed');
},

expand : function(){
this.collapseEl.setDisplayed(true);
this.collapseEl.autoHeight(true, .35, this.afterExpand.createDelegate(this), YAHOO.util.Easing.easeOut);
},

afterExpand : function(){
this.collapsed = false;
this.collapseEl.unclip();
this.collapseEl.setStyle('height', '');
this.clickEl.replaceClass('collapser-collapsed','collapser-expanded');
}
};

would there be a way to have a maxHeight variable with this...so if you expand a collapser and its height is larger than its container it would stop at maxHeight...or better yet, it would stop at the height of its container?

make any sense?

I just whipped it up. It's nothing special. A more configurable one that is part of yui-ext is definitely not a bad idea.

sorry...I was talking about the collapse feature...which in windows xp is used on the sidebar of every window. I'm glad jack was able to figure out what I meant.

Thats called an Accordion widget.

Jack, it will be great if you can bundle that code as a reusable widget.

Here's how Rico allows you to setup it up :

div id='accordionDiv'>
div id='overviewPanel'>
div id='overviewHeader'>
Overview

#If you have any other info about this subject , Please add it free.#

7 January 2009 | cameltoepants.com | edit