PDA

View Full Version : Collapsible Panel trouble? Or Blind?


Chrisreardon
02-26-2009, 04:53 AM
I'm having trouble.
I'm trying to create a top 'collapsible' panel like this website here.
www.newspring.cc

I've tried both blind effects to an image and collapsible panels but can't figure out the setup for it.

Whenever I use blind effect it still shows the top image when I preview it. I can't get it to hide.

Is there a way to use the collapsible panel but move the tab (top) section below the content?

I need the button or control to be below the content.

Thanks for any thoughts.

edbr
02-26-2009, 05:24 AM
cant see what you are describing

Corrosive
02-26-2009, 12:11 PM
I'm having trouble.
I'm trying to create a top 'collapsible' panel like this website here.
www.newspring.cc

I've tried both blind effects to an image and collapsible panels but can't figure out the setup for it.

Whenever I use blind effect it still shows the top image when I preview it. I can't get it to hide.

Is there a way to use the collapsible panel but move the tab (top) section below the content?

I need the button or control to be below the content.

Thanks for any thoughts.

Hi Chris

You might want to try this...

http://www.javascriptkit.com/script/script2/dropdownpanel.shtml

...to get what you need.

Plug n play :)

Chrisreardon
02-26-2009, 01:04 PM
Thanks for your find.
Heres what I came up with but theres a big gap around the top image I replaced.

Is there no way for me to accomplish this with Spry 'Blind' or a Spry collapsible panel?

http://www.cccsumter.com/beta/test/home.html

Corrosive
02-26-2009, 01:17 PM
Thanks for your find.
Heres what I came up with but theres a big gap around the top image I replaced.

Is there no way for me to accomplish this with Spry 'Blind' or a Spry collapsible panel?

http://www.cccsumter.com/beta/test/home.html

Sorry, I don't know about Spry as I have never had a call to use it and tend to prefer to use jquery, scriptalicious etc. You could try specifying a height on the '#dropdownpanel .contentdiv'. I.e. the height of your .png graphic.

Chrisreardon
03-18-2009, 01:32 PM
Sorry, I don't know about Spry as I have never had a call to use it and tend to prefer to use jquery, scriptalicious etc. You could try specifying a height on the '#dropdownpanel .contentdiv'. I.e. the height of your .png graphic.

The dropdown panel you suggested is working right, but when I click it to drop it down it moves behind the menu and some fading images i have in the middle.

Do you know how I can move it above the other content to see it, or to have it push everything else down?

http://www.cccsumter.com/beta/home.html

Thanks

Mr. Tweedy
04-07-2009, 04:39 AM
I don't know if this will help you or not, but I was having a similar problem on this page (http://calebhugo.com/works_hub.php). (In progress; don't judge.) I used the standard Dreamweaver "blind" effect to make the sheet music expand, but it caused the divs to stick at whatever width they were when the effect was triggered instead of keeping the variable width of the layout. I solved this problem by going into "SpryEffects.js" and making the following substitution in the "Spry.Effect.Blind" function:

toRect.width = originalRect.width; and fromRect.width = originalRect.width

to

toRect.width = "auto"; and fromRect.width = "auto"

I think that if you put your drop-down panel in a div of "100%" width, you should be able to achieve the effect you want using the modified "blind" effect. The effect will push the other content down and the modification will eliminate the unsightly borders.

Sorry if my explanation is sloppy. I'm pretty much a noob. I just happened to have googled this thread in my search for a solution and thought I'd share the answer I found.