[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" 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 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 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 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?
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" To: "Prototype & script.aculo.us" 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 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" 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 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 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" 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&
[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 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" 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 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 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" 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 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?
[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?
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 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 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" 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 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?
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 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" 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 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?
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" 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 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?
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 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 -~--~~~~--~~--~--~---