Hello,
I'm a noob with PHP and unversed in Javascript, but I need to implement some Ajax in a page I'm building. I'm using the Scriptaculous libraries.
Here's the problem I'm having:
I have four different links in the menubar. When I click on the first link, it makes a div block appear using the effect "Appear". If I click the same link again, the div fades
Effect.toggle . This works great. Now, I click on a new link and it does the same thing. Great. The problem arises if I have already clicked on link "A" and the div is showing and I then click on link "B". The div associated with link "B" appears over the div associated with link "A".
The help I'm asking:
When I click a link, it should first try to fade any visible div and then make its associated div appear.
This is what I've been trying (it doesn't quite work though):
my combo.js script:
Effect.OpenUp = function(element) {
element = $(element);
new Effect.Appear(element, arguments[1] || {});
}
Effect.CloseDown = function(element) {
element = $(element);
new Effect.Fade(element, arguments[1] || {});
}
Effect.Combo = function(element) {
element = $(element);
if(element.style.display != 'none') {
new Effect.CloseDown(element, arguments[1] || {});
setTimeout('Effect.OpenUp(element, arguments[1] || {})', 250)
}
else { new Effect.OpenUp(element, arguments[1] || {}); }
}
My menubar:
<div id="menubar">
<a href="#" onclick="Effect.Combo('box',{duration: .8});">about</a><br /><br /><br />
<a href="#" onclick="Effect.Combo('box',{duration: .8});">tracks</a>
</div>
My dispaying page:
<div id="box" style="display:run-in;">
<p>Content Stuff.</p>
</div>
Thank you for any help!
Unsolved 
