PDA

View Full Version : Problem with jquery .load()



paparappa
11-02-2010, 10:20 AM
Hi everyone! Im new here and this is my first post!

I'm playing around with the dynamicdrive animatedcollapse jquery plugin and I'll have to tell you i'm not a javascript expert so therefore i seek help here.

I use the script on a site and within the DIV's that the script show or collapse i'd like to use $('#target').load('page.html');. It works fine but however when i've clicked on a link that does this the animatedcollapse script stops working and I can't click any animatedcollapse links. Or i can click on them but nothing happens.

Is there a way to get around this problem? Is there a collision between animatedcollapse and the .load() command?

Best Regards
Paparappa

Edit: I just realised i might have posted this in the wrong forum. Im sorry for that and a moderator can maybe move this?

paparappa
11-02-2010, 10:56 AM
Or is it maybe possible to load external content with the animated collapse script? I mean can the script load page.html on click in an animated collapse div? http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

ddadmin
11-03-2010, 03:20 AM
Just to confirm, you're trying to use jQuery's load() function to load a new page content into one of the collapsible DIVs right? For example:


<div id="jason" style="width: 300px; background: #FFFFCC; display:none">
<b>Content inside DIV!</b><br />
<b>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.</b><br />
</div>


<p><a href="#" onClick="javascript:jQuery('#jason').load('test.htm')">load test.htm into DIV "jason"</a><p>

Here the "jason" DIV is one of the collapsible DIVs, and the link that follows when clicked on loads "test.htm" into it. If this is what you're trying to do, the script should still animate the "jason" DIV just fine (expand or collapse it), provided you make a small tweak to the .js file to ensure the height of the animated DIVs are no longer cached. Inside the .js file, find the below line:


this.$divref.css(ac.generatemap(['height', this.getAttr('height')], ['display', cssdisplay]))

and change that to:


this.$divref.css(ac.generatemap(['display', cssdisplay]))

paparappa
11-03-2010, 12:06 PM
Thank you Admin!

I think that does it!