Results 1 to 7 of 7

Thread: Animated Collapsible DIV v2.4

  1. #1
    Join Date
    Sep 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Animated Collapsible DIV v2.4

    1) Script Title: Animated Collapsible DIV v2.4

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...edcollapse.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?

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Please post a link to the page on your site that contains the problematic script so we can check it out.
    DD Admin

  3. #3
    Join Date
    Sep 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    www.silverstatetour.com

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

  4. #4
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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:

    Code:
    <!--[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]-->
    DD Admin

  5. #5
    Join Date
    Sep 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.
    Last edited by Donomegax; 09-17-2009 at 08:29 PM. Reason: Forgot to add additional comments!

  6. #6
    Join Date
    Sep 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by ddadmin View Post
    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:

    Code:
    <!--[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.
    Last edited by Donomegax; 09-18-2009 at 12:14 AM. Reason: Added specific detaiils

  7. #7
    Join Date
    Sep 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Disregard last message, got it working. Just had to move everything around.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •