if you want to work out whats currently selected you can add a click event
to the tab headings and store the value in a hidden field somewhere .. then
you can allways access it whenever you need to
Regards ALex
----- Original Message -----
From: "Matt" <guitarroman...@gmail.com>
To: "Prototype & script.aculo.us" <prototype-scriptaculous@googlegroups.com>
Sent: Thursday, January 15, 2009 5:11 PM
Subject: [Proto-Scripty] Re: Best way to apply an effect on page load?
Thanks TJ, think I get it now!
One question - since I do have multiple <div>s with a class of 'test',
it might just be easier to make them all do the same effect at once
(the user will only see one at a time anyway due to the tabs and I
can't figure out how to make the script aware of which one's current -
this value's passed in the URL so it could be admin.php#addProduct or
admin.php#addRange etc).
If I was to use this code:
document.observe("dom:loaded", function() {
$$(div.test').each(Effect.SlideDown);
});
This applies it to all the div.tests - fine. But how can I add effect
options? I tried this and it didn't work:
document.observe("dom:loaded", function() {
$$('#editProducts div.test').each(Effect.Fade({ duration: 3.0, from:
0, to: 1 });
});
Thanks
Matt
On Jan 15, 1:38 pm, "T.J. Crowder" <t...@crowdersoftware.com> wrote:
> Hi Matt,
>
> Yes, *slightly*: Element#select() and $$() both return an array of
> matching (extended) elements. So you need to index into it.
>
> If you know there will only be one and don't mind if the effect
> applies to all of them if (for whatever reason) there's more than one,
> Enumerable#each makes for a concise bit of code:
>
> document.observe("dom:loaded", function() {
> $('editProducts').select('div.test').each(Effect.SlideDown);
>
> });
>
> Or you can combine the $() and select() using descendant selectors
> with $$():
>
> document.observe("dom:loaded", function() {
> $$('#editProducts div.test').each(Effect.SlideDown);
>
> });
>
> (I haven't compared the performance differences between those.)
>
> Alternately, if you really only want to do it once even if there are
> multiple matches:
>
> document.observe("dom:loaded", function() {
> var pageBox = $('editProducts').select('div.test')[0];
> // or var pageBox = $$('#editProducts div.test')[0];
> if (pageBox) {
> Effect.SlideDown(pageBox);
> }
>
> });
>
> Side notes:
>
> * You don't need to return false from dom:loaded handlers.
> * You don't have to extend elements returned by $$() or Element#select
> () by passing them through $() -- that's already been done for you.
> * kangax tells me dom:loaded is unreliable in its current
> implementation on IE. (I haven't seen a problem, but he knows this
> stuff better than I do.) I haven't had a chance to search lighthouse
> yet to find out the whens/wherefores of that. I believe 1.6.0.4 is
> meant to address it.
>
> HTH,
> --
> T.J. Crowder
> tj / crowder software / com
> Independent Software Engineer, consulting services available
>
> On Jan 14, 5:07 pm, Matt <guitarroman...@gmail.com> wrote:
>
> > After some tests, I can see that my code above isn't selecting the
> > element properly - am I using select() wrong?
>
> > Thanks
> > Matt
>
> > On Jan 13, 3:10 pm, Matt <guitarroman...@gmail.com> wrote:
>
> > > Hi TJ, thanks for the reply - that does sound about right for what I
> > > want, congrats!
>
> > > I tried this code:
>
> > > document.observe("dom:loaded", function() {
> > > var pageBox = $('editProducts').select('div.test');
> > > Effect.SlideDown($(pageBox)); return false;
>
> > > });
>
> > > the 'editProducts' part is the bit that needs to be dynamic,
> > > basically, but for now I'm trying to test it using hardcoded
> > > variables. The #editProducts div/tab definitely contains a div with a
> > > class 'test' but it doesn't run the effect when I display it. Is my
> > > syntax wrong?
>
> > > On Jan 13, 1:48 pm, "T.J. Crowder" <t...@crowdersoftware.com> wrote:
>
> > > > Hi,
>
> > > > Would the dom:loaded event[1] provide the trigger you're looking
> > > > for?
> > > > Or am I missing the point, as seems likely. :-) If the real issue is
> > > > identifying the correct div or something, it depends on how the tabs
> > > > are being done, but you should be able to figure out which tab is
> > > > "visible" and then find the appropriate error box (perhaps by
> > > > classname by using Element#select[2] on the tab's element).
>
> > > > Apologies if I've completely misunderstood and told you things you
> > > > already know. :-)
>
> > > > [1]http://prototypejs.org/api/document/observe
> > > > [2]http://prototypejs.org/api/element/select
>
> > > > HTH,
> > > > --
> > > > T.J. Crowder
> > > > tj / crowder software / com
> > > > Independent Software Engineer, consulting services available
>
> > > > On Jan 13, 11:28 am, Matt <guitarroman...@gmail.com> wrote:
>
> > > > > Hi everyone.
>
> > > > > I'm producing an admin control panel script in PHP. It uses our
> > > > > favourite JS library to produce a tabbed interface. I have a div
> > > > > used
> > > > > for response text which displays to the user the result of their
> > > > > actions, eg, an error ("price must be a number") or success
> > > > > ("product
> > > > > was added!").
>
> > > > > I want that box to fade in (or some other highlighting effect) on
> > > > > page
> > > > > load. The problem is, I have 5 of the boxes positioned, one for
> > > > > each
> > > > > tab of the interface (depending on what the user's doing at the
> > > > > time).
>
> > > > > How can I run a custom pageload function so that when the page
> > > > > refreshes, it applies a fade in effect to a specific div? Ideally
> > > > > I'd
> > > > > have a function like:
>
> > > > > function loadBox(boxID)
> > > > > {
> > > > > Effect.SlideDown($(boxID)); return false;
>
> > > > > }
>
> > > > > and then call it like loadBox("addProductResponse") on the
> > > > > relevant
> > > > > tab area. Does this make sense? How can I do it?!
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
