I do a document.write on the javascript variable it writes the variable out.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex17/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">
var varJMainID;
varJMainID = "jason";
// varJMainID = "varMainID" + Math.floor(Math.random()*11);
alert(varJMainID);
</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.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
}
animatedcollapse.init()
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<body>
<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>
</body>
</html>
When I add a version of your code to execute before the animated collapse script it works fine as a simulation. In theory it should work for dynamically generated content.
that's essentially how you call a variable in JavaScript, as the title implies.
Message: 'this.divholders[...].$divref' is null or not an object
This happens because it cannot find a DIV tag with the ID used to reference the DIV. Try to place any custom script above other scripts which need to execute first, and you may also want to fire the scripts onload so the DOM is ready.
Bookmarks