Collapsible divs with ajax problem

**newbees** · 10-20-2009, 03:56 PM

1) Script Title: Animated Collapsible DIV v2.4

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...edcollapse.htm

3) Describe problem:

I have home page called index.htm. There is menu made of collapsible divs with submenus with link. To work, I need to put

...
animatedcollapse.addDiv('menu1', 'fade=0,speed=300,group=menu,persist=0,hide=1')
animatedcollapse.ontoggle=function($, divobj, state){}
animatedcollapse.init()

to trigger the js and divs. Everything is working like it should.

That menus have links (ofc) that are on click loading content from external pages via Ajax (jQ), so that only div "content" is changed. Thats fine also and woking.

But one of the external pages (probably will have few of them if I make this work) have also collapsible div in it that are not working untill I put new

animatedcollapse.addDiv('cat1', 'fade=0,speed=300,group=cat,persist=0,hide=1')
animatedcollapse.ontoggle=function($, divobj, state){}
animatedcollapse.init()

in that external file. And animatedcollapse.init() to trigger it. animatedcollapse.js is loaded only once in index head.

Now, and menu and that script is working except that MENU IS TRIGGERED TWICE. So menu does double animation.

As I see it animatedcollapse.init() was triggered in index and menu is working, when external file loads, animatedcollapse.init() is triggered again for divs in that file to work. And with that menu is triggered twice.

If I have 2 external files that are having colapsible divs in them, and I click on link to one, then to second then to first again, then second and 10 times that, I am triggering divs in those external files only once (like it should) but menu is triggered 10 times and is doing 10 times expand/close before 10th time it stays in state like it supposed.

So I need to find a way to init only one group which is existing in external file. Something like

in cat.htm file to init "cat" group of divs:

animatedcollapse.init(cat) or

animatedcollapse.init('cat')

or i saw uninit function in js so I tried

animatedcollapse.uninitinit() (to undo init of the menu,to erase first init)
animatedcollapse.init() (to init menu and cat divs)

and its not working (maybe uninit isnt for that). As you see I have very limited knowledge of js overall and my biggest weapon is deduction unfortunatelly.

I looked at this forum first trying to find something similar but I couldnt find any.

Thank you in advance

**ddadmin** · 10-22-2009, 07:11 AM

Uninit() doesn't actually unbind the events added to the various elements affected by the script, so it can't be used in the manner above. Back to the issue though, visibility, calling init() more than once shouldn't in itself cause the "double" animation you're talking about. In the following example, it calls init() twice on the same set of elements- they still seem to be behaving properly:

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="animatedcollapse.js">

/***********************************************
* Animated Collapsible DIV v2.4- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>


<script type="text/javascript">

animatedcollapse.addDiv('jason', 'fade=1,height=80px')
animatedcollapse.addDiv('kelly', 'fade=1,height=100px')
animatedcollapse.addDiv('michael', 'fade=1,height=120px')

animatedcollapse.init()

animatedcollapse.addDiv('jason', 'fade=1,height=80px')
animatedcollapse.addDiv('kelly', 'fade=1,height=100px')
animatedcollapse.addDiv('michael', 'fade=1,height=120px')

animatedcollapse.init()


</script>

<body>

<b><a href="javascript:animatedcollapse.show(['jason', 'kelly', 'michael'])">Show Examples 1, 2, 3</a> | <a href="javascript:animatedcollapse.hide(['jason', 'kelly', 'michael'])">Hide Examples 1, 2, 3</a></b>

<p><b>Example 1 (individual):</b></p>

<a href="javascript:animatedcollapse.toggle('jason')"><img src="toggle.jpg" border="0" /></a> <a href="javascript:animatedcollapse.show('jason')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('jason')">Slide Up</a>

<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><b>Example 2 (individual):</b></p>

<a href="javascript:animatedcollapse.toggle('kelly')"><img src="toggle.jpg" border="0" /></a> <a href="javascript:animatedcollapse.show('kelly')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('kelly')">Slide Up</a>

<div id="kelly" style="width: 300px; background: #D2FBFF; 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><b>Example 3 (individual):</b></p>

<a href="javascript:animatedcollapse.toggle('michael')"><img src="toggle.jpg" border="0" /></a> <a href="javascript:animatedcollapse.show('michael')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('michael')">Slide Up</a>

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

**newbees** · 10-22-2009, 12:56 PM

The example you wrote is not what i have problems with cause that example is using two init() on the same page.

I have situation like this.

Menu on index is:

Code:

animatedcollapse.addDiv('menu1',group=menu, 'fade=1)
animatedcollapse.addDiv('menu2',group=menu, 'fade=1)
animatedcollapse.init()

and is working properly. Clicking on some link (on real example on my localhost that link is NOT on this menu but it doesnt matter where it is output is the exactly the same), the div in the middle (content) is replaced with div in external file that have

Code:

animatedcollapse.addDiv('contact1',group=contact, 'fade=1)
animatedcollapse.addDiv('contact2',group=contact, 'fade=1)
animatedcollapse.init()

This colapsible contact divs are doing its job well but menu divs (page isnt reloaded) are doing animation twice.

Now. If I remove

Code:

animatedcollapse.init()

from contact external file, the menu is working well (animate once) but contact divs arent working at all. If I remove

Code:

animatedcollapse.init()

from index, then menu divs are not working (obviously) but contact is working when loaded.

That brought me to statement that init() is making problem.

To clarify something again (sorry for long posts).

I have index file and 2 links on it, contact and products (external files that both have colapsible divs inside itself with init in each file for it to work).

I load index, menu is working normally. I click on contact link, content loads divs are working normally (animate once) but menu is animate x2. Then I click on products link, product content loads, divs are working fine but menu is animate x3. Again if I link on contact (contact divs are working fine) but menu is animate x4 etc.

Seems like every time I init anything out of index via ajax, menu is triggered again and again. And no matter how much times I click on anything, contact and products divs are working properly cause when contact's init() triggers, the product's divs are not on page.

Summary. Is it possible to init() only one group at the time, something like init(contact) so the menu is not triggered? Or there is another solution for this?

Sorry again for a long post. If you need to see it online to believe this then I can isolate it and upload it with some effort of mine.

Ps. Cleaned code and uploaded for you.

Thank you

**newbees** · 10-24-2009, 12:18 PM

First and last bump

Thread: Collapsible divs with ajax problem

Thread Tools

Search Thread

Collapsible divs with ajax problem

The Following User Says Thank You to ddadmin For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions