PDA

View Full Version : Animated Collapsible DIV v2.4 jumping on expand and collapse



Skinnybobb
02-17-2010, 09:40 AM
1) Script Title:
Animated Collapsible DIV v2.4

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

3) Describe problem:
When I add a margin-bottom attribute to my collapsible div it results in the div jumping at the top when expanding or collapsing. Any ideas anyone?


#profilesearchdiv, #profilefilterdiv {
display:none;
background: #eeeded;
overflow: hidden;
color: #58584D;
width:667px;
margin-bottom:10px;
}
.profilecollapsedivholder {
padding:5px 5px 7px 9px;
margin-bottom: 8px;
}


<div id="profilesearchdiv">
<div class="profilecollapsedivholder">
To search the profiles enter a search term and hit "Search".
<form action="#">
<input type="text" name="searchprofile" class="enewsbox" />
<input type="button" class="button" value="Search" />
</form>
</div>
</div>

<div id="profilefilterdiv">
<div class="profilecollapsedivholder">
Select filter options then hit "Filter".
<form action="#">
<select name="filterprofileselect">
<option value="">Choose a filter</option>
<option value="http://www.yahoo.com/">A Scotland</option>
<option value="http://www.google.com/">B North East</option>
<option value="http://www.altavista.com/">C Northern Ireland</option>
<option value="http://www.amazon.com/">D Yorkshire &amp; The Humber</option>
<option value="http://artlung.com/">E North West</option>
<option value="http://artlung.com/">F Wales</option>
<option value="http://artlung.com/">G East Midlands</option>
<option value="http://artlung.com/">H South East</option>
<option value="http://artlung.com/">J West Midlands</option>
<option value="http://artlung.com/">K London</option>
<option value="http://artlung.com/">L East of England</option>
<option value="http://artlung.com/">M South West</option>
</select>
&nbsp;
<input type="button" value="Filter" />
</form>
</div>
</div>

ddadmin
02-17-2010, 09:50 PM
Does your page contain a valid doctype at the very top? Please post a link to the page on your site that contains the problematic script so we can check it out.

Jk_
02-18-2010, 08:24 AM
Does your page contain a valid doctype at the very top? Please post a link to the page on your site that contains the problematic script so we can check it out.

Hello there,

I have exactly the same problem.

I'm using your wonderful plugin on a work in progress Wordpress template.

The DIV that I want to toggle has a 45px padding apply to it.

The toggle works but jump the padding.

Click on What We do? to toggle the div.

I have a valid document type at the very top of my page.

Here is a link to the wip page : http://www.thelbc.be/wip/


Thanks for your time and your patience.

Cheers,


JK_

Skinnybobb
02-18-2010, 08:28 AM
Yeah its got a valid doc type.

Unfortunately its on my works intranet so you cant access it.

M

Skinnybobb
02-18-2010, 08:29 AM
Hello there,

I have exactly the same problem.

I'm using your wonderful plugin on a work in progress Wordpress template.

The DIV that I want to toggle has a 45px padding apply to it.

The toggle works but jump the padding.

Click on What We do? to toggle the div.

I have a valid document type at the very top of my page.

Here is a link to the wip page : http://www.thelbc.be/wip/


Thanks for your time and your patience.

Cheers,


JK_

Hiya,
I've looked at yours and it seems ok. (In Firefox on Mac). My problem appears on all browsers?! (That i've tested that is)

Jk_
02-18-2010, 09:27 AM
@Skinnybobb : Don't you see the animation jumping at half way?

I tried under FF3 on MAC & PC and IE6,7,8 on PC and I have the problem everywhere...

Skinnybobb
02-18-2010, 09:54 AM
@JK: Wow, thats odd it didn't do that when I first looked!!

Sb

Jk_
02-18-2010, 04:19 PM
Seriously man, it drives me crazy! I can't find out what I'm doing wrong.

Any help would be really appreciated.

Jk_

Jk_
02-19-2010, 11:36 AM
I tried everything but I still got the problem :

http://www.thelbc.be/wip/

ddadmin
02-19-2010, 08:46 PM
Looking at the issue, I'm not sure the right approach is to "fix" something within the script. The problem occurs basically because you've added "margin-bottom" to the DIV that's being collapsed- once the DIV is fully collapsed, it essentially disappears from the page, including the margin you've defined for it. When the margin disappears, that's when the "jumping" occurs.

Are you able to apply the margin to an element following the collapsible DIV, thus avoiding this issue?

Jk_
02-22-2010, 07:46 AM
Looking at the issue, I'm not sure the right approach is to "fix" something within the script. The problem occurs basically because you've added "margin-bottom" to the DIV that's being collapsed- once the DIV is fully collapsed, it essentially disappears from the page, including the margin you've defined for it. When the margin disappears, that's when the "jumping" occurs.

Are you able to apply the margin to an element following the collapsible DIV, thus avoiding this issue?

Hello there,

Thanks for your time.

In fact I had a 45px padding inside the DIV that's being collapsed. I removed this 45px padding and applied it to the element inside the DIV.

It works!

Cheers.

Jk_

Skinnybobb
02-22-2010, 11:41 AM
@JK:
Glad you got yours sorted. I cant have the margin outside this div so am gonna have to try a different method.

Just as an aside I noticed when either of your divs are open it hides the hover over description on your images.

Sb