Hello everyone! I''m new to script.aculo.us. I took someone code on
wiki.script.aculo.us and update alittle bit. However, there is still a
problem occur when the user clicks repeatedly 2 or 3 times over each
header. Another problem is that when it first render effects, it is
alittle stuck for the first time. Can anyone help me to solve this
code for me?
<div id="accordion">
<div id="panel1">
<h3 id="visible" onClick="accordion(this)">Panel
1</h3>
<div id="panel1-body" class="panel_body">
<div>
This is the contents of this panel.
</div>
</div>
</div>
<div id="panel2">
<h3 onClick="accordion(this)">Panel 2</h3>
<div id="panel2-body" class="panel_body">
<div>
This is the contents of this panel.
</div>
</div>
</div>
<div id="panel3">
<h3 onClick="accordion(this)">Panel 3</h3>
<div id="panel3-body" class="panel_body">
<div>
This is the contents of this panel.
</div>
</div>
</div>
<div id="panel4">
<h3 onClick="accordion(this)">Panel 4</h3>
<div id="panel4-body" class="panel_body">
<div>
This is the contents of this panel.
</div>
</div>
</div>
</div>
<script type="text/javascript">
function accordion(el) {
if ($(''visible'') == el) {
var current = el.parentNode.id+''-body'';
//new Effect.SlideUp(current, {queue: ''front'', duration:
0.7, limit:
2});
//new Effect.SlideDown(current, {queue: ''end'', duration:
0.7, limit:
2});
var queue = Effect.Queues.get(''panel'');
queue.each(function(e) { e.cancel() });
new Effect.SlideUp(current, {queue: {position:''front'',
scope:
''panel'', duration: 0.7, limit:2} });
new Effect.SlideDown(current, {queue: {position:''end'',
scope:
''panel'', duration: 0.7, limit:2} });
window.status = Effect.Queues;
return;
}
if ($(''visible'')) {
var eldown = el.parentNode.id+''-body'';
var elup =
$(''visible'').parentNode.id+''-body'';
//alert(eldown + " " + elup);
/*new Effect.Parallel(
[
new Effect.SlideUp(elup),
new Effect.SlideDown(eldown)
], {
duration: 0.5
});*/
//new Effect.SlideUp(elup, {queue: ''front'', duration: 0.7,
limit:
2});
//new Effect.SlideDown(eldown, {queue: ''end'', duration: 0.7,
limit:
2});
var queue = Effect.Queues.get(''panel'');
queue.each(function(e) { e.cancel() });
new Effect.SlideUp(elup, {queue: {position:''front'', scope:
''panel'',
duration: 0.7, limit:2} });
new Effect.SlideDown(eldown, {queue: {position:''end'', scope:
''panel'', duration: 0.7, limit:2} });
$(''visible'').id = '''';
}
el.id = ''visible'';
}
function init() {
// hide all elements apart from the one with id visible
var acc = document.getElementById(''accordion'');
var apanels = acc.getElementsByTagName(''div'');
for (i = 0; i < apanels.length; i++) {
if (apanels[i].className == ''panel_body'') {
apanels[i].style.display = ''none'';
}
}
var avis =
document.getElementById(''visible'').parentNode.id+''-
body'';
document.getElementById(avis).style.display = ''block'';
prev = avis;
}
function addEvent(elm, evType, fn, useCapture) {
elm["on"+evType]=fn;return;
}
addEvent(window, "load", init);
</script>
Thanks
Chamnap
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---