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: tdd-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---