AJAX

Ajax help => Scriptculous

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Aug 2007

Posts: 11

Reputation: bigtalk is an unknown quantity at this point

Solved Threads: 0

bigtalk

Offline

Newbie Poster

Ajax help => Scriptculous

Jul 25th, 2008

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:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
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] || {}); }
}
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:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<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>
<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:

Help with Code Tags

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)

<div id="box" style="display:run-in;">
<p>Content Stuff.</p>
</div>

Thank you for any help!

nerding-out hard core.

Check out my music at:
www.JonRyser.com

•

Join Date: Aug 2007

Posts: 11

Reputation: bigtalk is an unknown quantity at this point

Solved Threads: 0

bigtalk

Offline

Newbie Poster

Re: Ajax help => Scriptculous

Jul 30th, 2008

SO, I guess it does work. I just needed to change:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
setTimeout('Effect.OpenUp(element, arguments[1] || {})', 250)
setTimeout('Effect.OpenUp(element, arguments[1] || {})', 250)

in my combo.js file to:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
setTimeout('Effect.OpenUp("box",{duration: 0.8});', 1000)
setTimeout('Effect.OpenUp("box",{duration: 0.8});', 1000)