Hey Yogesh,
Yogesh Mangaj a écrit :
When i click one link the corresponding <div> blinds down, but when i
click some other link the first <div> still persists and won't blind up.
That's pretty nominal: there's no reason why blinding down something
should blind up something else. It only makes sense in the specific
context of your page, so you'll have to code that.
Can anyone please tell me how should i get to work such that only one
<div> is present at one time, and clicking on any other link should
blind up the first <div> and simultaneously blind down the newly clicked
<div>
Well, you'll need to make all your links trigger the same behavior,
which is:
1. if there's an existing visible div that is not the current one, toggle it
2. toggle the current one
3. mark the current one as the "existing visible div"
This will quickly get ugly in inline JS (and inline JS *is* ugly anyhow!
;-)), so you'd be better off writing a small JS object to handle this,
and using UJS to bind it to all your links.
I'm just 16 and new to all this, i don't know scripting, but i do
understand a little bit of it.
As if age mattered :-)
OK, here's a blind stab at it. Let's assume all your toggling links
have a 'toggler' in their class attribute, and have an id attribute of
the form 'aToggler_XYZ', with their respective DIVs ID's as
'divContent_XYZ' :
=====================
// div_toggler.js, requires Prototype 1.5
var DivToggler = {
_current: null,
toggle: function(event) {
var src = $(Event.element(event));
if ('A' != src.tagName || !src.hasClassName('toggler'))
return;
Event.stop(event);
var div = $('divContent_' + src.id.split('_')[1]);
if (null !== _current && _current != div)
Effect.toggle(div, 'blind');
Effect.toggle(div, 'blind');
_current = div;
}
};
Event.observe(window, 'load', function() {
Event.observe(document.body, 'click', DivToggler.toggle);
});
=====================
Then just load this in your <head>, after loading prototype.js. This
will bind to all clicks in the document's body, letting go of those
outside toggler-class'd <a> elements, and handling those. Another way
to do it, if you have few enough links, is to preselect all those links
and create an event listener for every one of those (I don't like this
as much for large amounts of links, though), replacing the final block
with this:
Event.observe(window, 'load', function() {
$$('a.toggler').invoke('observe', 'click', DivToggler.toggle);
});
'HTH
--
Christophe Porteneuve a.k.a. TDD
"[They] did not know it was impossible, so they did it." --Mark Twain
Email: [EMAIL PROTECTED]
--~--~---------~--~----~------------~-------~--~----~
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 [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
