Log in

View Full Version : Animated Collapsible DIV v2.4 - Trouble w/ IE


dillybaby36
06-29-2012, 06:16 PM
1) Script Title:
Animated Collapsible DIV v2.4

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

3) Describe problem:
Hello. I'm having some trouble with the toggle functionality of this script in Internet Explorer. I have five collapsable divs that all work perfectly in Safari, Firefox and Chrome. But in IE when you click the link to open a div it starts to open and then pops back into the closed position. I've tried many different tweaks to fix this such as:

- changing the links from href="javascript..." to using the [rel] method
- changing the initial hidden state technique from "display: none;" in the div to the "hide=1" up in the <head>
- messing around with the location of the <!DOCTYPE HTML> code

The one thing I've done which made a difference in the toggle functionality is removing another DOCTYPE code from the very top of my document, this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

For some reason, when I remove that all of the links work to toggle the divs. But it causes a whole bunch of layout problems so that doesn't seem right.

Anyways, this is for my wedding website and you can see it here:
http://david-and-michelle.com/

Thanks in advance for your help.

- David
jscheuer1
06-29-2012, 06:55 PM
Only one DOCTYPE allowed per page and it should be the very first thing in the source code of the page.

All this script needs a DOCTYPE for is to invoke standards mode. The one you have at the top does that. The second one might be the problem. In any case it can be safely removed.

I just tried that, and it didn't fix it. So I tried updating jQuery. That worked, sort of. But I found I also had to increase the height of the first accordion to 900.

To summarize, remove:


<!DOCTYPE HTML>

Change:


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

to:


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

Change:


<script type="text/javascript">

animatedcollapse.addDiv('about_us', 'fade=1,height=600px')
animatedcollapse.addDiv('wedding_party', 'fade=1,height=1935px')
animatedcollapse.addDiv('where', 'fade=1,height=690px')
animatedcollapse.addDiv('acc . . .

to:


<script type="text/javascript">

animatedcollapse.addDiv('about_us', 'fade=1,height=900px')
animatedcollapse.addDiv('wedding_party', 'fade=1,height=1935px')
animatedcollapse.addDiv('where', 'fade=1,height=690px')
animatedcollapse.addDiv('acc . . .

You may also want to increase the height of 'wedding_party' as well. perhaps one or more of the others too.

After that clear the browser's cache and reload the page and see what you've got.
dillybaby36
06-29-2012, 08:11 PM
YES! That seems to have fixed it! Thank you so much. I was so frustrated I wanted to rip my hair out over this.

Thanks again.

- David