Animated Collapse - help to 'add-on'

1) Script Title:
Animated Collapse

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

3) Describe problem:
It all works fine... but when loading a page with e.g. 30 div's to be collapsed - they are all very briefly extended before being collapsed.

Is there some way the script can be modified, so these div's do not have to be loaded and shown before being collapsed? I've tried setting style to display:none on the div's but that just stops them from working. I hope you get my point. See my example file here:

http://www.dagensvinder.dk/spilforslag.php

You'll have to look very concentrated to see the div's before they are collapsed.

Regards,
Mr. Bon

The script dynamically collapses the DIV when the page loads, instead of using CSS, for example. This is so if the visitor has JavaScript disabled, the content is still viewable. Nevertheless, if you wish the content to be truly hidden by default, first, inside your animated content, throw in CSS's "display: none"

Code:

---

<a href="javascript:collapse1.slidedown()">Slide Down</a> || <a href="javascript:collapse1.slideup()">Slide Up</a>
<div id="dog" style="width: 300px; height: 110px; background-color: #99E0FB; display: none">

<!--Your DIV content as follows -->
<h3>Content inside DIV!</h3>
<h4>Note: CSS height attribute defined</h4>

</div>

---

This causes the DIV to be hidden by default. Then, inside the .js file, get the script to unhide it dynamically:

Code:

---

        this.timelength=animatetime
        if (this.divObj.style.display=="none")
                this.divObj.style.display="block"

---

The two lines in red is new.

Thx for the answer.
We tried to implement it - but we cannot see a difference.

It still 'shows' the div before it dynamically hides them. I can see it should logically hide them through CSS by default - but somehow it doesn't.

Any clue why?

You can confirm that the DIV is initially hidden by turning off the script. Comment out the script you call at the very end to initialize it:

Code:

---

<script type="text/javascript">

//Syntax: var uniquevar=new animatedcollapse("DIV_id", animatetime_milisec, enablepersist(true/fase), [initialstate] )
//var collapse1=new animatedcollapse("dog", 1000, false)

</script>

---

If the DIV is hidden, then it means the changes are working...

The changes work fine - I just cannot see they have any impact:

http://www.dagensvinder.dk/spilforslag.php

Try loading this page... you'll see that all the div's are loaded 'extended' in a short time before being collapsed by the script (even though they all have display:none)

However - the content inside the divs are not being shown :confused:

Maybe it is because the page is build in tables - but I don't know how to correct it - but the script seems to trigger the div to be shown in that short periode of time.

Did that make sense? :)

Ah, do you mean the blank space where the expanded content should be? Unfortunately, there's no way around that unless you're willing to set an explicit height inside each collapsing content, for example:

Code:

---

<div id='8' style='height: 300px' >
"
"
</div>

---

Without an explicit height attribute defined, the script needs to dynamically retrieve the DIV's height when the page has fully loaded. While the page is loading, the best the script can do is hide the DIV's content, but not actually collapse it, as otherwise, its height would return 0 rather than the actual height.

Yes that was what I meant :)

However our content in the DIV is of variable (ha ha) length, so we cannot set the high.

We'll have to do with the pre-showing of the div then.

Thx for the time you took to help us :)

It just occured to me it might still be possible to at least minimize the time the DIV is expanded while the script gets its height. Right now it's up and until the document has fully loaded. The workaround would be to collapse the DIV while the page is loading, expand it precisely when the document has loaded to get its height, then contract it again. With that said, try the below attached .js file over the existing one. If it doesn't work, oh well... :)

I am trying to use this script for an optional header of a webpage. I want the DIV (header) to show by default but I still want to enable persistence. So that the user can hide the header of the page and navigate around with out having to see the DIV (header) if they want. Is there any solution for this?

Quote:

---

Originally Posted by vin0m

I am trying to use this script for an optional header of a webpage. I want the DIV (header) to show by default but I still want to enable persistence. So that the user can hide the header of the page and navigate around with out having to see the DIV (header) if they want. Is there any solution for this?

---

Try the mod I made here:

http://www.dynamicdrive.com/forums/s...6&postcount=14

Thanks so much you jscheuer1 that worked perfectly. That was exactly what I was looking for.