Results 1 to 2 of 2

Thread: Animated Collapsible Div with dynamic divs

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

    Default Animated Collapsible Div with dynamic divs

    1) Script Title: Animated Collapsible DIV

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

    3) Describe problem: On my website, users can search on specific values, the results of which will be grouped into sections, each of which is its own unique div.

    I want to be able to toggle each generated section, but I have not figured out how to create the object.addDiv to the javascript since the web server is generating the page content after creating the <head> tag.

    I am relatively new to javascript, so please excuse my ignorance if this is a simple answer.

    Thanks for any help.
    Last edited by ddadmin; 04-03-2009 at 09:55 PM.

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

    Default

    Hmm if your page's contents are dynamically generated, then in order to enable this script on those contents, the initialization portion of the script itself also needs to be dynamically generated, ie, this portion:

    Code:
    <script type="text/javascript">
    
    animatedcollapse.addDiv('jason', 'fade=1,height=80px')
    animatedcollapse.addDiv('kelly', 'fade=1,height=100px')
    animatedcollapse.addDiv('michael', 'fade=1,height=120px')
    
    animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets')
    animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets,persist=1,hide=1')
    animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=pets,hide=1')
    
    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>
    JavaScript is basically like HTML, and can be dynamically written out. In this case, you'd write out the entire code above dynamically, replacing the various content IDs (ie: 'jason') to match those of your contents instead. How to do this exactly really depends on how your pages are being generated to begin with, such as PHP/mySQL.
    DD Admin

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
  •