View Full Version : Animated Collapsible DIV v2.4 collapsing issue

03-19-2012, 04:38 AM
1) Script Title: Animated Collapsible DIV v2.4

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

3) Describe problem: Can't restore the window height to its original height after collapsing.
Installed the code and works just fine. I have all DIVs collapsed as the default. I added inside one of the divs a link that once the mouse hovers over it, it displays a table (lets call it TABLE). I used the code of "Image w/ description tooltip" at http://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm for displaying the TABLE
The problem occurs only when I expand a DIV and hover over the link, mentioned above, then I click to collapse the DIV. The DIV collapses but it doesn't restore the window's height to its original size (before expanding). So I end up with blank space at the bottom ofthe DIVs. This doesn't happen if I expand the DIV and collapse it with out hovering over the link.
After testing I found that once "tipcss.top" is set to a value (see function positionTip(evt)) and the value is within the view area, the code belongs to Animated Collapse doesn't restore the window's height to its original size, as it was before the DIV was expanded. I tracked the values of both "window.pageYOffset" and "document.body.scrollTop". Once the DIV is expanded their value increased according to how much is expanded. At Collapsing their values gets restored to the original as long as I don't hover over the link. If I did hover over the link, then their values don't get restored to their original value as it was before expanding, regardless of the height of the TABLE

03-19-2012, 08:27 PM
Please post a link to the page on your site that contains the problematic script so we can check it out.

03-19-2012, 09:56 PM
Here it is: http://www.rampart-tech.com/temp.html

At the bottom of the second div is a link to hover the mouse over. Try expanding and collapsing the DIV without hovering over the link, then try it again with hover over the link then collapsing. You will see the windows height was not restored

03-20-2012, 04:07 PM
I posted your request
Thank you

03-20-2012, 08:37 PM
I've checked out your webpage. The tooltip script doesn't actually appear to be Image w/ Description Tooltip (http://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm). Regardless, the issue seems to be that you've set the position of the tooltip DIV to "fixed" instead of "absolute". First, modify the position of the DIV by swapping out "fixed" below with "absolute":

<div id="tip2Div" style="position: absolute; visibility: hidden; z-index: 100; border-width: 4px; padding: 0px; border-style: solid; border-radius: 8px 8px 8px 8px; width: 450px; font-family: Verdana,arial,helvetica,sans-serif; font-size: 8pt; color: rgb(0, 0, 0); background-color: white; border-color: black;"></div>

Then, inside the script for the tooltip, add the line in red to the existing code below:

function hideTip() {
if (!tooltip2) {return;}
tip2On = false;

That should do it.

03-20-2012, 09:24 PM
Sure thing, it did the magic.
I am using two tooltip which I got from "Image w/ Description Tooltip." back in 2002, but I had to modify one of the tooltip to fit my project specs.
Thank you