Log in

View Full Version : Collapsible DIV not working


Hamdan
07-01-2012, 02:42 PM
1) Script Title:
Animated Collapsible DIV v2.4

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

3) Describe problem:
The div doesn't doesn't expand when I click the buttons. The script is working on another blank webpage I setup in the same directory but it doesn't work on the one I want to set it up in. here's the webpage:

Webpage:


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<!DOCTYPE HTML>
<title>Archon: Projects</title>
<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type">
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="engine/js/prototype.js"></script>
<script type="text/javascript" src="engine/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="engine/js/lightbox.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>
</head>
<body>
<div id="maincontainer">
<div id="topsection"></div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><font face="Century Gothic" size="12">
<b>Projects</b></font>
<br>
<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" />



<p><b>Example 4 (part of group "pets"):</b></p>

<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;">
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.
</div>



<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>
</div>
<font face="Century Gothic" size="12"><b> </b></font></div>
<font face="Century Gothic" size="12"><b> </b></font></div>
<font face="Century Gothic" size="12"><b>
<div id="leftcolumn">
</div>
</b></font></div>
<font face="Century Gothic" size="12"><b>
<div id="scroll-button" class="fixed-button"> <span><a href="Arabic%20News.html"><img

src="img/arabic.png"></a></span> </div>
</b></font>

</body>
</html>

Any help and support is greatly appreciated !
jscheuer1
07-01-2012, 02:59 PM
There could also be other problems. But get rid of this:



<script type="text/javascript" src="engine/js/prototype.js"></script>
<script type="text/javascript" src="engine/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="engine/js/lightbox.js"></script>

It's not used on the page anyway and conflicts with jQuery.

The browser cache may need to be cleared and/or the page refreshed to see changes.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.



If you need a Lightbox and just haven't shown that part, use a jQuery based one. For basic lightbox duties, such as the script you have there will do, I'd recommend Slimbox2, see:

http://www.dynamicdrive.com/forums/blog.php?b=247

for important information on using it.
Hamdan
07-01-2012, 03:04 PM
Just Removed those parts, refreshed the page and unfortunately the script still isn't working
I don't think it is but maybe there's a problem with the css file
Here it is just in case:


/* CSS Document */

body{background: #d1d1d1 url(img/bg.png) repeat-x;}

b{font-size: 110%;}
em{color: red;}

#maincontainer{
width: 1000px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}

#topsection{
background: #ffffff url(img/bg4.png) repeat-y;
height: 10px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 0px;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin-left: 145px; /*Set left margin to LeftColumnWidth*/
height:1800px;
background: #dbdbdb url(img/bg3.png) repeat-x;
}

#leftcolumn{
float: left;
width: 145px; /*Width of left column*/
height:1800px;
margin-left: -1000px; /*Set left margin to -(MainContainerWidth)*/
background: url(img/bg2.png) repeat-y;
}

#footer{
clear: left;
width: 100%;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #FFFFFF;
}

#Jason{
width: 300px;
background: #FFFFCC;
display:none;
}

#Jason{
width: 300px;
background: #FFFFCC;
display:none;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

.fixed-button {
bottom: 0;
right:2px;
font-size: 15px;
padding: 10px;
position: fixed;
text-align: center;
z-index: 800;
}

.gallery {
zoom:1;
width:auto;
}

.gallery a {
display:block;
float:left;
margin:5px;
opacity:0.87;
text-align:center;
}

.gallery a:hover {
opacity:1;
}

.gallery a img {
border:none;
display:block;
}

.gallery a#vlightbox{display:none}
jscheuer1
07-01-2012, 03:27 PM
Please include a link to the page on your site that contains the problematic code so we can check it out.
Hamdan
07-01-2012, 08:39 PM
Please include a link to the page on your site that contains the problematic code so we can check it out.

Sorry I wrote you back but it never sent through my phone anyway the site isn't online i'm still editing it :D
jscheuer1
07-01-2012, 11:53 PM
This:


<!DOCTYPE HTML>

Should be moved up so that it's the very first line in the file.

The page is missing the initialization 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>

Put it right after:


<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>

There still could be other problems. But the css is fine. And once I made the above changes, it worked for me. So, if it still doesn't work for you, perhaps the script is missing.

Again, the browser cache may need to be cleared and/or the page refreshed to see changes.

If you're still having problems and want more help, please put up a live demo page that shows the problem and post a link to it.
Hamdan
07-02-2012, 06:46 AM
This:


<!DOCTYPE HTML>

Should be moved up so that it's the very first line in the file.

The page is missing the initialization 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>

Put it right after:


<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>

There still could be other problems. But the css is fine. And once I made the above changes, it worked for me. So, if it still doesn't work for you, perhaps the script is missing.

Again, the browser cache may need to be cleared and/or the page refreshed to see changes.

If you're still having problems and want more help, please put up a live demo page that shows the problem and post a link to it.

I ended up backtracking through the code I found the problem when I first started I did have the initialization script but what stopped it was the fact that I placed at the bottom like this:


<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Archon: Projects</title>
<meta content="text/html;charset=UTF-8" http-equiv="Content-Type">
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="engine/js/prototype.js"></script>
<script type="text/javascript" src="engine/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="engine/js/lightbox.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"></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>

Now it works with the same amount of scripts but for some reason it has to be placed in the middle like this :


<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Archon: Projects</title>
<meta content="text/html;charset=UTF-8" http-equiv="Content-Type">
<link href="style.css" rel="stylesheet" type="text/css">
<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"></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>
<script type="text/javascript" src="engine/js/prototype.js"></script>
<script type="text/javascript" src="engine/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="engine/js/lightbox.js"></script>

I just hope the lightbox script is working otherwise I'll have to change that also thanks for the help btw :D