Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
Example 7.9 Not Working
screeng2g
post Dec 13 2008, 01:44 PM
Post #1


New Member
*

Group: Members
Posts: 3
Joined: 13-December 08
Member No.: 1,728
I've been trying to get example 7.9 to work. I did everything exactly to no avail. Other times I tried to use examples in the book had the same problem. Is it something I'm doing?

Here's what happens with the code.

* It does nothing in firefox. No hiding of the desired element. Nothing happens.
* In ie sometimes it does nothing and other times it pretends to hide the DIV: parts of the DIV doesn't show on load of the page but when you scroll the page it appears, and the rest of the DIV still is not hidden as should be.
* In ie it always shows an error: "Effect" is undefined. I tried online to see if I could find the problem and its solution to no avail.

- WHAT ORDER SHOULD THE SCRIPTS BE PLACED? I DID EXACTLY AS THE BOOK INSTRUCTS WITH NO RESULT.
Go to the top of the page
 
+Quote Post
screeng2g
post Dec 14 2008, 12:21 AM
Post #2


New Member
*

Group: Members
Posts: 3
Joined: 13-December 08
Member No.: 1,728
So far I've been able to make the onclick to work but the div is still not hidden upon loading of the page. Here's what I did to make things work:

CODE
<script type="text/javascript" src="javascripts/prototype.js"></script>
<script type="text/javascript" src="javascripts/effects.js"></script>


Instead of this (as the book suggests):
CODE
<script type="text/javascript" src="javascripts/prototype.js"></script>
<script type="text/javascript" src="javascripts/scriptaculous.js?load=effects"></script>
Go to the top of the page
 
+Quote Post
screeng2g
post Dec 14 2008, 01:39 AM
Post #3


New Member
*

Group: Members
Posts: 3
Joined: 13-December 08
Member No.: 1,728
The good people at stackoverflow helped me figure it out. You should read the thread. This book has the potential to be a great reference as well as learning tool but it needs some serious editing.
Go to the top of the page
 
+Quote Post
sarahkim
post Dec 15 2008, 09:00 AM
Post #4


Active Member
****

Group: Administrators
Posts: 137
Joined: 12-November 07
Member No.: 6
Hi screeng2g,

Thanks for letting us know how you solved the problem!

Kind regards,
Sarah


--------------------
Sarah Kim
Online Community Manager
O'Reilly Media, Inc.
http://community.oreilly.com
Go to the top of the page
 
+Quote Post
anthony3
post Dec 16 2008, 09:03 AM
Post #5


Active Member
**

Group: O'Reilly Author
Posts: 14
Joined: 17-September 08
From: Shiloh, IL
Member No.: 911
All of the examples in the book used Prototype 1.5.0 and Script.aculo.us 1.6.4. I wrote the following (sorry it is long) to test the accordion with with these versions, and it works as I claim it is supposed to (I removed the book comments to make it smaller):

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Testing the accordion effect</title>
<style type="text/css">
div.a_h { background-color: #060; border: 1px solid #000;
color: #fff; padding: 4px 8px; }
div.a_c { margin: 0 30px; }
</style>
<script type="text/javascript" src="latest/prototype.js"> </script>
<script type="text/javascript" src="latest/scriptaculous.js?load=effects"> </script>
</head>
<body>
<div id="b_w">
<div id="accordion">
<div id="part1">
<div id="nav1" class="a_h" onclick="new Effect.Accordion('content1');">
Lorem ipsum dolor sit amet
</div>
<div id="content1" class="a_c">
<p>
Curabitur pharetra, nunc vitae pellentesque ultrices, ligula
tortor mollis eros, et mattis sem diam ac orci. Aenean vestibulum
aliquam enim. Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas. Donec accumsan, enim
sit amet aliquet congue, massa ante iaculis sem, id dictum augue
ligula sit amet elit. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Sed sodales massa sit amet eros. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Curabitur gravida. Vivamus mollis. Proin leo pede,
tincidunt id, porttitor quis, pharetra sit amet, quam. Quisque a
odio sed augue varius ultrices. Praesent odio. Mauris viverra
nunc in lacus. Fusce in mi. Nullam urna sapien, porttitor sit amet,
facilisis nec, congue quis, pede.
</p><p>
Vestibulum nec pede. Fusce dui ipsum, imperdiet gravida, interdum
eu, imperdiet a, nisl. Fusce in enim. Suspendisse non velit. Mauris
rhoncus dictum quam. In mollis. Etiam eu erat in nisi luctus
scelerisque. Nulla facilisi. Nam mattis auctor nulla. Aenean risus
lacus, consequat eget, consequat sit amet, scelerisque vitae,
turpis. Suspendisse tortor elit, pellentesque id, suscipit at,
consequat ac, elit. Sed massa leo, molestie sed, fermentum non,
dignissim ac, nisi. Sed tincidunt. Suspendisse tincidunt congue nisl.
</p>
</div>
</div>
<div id="part2">
<div id="nav2" class="a_h" onclick="new Effect.Accordion('content2');">
Vestibulum eget enim nec lorem
</div>
<div id="content2" class="a_c">
<p>
Nullam varius rhoncus urna. Aliquam erat volutpat. Integer pulvinar
scelerisque purus. Sed euismod erat in mi. Nam dolor odio,
ullamcorper nec, mattis eu, placerat a, ipsum. Curabitur ut quam.
Fusce vitae neque. Donec nec mi eu orci auctor facilisis. Vivamus
porta. Donec tincidunt. Sed varius, neque sed placerat egestas,
arcu massa feugiat diam, nec ultricies elit diam sed lectus. In hac
habitasse platea dictumst. Quisque id ante. Ut vulputate, magna a
convallis tincidunt, leo eros ullamcorper turpis, lacinia lacinia
urna erat quis pede. Fusce eleifend, tellus eu sollicitudin
dapibus, eros tellus fringilla libero, sed facilisis lacus felis
sit amet lacus. Integer ullamcorper turpis scelerisque massa
pellentesque hendrerit. Donec dapibus lorem quis massa. Sed in
ante non leo tristique suscipit. Cras eu magna elementum mauris
venenatis sagittis. Nulla euismod justo sit amet elit.
</p>
</div>
</div>
<div id="part3">
<div id="nav3" class="a_h" onclick="new Effect.Accordion('content3');">
Ut interdum risus et ligula.
</div>
<div id="content3" class="a_c">
<p>
Mauris quis quam. Fusce id quam. Integer nec lorem at ipsum fermentum
pulvinar. Morbi tincidunt. Sed lacinia molestie erat. Morbi tempus,
massa ac tristique facilisis, odio nunc tempus lacus, vitae convallis
erat lorem eu pede. Vestibulum ante massa, pretium in, adipiscing a,
vestibulum sit amet, orci. In vitae nunc auctor justo pretium mattis.
Pellentesque sodales rhoncus sem. Cras eget massa sed nisi ornare
euismod. Nunc est. Curabitur faucibus. Pellentesque id erat.
</p><p>
Vivamus arcu. Sed vulputate tempor neque. Integer sagittis. Cras
aliquet. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Proin tempor. Sed at ipsum ac diam
auctor fermentum. Sed odio pede, ullamcorper eget, molestie et,
venenatis sit amet, tellus. Sed a orci. Proin ut nunc id nulla
convallis mattis.
</p>
</div>
</div>
<div id="part4">
<div id="nav4" class="a_h" onclick="new Effect.Accordion('content4');">
Quisque cursus magna.
</div>
<div id="content4" class="a_c">
<p>
Proin porttitor, quam non dictum gravida, magna purus venenatis mi,
a placerat lectus orci in justo. Aliquam ac purus. Sed neque lectus,
molestie sit amet, auctor mollis, condimentum ut, sem. In luctus.
Cras sed justo ut diam sagittis adipiscing. Etiam dolor nisl,
accumsan vel, volutpat ut, interdum et, nibh. Ut lorem pede,
venenatis in, tempor vitae, feugiat sit amet, est. Sed at velit quis
sem varius euismod. Donec quis pede. Pellentesque vestibulum, tortor
id fermentum lobortis, augue nunc cursus leo, sit amet scelerisque
leo nulla vel lorem.
</p>
</div>
</div>
<div id="part5">
<div id="nav5" class="a_h" onclick="new Effect.Accordion('content5');">
Aliquam erat volutpat. Nulla mauris.
</div>
<div id="content5" class="a_c">
<p>
Integer eu diam sit amet nunc adipiscing aliquam. Duis tempus
pretium risus. Maecenas ante augue, volutpat eu, dignissim mattis,
ultricies ac, urna. Suspendisse viverra. Maecenas sit amet nibh.
Donec ullamcorper, justo nec molestie volutpat, arcu nulla dictum
metus, sit amet malesuada velit ante vitae mauris. Vestibulum ut
sem et mi sagittis tempus. Fusce velit. Sed aliquam risus eget
justo porta porttitor.
</p><p>
Maecenas egestas volutpat tellus. Suspendisse rutrum varius dolor.
Nulla facilisi. Praesent mollis tempus quam. Curabitur hendrerit
leo in urna. Aenean sodales hendrerit turpis. Fusce ut neque. Cras
ut eros. Etiam ligula lectus, porttitor nec, semper at, facilisis
tempor, justo. Praesent felis. Aenean a nisi ut nulla ullamcorper
aliquet. Donec nunc tortor, porttitor id, porta quis, consequat
vel, purus. Suspendisse vehicula porta leo. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
Event.observe(window, 'load', bodyOnload);

function bodyOnload() {
$('content1').setStyle({ display: 'none' });
$('content2').setStyle({ display: 'none' });
$('content3').setStyle({ display: 'none' });
$('content4').setStyle({ display: 'none' });
$('content5').setStyle({ display: 'none' });
}

var currentId = null;

Effect.Accordion = function(contentId) {
var slideDown = 0.5;
var slideUp = 0.15;

contentId = $(contentId);
if (currentId != contentId) {
if (currentId == null)
new Effect.SlideDown(contentId, {duration: slideDown});
else {
new Effect.SlideUp(currentId, {duration: slideUp});
new Effect.SlideDown(contentId, {duration: slideDown});
}
currentId = contentId;
} else {
new Effect.SlideUp(currentId, {duration: slideUp});
currentId = null;
}
};
</script>
</body>
</html>


This code worked when I tested in IE7 and FF3.0.4. I then tested my code with the latest versions of Prototype (1.6.0.3) and Script.aculo.us (1.8.2), and the code still worked as expected.

I do agree with the forum you linked to as to using hide() instead of SetStyle, and I was unaware of the dom:loaded recommendation (so I appreciate that).

Could you try my code, and tell me if it works or not for you?

Thanks.

Anthony
Go to the top of the page
 
+Quote Post
Seemi
post Aug 21 2009, 07:14 AM
Post #6


Active Member
**

Group: Members
Posts: 20
Joined: 21-August 09
Member No.: 19,829
QUOTE (anthony3 @ Dec 16 2008, 09:03 AM) *
All of the examples in the book used Prototype 1.5.0 and Script.aculo.us 1.6.4. I wrote the following (sorry it is long) to test the accordion with with these versions, and it works as I claim it is supposed to (I removed the book comments to make it smaller):

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Testing the accordion effect</title>
<style type="text/css">
div.a_h { background-color: #060; border: 1px solid #000;
color: #fff; padding: 4px 8px; }
div.a_c { margin: 0 30px; }
</style>
<script type="text/javascript" src="latest/prototype.js"> </script>
<script type="text/javascript" src="latest/scriptaculous.js?load=effects"> </script>
</head>
<body>
<div id="b_w">
<div id="accordion">
<div id="part1">
<div id="nav1" class="a_h" onclick="new Effect.Accordion('content1');">
Lorem ipsum dolor sit amet
</div>
<div id="content1" class="a_c">
<p>
Curabitur pharetra, nunc vitae pellentesque ultrices, ligula
tortor mollis eros, et mattis sem diam ac orci. Aenean vestibulum
aliquam enim. Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas. Donec accumsan, enim
sit amet aliquet congue, massa ante iaculis sem, id dictum augue
ligula sit amet elit. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Sed sodales massa sit amet eros. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Curabitur gravida. Vivamus mollis. Proin leo pede,
tincidunt id, porttitor quis, pharetra sit amet, quam. Quisque a
odio sed augue varius ultrices. Praesent odio. Mauris viverra
nunc in lacus. Fusce in mi. Nullam urna sapien, porttitor sit amet,
facilisis nec, congue quis, pede.
</p><p>
Vestibulum nec pede. Fusce dui ipsum, imperdiet gravida, interdum
eu, imperdiet a, nisl. Fusce in enim. Suspendisse non velit. Mauris
rhoncus dictum quam. In mollis. Etiam eu erat in nisi luctus
scelerisque. Nulla facilisi. Nam mattis auctor nulla. Aenean risus
lacus, consequat eget, consequat sit amet, scelerisque vitae,
turpis. Suspendisse tortor elit, pellentesque id, suscipit at,
consequat ac, elit. Sed massa leo, molestie sed, fermentum non,
dignissim ac, nisi. Sed tincidunt. Suspendisse tincidunt congue nisl.
</p>
</div>
</div>
<div id="part2">
<div id="nav2" class="a_h" onclick="new Effect.Accordion('content2');">
Vestibulum eget enim nec lorem
</div>
<div id="content2" class="a_c">
<p>
Nullam varius rhoncus urna. Aliquam erat volutpat. Integer pulvinar
scelerisque purus. Sed euismod erat in mi. Nam dolor odio,
ullamcorper nec, mattis eu, placerat a, ipsum. Curabitur ut quam.
Fusce vitae neque. Donec nec mi eu orci auctor facilisis. Vivamus
porta. Donec tincidunt. Sed varius, neque sed placerat egestas,
arcu massa feugiat diam, nec ultricies elit diam sed lectus. In hac
habitasse platea dictumst. Quisque id ante. Ut vulputate, magna a
convallis tincidunt, leo eros ullamcorper turpis, lacinia lacinia
urna erat quis pede. Fusce eleifend, tellus eu sollicitudin
dapibus, eros tellus fringilla libero, sed facilisis lacus felis
sit amet lacus. Integer ullamcorper turpis scelerisque massa
pellentesque hendrerit. Donec dapibus lorem quis massa. Sed in
ante non leo tristique suscipit. Cras eu magna elementum mauris
venenatis sagittis. Nulla euismod justo sit amet elit.
</p>
</div>
</div>
<div id="part3">
<div id="nav3" class="a_h" onclick="new Effect.Accordion('content3');">
Ut interdum risus et ligula.
</div>
<div id="content3" class="a_c">
<p>
Mauris quis quam. Fusce id quam. Integer nec lorem at ipsum fermentum
pulvinar. Morbi tincidunt. Sed lacinia molestie erat. Morbi tempus,
massa ac tristique facilisis, odio nunc tempus lacus, vitae convallis
erat lorem eu pede. Vestibulum ante massa, pretium in, adipiscing a,
vestibulum sit amet, orci. In vitae nunc auctor justo pretium mattis.
Pellentesque sodales rhoncus sem. Cras eget massa sed nisi ornare
euismod. Nunc est. Curabitur faucibus. Pellentesque id erat.
</p><p>
Vivamus arcu. Sed vulputate tempor neque. Integer sagittis. Cras
aliquet. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Proin tempor. Sed at ipsum ac diam
auctor fermentum. Sed odio pede, ullamcorper eget, molestie et,
venenatis sit amet, tellus. Sed a orci. Proin ut nunc id nulla
convallis mattis.
</p>
</div>
</div>
<div id="part4">
<div id="nav4" class="a_h" onclick="new Effect.Accordion('content4');">
Quisque cursus magna.
</div>
<div id="content4" class="a_c">
<p>
Proin porttitor, quam non dictum gravida, magna purus venenatis mi,
a placerat lectus orci in justo. Aliquam ac purus. Sed neque lectus,
molestie sit amet, auctor mollis, condimentum ut, sem. In luctus.
Cras sed justo ut diam sagittis adipiscing. Etiam dolor nisl,
accumsan vel, volutpat ut, interdum et, nibh. Ut lorem pede,
venenatis in, tempor vitae, feugiat sit amet, est. Sed at velit quis
sem varius euismod. Donec quis pede. Pellentesque vestibulum, tortor
id fermentum lobortis, augue nunc cursus leo, sit amet scelerisque
leo nulla vel lorem.
</p>
</div>
</div>
<div id="part5">
<div id="nav5" class="a_h" onclick="new Effect.Accordion('content5');">
Aliquam erat volutpat. Nulla mauris.
</div>
<div id="content5" class="a_c">
<p>
Integer eu diam sit amet nunc adipiscing aliquam. Duis tempus
pretium risus. Maecenas ante augue, volutpat eu, dignissim mattis,
ultricies ac, urna. Suspendisse viverra. Maecenas sit amet nibh.
Donec ullamcorper, justo nec molestie volutpat, arcu nulla dictum
metus, sit amet malesuada velit ante vitae mauris. Vestibulum ut
sem et mi sagittis tempus. Fusce velit. Sed aliquam risus eget
justo porta porttitor.
</p><p>
Maecenas egestas volutpat tellus. Suspendisse rutrum varius dolor.
Nulla facilisi. Praesent mollis tempus quam. Curabitur hendrerit
leo in urna. Aenean sodales hendrerit turpis. Fusce ut neque. Cras
ut eros. Etiam ligula lectus, porttitor nec, semper at, facilisis
tempor, justo. Praesent felis. Aenean a nisi ut nulla ullamcorper
aliquet. Donec nunc tortor, porttitor id, porta quis, consequat
vel, purus. Suspendisse vehicula porta leo. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
Event.observe(window, 'load', bodyOnload);

function bodyOnload() {
$('content1').setStyle({ display: 'none' });
$('content2').setStyle({ display: 'none' });
$('content3').setStyle({ display: 'none' });
$('content4').setStyle({ display: 'none' });
$('content5').setStyle({ display: 'none' });
}

var currentId = null;

Effect.Accordion = function(contentId) {
var slideDown = 0.5;
var slideUp = 0.15;

contentId = $(contentId);
if (currentId != contentId) {
if (currentId == null)
new Effect.SlideDown(contentId, {duration: slideDown});
else {
new Effect.SlideUp(currentId, {duration: slideUp});
new Effect.SlideDown(contentId, {duration: slideDown});
}
currentId = contentId;
} else {
new Effect.SlideUp(currentId, {duration: slideUp});
currentId = null;
}
};
</script>
</body>
</html>


This code worked when I tested in IE7 and FF3.0.4. I then tested my code with the latest versions of Prototype (1.6.0.3) and Script.aculo.us (1.8.2), and the code still worked as expected.

I do agree with the forum you linked to as to using hide() instead of SetStyle, and I was unaware of the dom:loaded recommendation (so I appreciate that).

Could you try my code, and tell me if it works or not for you?

Thanks.

Anthony


Thanks Anthony..
It worked for me quite nicely!!


--------------------
Does Someone Do Medical Assistant Jobs like me? then please guide me to start a Medical Assistant Career.
Go to the top of the page
 
+Quote Post
cyrus jackson
post Nov 3 2009, 03:42 AM
Post #7


New Member
*

Group: Members
Posts: 3
Joined: 3-November 09
Member No.: 20,847
QUOTE (anthony3 @ Dec 16 2008, 09:03 AM) *
All of the examples in the book used Prototype 1.5.0 and Script.aculo.us 1.6.4. I wrote the following (sorry it is long) to test the accordion with with these versions, and it works as I claim it is supposed to (I removed the book comments to make it smaller):

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Testing the accordion effect</title>
<style type="text/css">
div.a_h { background-color: #060; border: 1px solid #000;
color: #fff; padding: 4px 8px; }
div.a_c { margin: 0 30px; }
</style>
<script type="text/javascript" src="latest/prototype.js"> </script>
<script type="text/javascript" src="latest/scriptaculous.js?load=effects"> </script>
</head>
<body>
<div id="b_w">
<div id="accordion">
<div id="part1">
<div id="nav1" class="a_h" onclick="new Effect.Accordion('content1');">
Lorem ipsum dolor sit amet
</div>
<div id="content1" class="a_c">
<p>
Curabitur pharetra, nunc vitae pellentesque ultrices, ligula
tortor mollis eros, et mattis sem diam ac orci. Aenean vestibulum
aliquam enim. Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas. Donec accumsan, enim
sit amet aliquet congue, massa ante iaculis sem, id dictum augue
ligula sit amet elit. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Sed sodales massa sit amet eros. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Curabitur gravida. Vivamus mollis. Proin leo pede,
tincidunt id, porttitor quis, pharetra sit amet, quam. Quisque a
odio sed augue varius ultrices. Praesent odio. Mauris viverra
nunc in lacus. Fusce in mi. Nullam urna sapien, porttitor sit amet,
facilisis nec, congue quis, pede.
</p><p>
Vestibulum nec pede. Fusce dui ipsum, imperdiet gravida, interdum
eu, imperdiet a, nisl. Fusce in enim. Suspendisse non velit. Mauris
rhoncus dictum quam. In mollis. Etiam eu erat in nisi luctus
scelerisque. Nulla facilisi. Nam mattis auctor nulla. Aenean risus
lacus, consequat eget, consequat sit amet, scelerisque vitae,
turpis. Suspendisse tortor elit, pellentesque id, suscipit at,
consequat ac, elit. Sed massa leo, molestie sed, fermentum non,
dignissim ac, nisi. Sed tincidunt. Suspendisse tincidunt congue nisl.
</p>
</div>
</div>
<div id="part2">
<div id="nav2" class="a_h" onclick="new Effect.Accordion('content2');">
Vestibulum eget enim nec lorem
</div>
<div id="content2" class="a_c">
<p>
Nullam varius rhoncus urna. Aliquam erat volutpat. Integer pulvinar
scelerisque purus. Sed euismod erat in mi. Nam dolor odio,
ullamcorper nec, mattis eu, placerat a, ipsum. Curabitur ut quam.
Fusce vitae neque. Donec nec mi eu orci auctor facilisis. Vivamus
porta. Donec tincidunt. Sed varius, neque sed placerat egestas,
arcu massa feugiat diam, nec ultricies elit diam sed lectus. In hac
habitasse platea dictumst. Quisque id ante. Ut vulputate, magna a
convallis tincidunt, leo eros ullamcorper turpis, lacinia lacinia
urna erat quis pede. Fusce eleifend, tellus eu sollicitudin
dapibus, eros tellus fringilla libero, sed facilisis lacus felis
sit amet lacus. Integer ullamcorper turpis scelerisque massa
pellentesque hendrerit. Donec dapibus lorem quis massa. Sed in
ante non leo tristique suscipit. Cras eu magna elementum mauris
venenatis sagittis. Nulla euismod justo sit amet elit.
</p>
</div>
</div>
<div id="part3">
<div id="nav3" class="a_h" onclick="new Effect.Accordion('content3');">
Ut interdum risus et ligula.
</div>
<div id="content3" class="a_c">
<p>
Mauris quis quam. Fusce id quam. Integer nec lorem at ipsum fermentum
pulvinar. Morbi tincidunt. Sed lacinia molestie erat. Morbi tempus,
massa ac tristique facilisis, odio nunc tempus lacus, vitae convallis
erat lorem eu pede. Vestibulum ante massa, pretium in, adipiscing a,
vestibulum sit amet, orci. In vitae nunc auctor justo pretium mattis.
Pellentesque sodales rhoncus sem. Cras eget massa sed nisi ornare
euismod. Nunc est. Curabitur faucibus. Pellentesque id erat.
</p><p>
Vivamus arcu. Sed vulputate tempor neque. Integer sagittis. Cras
aliquet. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Proin tempor. Sed at ipsum ac diam
auctor fermentum. Sed odio pede, ullamcorper eget, molestie et,
venenatis sit amet, tellus. Sed a orci. Proin ut nunc id nulla
convallis mattis.
</p>
</div>
</div>
<div id="part4">
<div id="nav4" class="a_h" onclick="new Effect.Accordion('content4');">
Quisque cursus magna.
</div>
<div id="content4" class="a_c">
<p>
Proin porttitor, quam non dictum gravida, magna purus venenatis mi,
a placerat lectus orci in justo. Aliquam ac purus. Sed neque lectus,
molestie sit amet, auctor mollis, condimentum ut, sem. In luctus.
Cras sed justo ut diam sagittis adipiscing. Etiam dolor nisl,
accumsan vel, volutpat ut, interdum et, nibh. Ut lorem pede,
venenatis in, tempor vitae, feugiat sit amet, est. Sed at velit quis
sem varius euismod. Donec quis pede. Pellentesque vestibulum, tortor
id fermentum lobortis, augue nunc cursus leo, sit amet scelerisque
leo nulla vel lorem.
</p>
</div>
</div>
<div id="part5">
<div id="nav5" class="a_h" onclick="new Effect.Accordion('content5');">
Aliquam erat volutpat. Nulla mauris.
</div>
<div id="content5" class="a_c">
<p>
Integer eu diam sit amet nunc adipiscing aliquam. Duis tempus
pretium risus. Maecenas ante augue, volutpat eu, dignissim mattis,
ultricies ac, urna. Suspendisse viverra. Maecenas sit amet nibh.
Donec ullamcorper, justo nec molestie volutpat, arcu nulla dictum
metus, sit amet malesuada velit ante vitae mauris. Vestibulum ut
sem et mi sagittis tempus. Fusce velit. Sed aliquam risus eget
justo porta porttitor.
</p><p>
Maecenas egestas volutpat tellus. Suspendisse rutrum varius dolor.
Nulla facilisi. Praesent mollis tempus quam. Curabitur hendrerit
leo in urna. Aenean sodales hendrerit turpis. Fusce ut neque. Cras
ut eros. Etiam ligula lectus, porttitor nec, semper at, facilisis
tempor, justo. Praesent felis. Aenean a nisi ut nulla ullamcorper
aliquet. Donec nunc tortor, porttitor id, porta quis, consequat
vel, purus. Suspendisse vehicula porta leo. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
Event.observe(window, 'load', bodyOnload);

function bodyOnload() {
$('content1').setStyle({ display: 'none' });
$('content2').setStyle({ display: 'none' });
$('content3').setStyle({ display: 'none' });
$('content4').setStyle({ display: 'none' });
$('content5').setStyle({ display: 'none' });
}

var currentId = null;

Effect.Accordion = function(contentId) {
var slideDown = 0.5;
var slideUp = 0.15;

contentId = $(contentId);
if (currentId != contentId) {
if (currentId == null)
new Effect.SlideDown(contentId, {duration: slideDown});
else {
new Effect.SlideUp(currentId, {duration: slideUp});
new Effect.SlideDown(contentId, {duration: slideDown});
}
currentId = contentId;
} else {
new Effect.SlideUp(currentId, {duration: slideUp});
currentId = null;
}
};
</script>
</body>
</html>


This code worked when I tested in IE7 and FF3.0.4. I then tested my code with the latest versions of Prototype (1.6.0.3) and Script.aculo.us (1.8.2), and the code still worked as expected.

I do agree with the forum you linked to as to using hide() instead of SetStyle, and I was unaware of the dom:loaded recommendation (so I appreciate that).

Could you try my code, and tell me if it works or not for you?

Thanks.

Anthony


Thankyou so much, I was really struggling with this!


--------------------
Making money online with surveys
Go to the top of the page
 
+Quote Post
kevinspence
post Nov 7 2009, 09:42 PM
Post #8


New Member
*

Group: Members
Posts: 1
Joined: 7-November 09
Member No.: 20,906
I was having the same problem -- thanks for posting the solution!
Go to the top of the page
 
+Quote Post
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

RSS Lo-Fi Version Time is now: 22nd November 2009 - 09:52 PM
Powered By IP.Board © 2009  IPS, Inc
Powered by Minerva SEO IPB module