manupaticsn
12-14-2009, 05:46 AM
1) Script Title: Collapsible DIV v2.4
2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.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) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.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.