PDA

View Full Version : Animated Collapse load div onClick



Charles Glass
09-21-2009, 02:54 AM
1) Script Title: Animated Collapse

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

3) Describe problem:

Hello,

I need a bit of help with a problem I am running into. I have an animated collapse menu on a website I am building that is used to show someone's portfolio. It is working fine, the only problem is that it is loading all of the images inside the divs when the page loads, drastically increasing the page's load time. What I would like to be able to do is set it so the div loads when the person expands the div, or onClick.

Inside each div is an iFrame, which may or may not be important information.

I have not modified animatedcollapse.js, and here are the key parts of my html markup:

<----------HEAD-------->

<script type="text/javascript">

animatedcollapse.addDiv('tenba', 'fade=1,height=615px,group=design')
animatedcollapse.addDiv('yeago', 'fade=1,height=600px,group=design')
animatedcollapse.addDiv('doubleo', 'fade=1,height=685px,group=design')
animatedcollapse.addDiv('veldini', 'fade=1,height=589px,group=design')
animatedcollapse.addDiv('naneu', 'fade=1,height=600px,group=design')
animatedcollapse.addDiv('pacific', 'fade=1,height=575px,width=750,group=design')
animatedcollapse.addDiv('stauro', 'fade=1,height=550px,group=design')
animatedcollapse.addDiv('home', 'fade=1,height=875px,group=design')
animatedcollapse.addDiv('grow', 'fade=1,height=775px,group=design')
animatedcollapse.addDiv('berkel', 'fade=1,height=600px,group=design')
animatedcollapse.addDiv('etc', 'fade=1,height=573px,group=design')


animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
//$: Access to jQuery
//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
//state: "block" or "none", depending on state
}

animatedcollapse.init()

</script>

<-----------BODY-------------->

<a href="javascript:animatedcollapse.toggle('tenba')" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','TenbaOn.png',1)"><img src="TenbaOff.png" name="Image5" width="750" height="28" border="0"></a>
<div id="tenba" style="width: 750px; height: 615px; background: #FFFFFF; display:none; visibility:hidden">
<iframe src="tenba.html" width="750px" height="615" frameborder="0" scrolling="no"></iframe>
</div>

<a href="javascript:animatedcollapse.toggle('yeago')" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image10','','YeagoOn.png',1)"><img src="YeagoOff.png" name="Image10" width="750" height="28" border="0"></a>
<div id="yeago" style="width: 750px; height: 600px; background: #FFFFFF; display:none">
<iframe src="yeago.html" width="750px" height="600" frameborder="0" scrolling="no"></iframe>
</div>
<a href="javascript:animatedcollapse.toggle('doubleo')" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image11','','The00On.png',1)"><img src="The00Off.png" name="Image11" width="750" height="28" border="0"></a>
<div id="doubleo" style="width: 750px; height: 685px; background: #FFFFFF; display:none">
<iframe src="00.html" width="750px" height="685" frameborder="0" scrolling="no"></iframe>
</div>
<a href="javascript:animatedcollapse.toggle('veldini')" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image25','','VeldiniOn.png',1)"><img src="VeldiniOff.png" name="Image25" width="750" height="28" border="0" id="Image25" /></a>
<div id="veldini" style="width: 750px; height: 589px; background: #FFFFFF; display:none">
<iframe src="veldini.html" width="750px" height="589" frameborder="0" scrolling="no"></iframe>
</div>

<a href="javascript:animatedcollapse.toggle('naneu')" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image22','','naneuon.png',1)"><img src="NaneuOff.png" name="Image22" width="750" height="28" border="0" id="Image22" /></a>
<div id="naneu" style="width: 750px; height: 600px; background: #FFFFFF; display:none">
<iframe src="naneu.html" width="750px" height="600" frameborder="0" scrolling="no"></iframe>
</div>
<a href="javascript:animatedcollapse.toggle('stauro')" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image24','','StauroOn.png',1)"><img src="StauroOff.png" name="Image24" width="750" height="28" border="0" id="Image24" /></a>

<div id="stauro" style="width: 750px; height: 550px; background: #FFFFFF; display:none">
<iframe src="stauro.html" width="750px" height="550px" frameborder="0" scrolling="no"></iframe>

</div>

<a href="javascript:animatedcollapse.toggle('pacific')" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image23','','PacificOn.png',1)"><img src="PacificOff.png" name="Image23" width="750" height="28" border="0" id="Image23" /></a>
<div id="pacific" style="width: 750px; height: 575px; background: #FFFFFF; display:none">
<iframe src="pacific.html" width="750px" height="575" frameborder="0" scrolling="no"></iframe>

</div>

<a href="javascript:animatedcollapse.toggle('home')" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image26','','HomeOn.png',1)"><img src="HomeOff.png" name="Image26" width="750" height="28" border="0" id="Image26" /></a>

<div id="home" style="width: 750px; height: 875px; background: #FFFFFF; display:none">
<iframe src="home.html" width="750px" height="875" frameborder="0" scrolling="no"></iframe>

</div>
<a href="javascript:animatedcollapse.toggle('grow')" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image21','','GrowOn.png',1)"><img src="GrowOff.png" name="Image21" width="750" height="28" border="0" id="Image21" /></a>
<div id="grow" style="width: 750px; height: 775px; background: #FFFFFF; display:none">
<iframe src="grow.html" width="750px" height="775" frameborder="0" scrolling="no"></iframe>

</div>
<a href="javascript:animatedcollapse.toggle('berkel')" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image20','','BerkelOn.png',1)"><img src="BerkelOff.png" name="Image20" width="750" height="28" border="0" id="Image20" /></a>
<div id="berkel" style="width: 750px; height: 600px; background: #FFFFFF; display:none">
<iframe src="berkel.html" width="750px" height="600" frameborder="0" scrolling="no"></iframe>
</div>
<a href="javascript:animatedcollapse.toggle('etc')" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image28','','EtcOn.png',1)"><img src="EtcOff.png" name="Image28" width="750" height="28" border="0" id="Image28" /></a>
<div id="etc" style="width: 750px; height: 573px; background: #FFFFFF; display:none">
<iframe src="etc.html" width="750px" height="573px" frameborder="0" scrolling="no"></iframe>

</div>




I have been looking into it a little bit, and seem to notice that visibility:hidden may be what I need to mess with, but I am not sure how to implement it/if it is even relevant.

Thanks alot for any help!

Ville
09-06-2010, 08:26 AM
I'm having this same issue. Did you ever solve it?

Does anyone know how this could be fixed?