[Proto-Scripty] Re: Best way to apply an effect on page load?
That works fine TJ, thank you! I really appreciate the help.
Matt
On Jan 15, 5:17 pm, T.J. Crowder t...@crowdersoftware.com wrote:
Hi Edd,
Just to confuse issues slightly, wouldn’t it be better to use #map
instead of #each?
Why? He isn't using the return value, so no need to create the return
array.
One concern in both cases, though, is whether Effect.SlideDown will be
bothered by the extra parameter provided by both #each and #map's
calls to the iterator. According to the scripty docs, it expects the
element and an optional options object, whereas #each and #map will
pass it the element and the element's index in the array. Oops. -
grin-
So perhaps better to replace
.each(Effect.SlideDown);
...in the various examples with something more expicit:
.each(function(elm) {
Effect.SlideDown(elm);
});
...or something like that.
--
T.J. Crowder
tj / crowder software / com
Independent Software Engineer, consulting services available
On Jan 15, 3:19 pm, redheat ecouch...@googlemail.com wrote:
TJ,
Just to confuse issues slightly, wouldn’t it be better to use #map
instead of #each?
Edd
P.S., I haven’t tested, so #map may not work.
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);
});
--~--~-~--~~~---~--~~
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
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Best way to apply an effect on page load?
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
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Best way to apply an effect on page load?
TJ,
Just to confuse issues slightly, wouldn’t it be better to use #map
instead of #each?
Edd
P.S., I haven’t tested, so #map may not work.
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);
});
--~--~-~--~~~---~--~~
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
-~--~~~~--~~--~--~---
[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 divs 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;
}
[Proto-Scripty] Re: Best way to apply an effect on page load?
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 divs 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
[Proto-Scripty] Re: Best way to apply an effect on page load?
Hi Edd,
Just to confuse issues slightly, wouldn’t it be better to use #map
instead of #each?
Why? He isn't using the return value, so no need to create the return
array.
One concern in both cases, though, is whether Effect.SlideDown will be
bothered by the extra parameter provided by both #each and #map's
calls to the iterator. According to the scripty docs, it expects the
element and an optional options object, whereas #each and #map will
pass it the element and the element's index in the array. Oops. -
grin-
So perhaps better to replace
.each(Effect.SlideDown);
...in the various examples with something more expicit:
.each(function(elm) {
Effect.SlideDown(elm);
});
...or something like that.
--
T.J. Crowder
tj / crowder software / com
Independent Software Engineer, consulting services available
On Jan 15, 3:19 pm, redheat ecouch...@googlemail.com wrote:
TJ,
Just to confuse issues slightly, wouldn’t it be better to use #map
instead of #each?
Edd
P.S., I haven’t tested, so #map may not work.
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);
});
--~--~-~--~~~---~--~~
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
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Best way to apply an effect on page load?
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
-~--~~~~--~~--~--~---
