PDA

View Full Version : Resolved DD Drop Down Panel combined with Dynamic Ajax Content



poopcake
01-16-2010, 06:15 PM
Okay so I've decided to give up the fancy drop down effects and go with the Switch Content (http://www.dynamicdrive.com/dynamicindex17/switchcontent.htm) script.

Hi there. I'm making a website which combines two scripts I found on the Dynamic Drive website. The one script is the DD Drop Down Panel (http://www.dynamicdrive.com/dynamicindex17/dddropdownpanel.htm) script, and the other is the Dynamic Ajax Content (http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm) script.

I'm trying to create a page where the user can open a seperate box with additional content. This content is loaded from a seperate page, and isn't loaded until the user opens the box. It should be similar to how it works on YouTube pages (http://www.youtube.com/watch?v=_OBlgSz8sSM): Click "Statistics and Data" (under the video but above the comments) and it will reveal a box saying "Loading..." until the actual content is loaded, then it resizes the box's height so all the content is readable.

What is basically happening is that I have an 'unopened' panel that only opens when the "Toggle box" button is pressed. This is done using the Drop Down Panel script. Inside the unopened panel is no content yet; instead, there's only a "Loading..." message inside seperate <div></div> tags. Once the "Toggle box" button is pressed, the page will be loading a remote page named "test.htm" inside the <div></div> tags (for now, this is an image of a nerd behind a computer).

(I have a version of the page where I'm trying to do this all here (http://129.125.102.80/directory/thing.html), for your reference.)

I've already managed to call into action both Javascript scripts when one presses the "Toggle box" button. The problem, however, is that the box's height doesn't resize according to the amount of content from the test.htm page. Instead, the box's height resizes according to what was inside before (which was basically the "Loading..." message which got replaced later).

This is all quite logical, but it's not what I want: I want the box's height to resize according to the contents of the test.htm page.

I've been thinking of just going for a toggleable version of the Dynamic Ajax Content script, but I have zero experience in Javascript/AJAX coding, and I would prefer the fancy dropping down effect to be there. And I really *don't* want the content to load unless the user asks the page for it.

Would it be possible to get this working properly using these two scripts? Or do I have to sacrifice the dropping down effect, in which case I could really use some help with getting a workable toggle function on the Dynamic Ajax Content script?

poopcake
01-16-2010, 07:31 PM
Sorry, replying to my own thread here.

Perhaps another solution would be to call in a third script that activates the "load external content" script first and after that the "toggle box" script. But I'm afraid the "toggle box" script checks for the length it should be when the page loads, which means the problem still wouldn't be solved. I'm completely stuck now.