Results 1 to 2 of 2

Thread: Collapsible DIV v2.4

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

    Exclamation Collapsible DIV v2.4

    1) Script Title: Collapsible DIV v2.4

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

    3) Describe problem:
    Hi,
    I m very new to javascript and html.
    When I use dd collapsable div script in html file it works fine but if the same html code I print using cgi it does not collapse or expand.

    In java window I am getting an error message
    'this.divholders[...].$divref' is null or not an object
    Code 0


    Please help.

    Please find my sample cgi file below.

    #!/usr/bin/perl

    print "Content-type: text/html\n\n";
    print qq(
    <!DOCTYPE HTML>
    <script type="text/javascript" src="jquery-1.3.2.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=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>


    <a href="#" rel="toggle[cat]" data-openimage="collapse.jpg" data-closedimage="expand.jpg"><img src="collapse.jpg" border="0" /></a> <a href="javascript:animatedcollapse.show('cat')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('cat')">Slide Up</a>

    <div id="cat" style="width: 400px; background: #BDF381;">
    <table>
    <tr><td>Test0</td></tr>
    <table>
    <tr><td>Test1</td></tr>
    The cat (Felis catus), also known as the domestic cat or house cat to distinguish it from other felines, is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship and its ability to hunt vermin. It has been associated with humans for at least 9,500 years. A skilled predator, the cat is known to hunt over 1,000 species for food. It can be trained to obey simple commands.
    </table>
    </table>
    </div>);
    ----Code ends here------

    Thanks.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    If you use these:

    Code:
    animatedcollapse.addDiv('jason', 'fade=1,height=80px')
    animatedcollapse.addDiv('kelly', 'fade=1,height=100px')
    animatedcollapse.addDiv('michael', 'fade=1,height=120px')
    You need these:

    HTML Code:
    <b><a href="javascript:animatedcollapse.show(['jason', 'kelly', 'michael'])">Show Examples 1, 2, 3</a> | <a href="javascript:animatedcollapse.hide(['jason', 'kelly', 'michael'])">Hide Examples 1, 2, 3</a></b>
    
    <p><b>Example 1 (individual):</b></p>
    
    <a href="javascript:animatedcollapse.toggle('jason')"><img src="toggle.jpg" border="0" /></a> <a href="javascript:animatedcollapse.show('jason')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('jason')">Slide Up</a>
    
    <div id="jason" style="width: 300px; background: #FFFFCC; display:none">
    <b>Content inside DIV!</b><br />
    <b>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.</b><br />
    </div>
    
    
    <p><b>Example 2 (individual):</b></p>
    
    <a href="javascript:animatedcollapse.toggle('kelly')"><img src="toggle.jpg" border="0" /></a> <a href="javascript:animatedcollapse.show('kelly')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('kelly')">Slide Up</a>
    
    <div id="kelly" style="width: 300px; background: #D2FBFF; display:none">
    <b>Content inside DIV!</b><br />
    <b>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.</b><br />
    </div>
    
    
    
    <p><b>Example 3 (individual):</b></p>
    
    <a href="javascript:animatedcollapse.toggle('michael')"><img src="toggle.jpg" border="0" /></a> <a href="javascript:animatedcollapse.show('michael')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('michael')">Slide Up</a>
    
    <div id="michael" style="width: 300px; background: #E7FFCC; display:none">
    <b>Content inside DIV!</b><br />
    <b>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.</b><br />
    </div>
    
    
    <hr style="margin: 1em 0" />
    And if you use these:

    Code:
    animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets,persist=1,hide=1')
    animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=pets,hide=1')
    You need these:

    HTML Code:
    <p><b>Example 5 (part of group "pets"):</b></p>
    
    <a href="#" rel="toggle[dog]" data-openimage="collapse.jpg" data-closedimage="expand.jpg"><img src="collapse.jpg" border="0" /></a> <a href="javascript:animatedcollapse.show('dog')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('dog')">Slide Up</a>
    
    <div id="dog" style="width: 400px; background: #BDF381;">
    The dog (Canis lupus familiaris) is a domesticated subspecies of the wolf, a mammal of the Canidae family of the order Carnivora. The term encompasses both feral and pet varieties and is also sometimes used to describe wild canids of other subspecies or species. The domestic dog has been one of the most widely kept working and companion animals in human history, as well as being a food source in some cultures.
    </div>
    
    
    
    <p><b>Example 6 (part of group "pets"):</b></p>
    
    <a href="#" rel="toggle[rabbit]" data-openimage="collapse.jpg" data-closedimage="expand.jpg"><img src="collapse.jpg" border="0" /></a> <a href="javascript:animatedcollapse.show('rabbit')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('rabbit')">Slide Up</a>
    
    <div id="rabbit" style="width: 400px; background: #BDF381">
    Rabbits are ground dwellers that live in environments ranging from desert to tropical forest and wetland. Their natural geographic range encompasses the middle latitudes of the Western Hemisphere. In the Eastern Hemisphere rabbits are found in Europe, portions of Central and Southern Africa, the Indian subcontinent, Sumatra, and Japan.
    </div>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •