Advanced Search

Results 1 to 2 of 2

Thread: Animated Collapse load div onClick

  1. #1
    Join Date
    Sep 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Animated Collapse load div onClick

    1) Script Title: Animated Collapse

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...edcollapse.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!

  2. #2
    Join Date
    Sep 2010
    Location
    Los Angeles
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default ?

    I'm having this same issue. Did you ever solve it?

    Does anyone know how this could be fixed?

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •