PDA

View Full Version : Animated Collapsible DIV v2.4



Donomegax
09-17-2009, 12:23 AM
1) Script Title: Animated Collapsible DIV v2.4

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

3) Describe problem: I am practicing on how to use this collapse by simply copying and pasting and setting it up in the proper link and I have gotten every thing done but not being able to get the buttons to do what they are supposed to do. I see the additional set of instructions but for some reason I cannot figure out what I am missing. I do have everything uploaded and looking like it is presented on the Dynamic Drive site but not the action of collapsing and expanding. Please help?

ddadmin
09-17-2009, 05:33 AM
Please post a link to the page on your site that contains the problematic script so we can check it out.

Donomegax
09-17-2009, 09:41 AM
www.silverstatetour.com

Its on sidebar 2 where the drop down tabs are posted.

ddadmin
09-17-2009, 07:01 PM
There's an issue with your CSS conditional comments wrapping around the entire script, essentially disabling it. The code in red below should be moved up so it surrounds just the conditional CSS:


<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
</style>
#sidebar1 { width: 180px; }
#sidebar2 { width: 190px; }
<script type="text/javascript" charset="utf-8" id="injection_graph_func" src="js/injection_graph_func.js"></script>

<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=50px')
animatedcollapse.addDiv('kelly', 'fade=1,height=50px')
animatedcollapse.addDiv('michael', 'fade=1,height=50px")

animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
//$: Access to jQuery
//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
//state: "block" or "none", depending on state
}

animatedcollapse.init()
</script>
<![endif]-->

Donomegax
09-17-2009, 08:27 PM
Thank you so much for pointing this out. If I may, how do I rewrite the code to encompass the IE5 statement? If you are not allowed, no worries I'll figure it out sooner or later. Thanks again so much. I hope to get this working as soon as possible. Also, did you see the Dynamic Drive logo? Am I allowed to do that? If not I will remove. I set it up as a link but still trying to figure out the code to turn off the text decoration.

Donomegax
09-18-2009, 12:11 AM
There's an issue with your CSS conditional comments wrapping around the entire script, essentially disabling it. The code in red below should be moved up so it surrounds just the conditional CSS:


<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
</style>
#sidebar1 { width: 180px; }
#sidebar2 { width: 190px; }
<script type="text/javascript" charset="utf-8" id="injection_graph_func" src="js/injection_graph_func.js"></script>

<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=50px')
animatedcollapse.addDiv('kelly', 'fade=1,height=50px')
animatedcollapse.addDiv('michael', 'fade=1,height=50px")

animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
//$: Access to jQuery
//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
//state: "block" or "none", depending on state
}

animatedcollapse.init()
</script>
<![endif]-->

It is still not working, any other ideas? I even tried the code exactly the way it is instructed to be added to a blank html doc and it still does not work for some reason. I followed the first three steps but I do not understand if there is something that I am supposed to add to the code under the <head> or under the <body> tag. Am I supposed to change or add something to the code? Please help. Thank you.

Donomegax
09-18-2009, 10:44 PM
Disregard last message, got it working. Just had to move everything around.