Resizing DIV according to collapsiblePanel state

Hello,

I'm trying to resize a div on the moment the collapsiblePanel either expands or collapses.

The page I have is roughly like follows;

1<table>2 <tr>3 <td>4 <div id="cpPanelHeader">5 panel header6 </div>7 <div id="cpPanelContent">8 panel content9 </div>10 <ACT:CollapsiblePanelExtender11 TargetControlID="cpPanelContent"12 ExpandControlID="cpPanelHeader"13 CollapseControlID="cpPanelHeader" />14 </td>15 </tr>16 <tr>17 <td>18 <div id="PageContent">19 main page content20 </div>21 </td>22 </tr>23</table>

the first table cell houses some general information, enclosed in the collapsible panel. the second table cell houses the page content.

on the moment that the collapsible panel collapses or expands i want to make sure the main page content is spread over the available space. therefore i want to be able to set the height property of the PageContent div. I first tried some codebehind to set the style.height of the div, but this prop is read only. then i changed the div into a panel, and set the panel.height prop. this didn't seem to work; the panel did not shrink or grow, no matter what value I set the height to. Then i tried to use client javascript, but i cant get hold of the panelstate inside of the javascript.

Can anyone point out to me how to solve this problem?

Regards,

Francois

Hi Francois,

You can add event handler for the panel's collapsed and expanded event, and resize the div in the handler.

First, assign a behaviorID to the CollapsiblePanelExtender;

Second, retrieve it with $find method;

Third, Add event handler for it;

For instance:

<ajaxToolkit:CollapsiblePanelExtender ID="cpeDemo"BehaviorID="cpe"...... />

function pageLoad()

{

var cpb = $find("cpe");

cpb.add_expanded(myFunction1); cpb.add_collapsed(myFunction2);

}

function myFunction1() {//resize div here}

Hope this helps.

Hello Raymond,

I'm fiddling with your approach. one thing that doesn't work yet is the adding of the event handlers.

the code I have is as follows;

 function OnLoad() { alert('OnLoad'); var cpb = $find('cpBID'); cpb.add_expanded(ResizeDIVOnPanelExpanded); cpb.add_collapsed(ResizeDIVOnPanelCollapsed); } function ResizeDIVOnPanelExpanded() { alert('OnPanelExpanded'); } function ResizeDIVOnPanelCollapsed() { alert('OnPanelCollapsed'); }

I registered this code with the scriptmanager as follows;

protected void Page_Load(object sender, EventArgs e) { ScriptManager.RegisterStartupScript(this,typeof(GS_CasusAanpassen),"start","OnLoad();",true); }

Now, I do get the OnLoad message. but after that it's all quit. is it something I did wrong with adding the event handlers?

Or do I have to set the script on another place?

Kind Regards and thanks for helping out!

Francois

Finally

It seems I was hooking up the wrong events. while searching throught the forum I stumbled accross the following thread;

http://forums.asp.net/p/1112899/1721250.aspx#1721250

Following that thread I solved my problem as follows:

 <script language="javascript" type="text/javascript"> function pageLoad() { var cpb = $find("collapsibleBehavior"); cpb.add_expandComplete( ResizeDIVOnPanelExpanded ); cpb.add_collapseComplete( ResizeDIVOnPanelCollapsed ); } function ResizeDIVOnPanelExpanded() { document.getElementById('MainContentDIV').style.height = '250px'; } function ResizeDIVOnPanelCollapsed() { document.getElementById('MainContentDIV').style.height = '500px'; } </script>

This works well. It would be nice thought if the size would change fluently and not at once. a bit like the collapsible panel itself maybe.