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 <[email protected]> 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 <[email protected]> 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" <[email protected]> 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 <[email protected]> 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 [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
