jQuery currently does not give the ability to run a function when a specific element is loaded into the DOM. Other libraries have this ability and it would be a useful addition. It's not in the 1.2 roadmap or in any plugin that I have found, so I was wondering if it has been considered.
This feature would be similar to jQuery.ready() except that it would apply to a specific element instead of the whole document. I imagine the declaration would be something like jQuery.elementReady(id, fn) which would call the given function as soon as an element with the given ID is available in the DOM.
The Yahoo UI library has two variants of this (onAvailable and onContentReady), which work by polling. (See http://developer.yahoo.com/yui/docs/YAHOO.util.Event.html) I think other libraries also include this function. I'm sure it could be added to jQuery, though code size is always the concern.
Has anyone thought about this, or even worked on it?
Bennett McElwee wrote: > jQuery currently does not give the ability to run a function when a > specific element is loaded into the DOM. Other libraries have this
In fact, this was originally considered for inclusion into 1.2, but will probably not quite make it just yet. However, we're definitely encouraging people to use it and let Brandon (and the jQuery team) know about any weird issues that arise.
> Bennett McElwee wrote: > > jQuery currently does not give the ability to run a function when a > > specific element is loaded into the DOM. Other libraries have this
Doesn't it require periodically running a script (via setInterval I presume?) to check if the element is ready? If applied to many elements, could it be detrimental to performance?
I can see the benefit of attaching a function automatically to any new elements added via add, pre/append etc (for example, when you are cloning form fields with validation applied to them).
On 31/07/07, Yehuda Katz <wyc...@gmail.com> wrote:
> In fact, this was originally considered for inclusion into 1.2, but will > probably not quite make it just yet. However, we're definitely encouraging > people to use it and let Brandon (and the jQuery team) know about any weird > issues that arise.
> -- Yehuda
> On 7/30/07, Steve Clay <st...@mrclay.org> wrote:
> > Bennett McElwee wrote: > > > jQuery currently does not give the ability to run a function when a > > > specific element is loaded into the DOM. Other libraries have this
I believe there are two different trains of thought in this thread. The original thread starter is not talking about a behavior type plugin where when the DOM is updated events and or functions are applied to matching elements. Instead he is actually talking about an event to fire before document ready. An event that will fire once a single element and/or its contents are available. I thought about writing this a while back but document ready has suited my needs and I just haven't found the time. I think to do it right someone has to create an "available" method and rework the existing "ready" method to work for both document and elements.
At least I think that is the case. :)
Oh and please use the behavior plugin! Test it and let us know if it works or not. There have been some interesting use-cases develop around it and I want to know how you might use it. :)
-- Brandon Aaron
On 7/31/07, Sam Collett <sam.coll...@gmail.com> wrote:
> Doesn't it require periodically running a script (via setInterval I > presume?) to check if the element is ready? If applied to many > elements, could it be detrimental to performance?
> I can see the benefit of attaching a function automatically to any new > elements added via add, pre/append etc (for example, when you are > cloning form fields with validation applied to them).
> On 31/07/07, Yehuda Katz <wyc...@gmail.com> wrote: > > In fact, this was originally considered for inclusion into 1.2, but will > > probably not quite make it just yet. However, we're definitely > encouraging > > people to use it and let Brandon (and the jQuery team) know about any > weird > > issues that arise.
> > -- Yehuda
> > On 7/30/07, Steve Clay <st...@mrclay.org> wrote:
> > > Bennett McElwee wrote: > > > > jQuery currently does not give the ability to run a function when a > > > > specific element is loaded into the DOM. Other libraries have this
On Aug 1, 12:22 am, "Brandon Aaron" <brandon.aa...@gmail.com> wrote:
> I believe there are two different trains of thought in this thread.
Yes. The behaviour plugin is an excellent piece of software, but it does not address the problem I posted about.
> The > original thread starter is [...] talking about an event to fire before > document ready. An event that will fire once a single element and/or its > contents are available.
Exactly. Here's the documentation for the Yahoo UI version of this, which does just what I want:
static void onAvailable ( p_id , p_fn , p_obj , p_override ) Executes the supplied callback when the item with the supplied id is found. This is meant to be used to execute behavior as soon as possible as the page loads. If you use this after the initial page load it will poll for a fixed time for the element. The number of times it will poll and the frequency are configurable. By default it will poll for 10 seconds.
The callback is executed with a single parameter: the custom object parameter, if provided.
Parameters: p_id <string> the id of the element to look for. p_fn <function> what to execute when the element is found. p_obj <object> an optional object to be passed back as a parameter to p_fn. p_override <boolean|object> If set to true, p_fn will execute in the scope of p_obj, if set to an object it will execute in the scope of that object
Returns: void
> I thought about writing this a while back but > document ready has suited my needs and I just haven't found the time.
Here's a simple example of where jQuery.ready is insufficient. A large- ish page (50kb) uses jQuery.ready to add rounded corners to the header at the top of the page. The title displays straight away with square corners; then the rest of the page loads (a delay of a second); then jQuery.ready fires and the corners abruptly become rounded. If we rounded the corners as soon as the header was available then the user experience would be smoother.
Another poster was worried about poor performance if the technique is applied to many elements. The obvious remedy is: don't apply it to many elements. :) Actually, the Yahoo UI code simply adds each monitored element to a list, and runs through the list every 10ms doing getElementByID for each item to see if it's available yet. It would be easy to construct a situation where this killed performance, but used judiciously it has not caused any problems for me at least.
Sounds like a great opportunity to build a plugin! :-) The best way to get functionality into jQuery core is to prove its usefulness through a plugin. If people start using a plugin all the time, then it becomes obvious that it should be in core (which is what's happening with the Dimensions plugin and part of the forms plugin).
--John
On 8/5/07, Bennett McElwee <bennettmcel...@gmail.com> wrote:
> On Aug 1, 12:22 am, "Brandon Aaron" <brandon.aa...@gmail.com> wrote: > > I believe there are two different trains of thought in this thread.
> Yes. The behaviour plugin is an excellent piece of software, but it > does not address the problem I posted about.
> > The > > original thread starter is [...] talking about an event to fire before > > document ready. An event that will fire once a single element and/or its > > contents are available.
> Exactly. Here's the documentation for the Yahoo UI version of this, > which does just what I want:
> static void onAvailable ( p_id , p_fn , p_obj , p_override ) > Executes the supplied callback when the item with the supplied id is > found. This is meant to be used to execute behavior as soon as > possible as the page loads. If you use this after the initial page > load it will poll for a fixed time for the element. The number of > times it will poll and the frequency are configurable. By default it > will poll for 10 seconds.
> The callback is executed with a single parameter: the custom object > parameter, if provided.
> Parameters: > p_id <string> the id of the element to look for. > p_fn <function> what to execute when the element is found. > p_obj <object> an optional object to be passed back as a parameter > to p_fn. > p_override <boolean|object> If set to true, p_fn will execute in > the scope of p_obj, if set to an object it will execute in the scope > of that object
> Returns: void
> > I thought about writing this a while back but > > document ready has suited my needs and I just haven't found the time.
> Here's a simple example of where jQuery.ready is insufficient. A large- > ish page (50kb) uses jQuery.ready to add rounded corners to the header > at the top of the page. The title displays straight away with square > corners; then the rest of the page loads (a delay of a second); then > jQuery.ready fires and the corners abruptly become rounded. If we > rounded the corners as soon as the header was available then the user > experience would be smoother.
> Another poster was worried about poor performance if the technique is > applied to many elements. The obvious remedy is: don't apply it to > many elements. :) Actually, the Yahoo UI code simply adds each > monitored element to a list, and runs through the list every 10ms > doing getElementByID for each item to see if it's available yet. It > would be easy to construct a situation where this killed performance, > but used judiciously it has not caused any problems for me at least.
On Aug 6, 10:25 am, "John Resig" <jere...@gmail.com> wrote:
> Sounds like a great opportunity to build a plugin! :-) The best way to > get functionality into jQuery core is to prove its usefulness through > a plugin.
Thanks for that. I was planning to put something together myself, but I didn't want to duplicate effort in case somebody else had already done it. I will add this plugin task to my to-do list. But if anyone else out there feels like having a go as well, don't let me stop you!
hmm, this is easy enough if you just do it the old school way:
<body> [headers to round] <script ...> /* do corner rounding on header stuff */ </script> [the rest of the page that takes a while to load] </body>
Is there a reason that won't work or isn't ideal? Since you know exactly when you want the corner rounding to start, seems like you shouldn't need to mess around with callback voodoo...
--Erik
On 8/5/07, Bennett McElwee <bennettmcel...@gmail.com> wrote:
> On Aug 1, 12:22 am, "Brandon Aaron" <brandon.aa...@gmail.com> wrote: > > I believe there are two different trains of thought in this thread.
> Yes. The behaviour plugin is an excellent piece of software, but it > does not address the problem I posted about.
> > The > > original thread starter is [...] talking about an event to fire before > > document ready. An event that will fire once a single element and/or its > > contents are available.
> Exactly. Here's the documentation for the Yahoo UI version of this, > which does just what I want:
> static void onAvailable ( p_id , p_fn , p_obj , p_override ) > Executes the supplied callback when the item with the supplied id is > found. This is meant to be used to execute behavior as soon as > possible as the page loads. If you use this after the initial page > load it will poll for a fixed time for the element. The number of > times it will poll and the frequency are configurable. By default it > will poll for 10 seconds.
> The callback is executed with a single parameter: the custom object > parameter, if provided.
> Parameters: > p_id <string> the id of the element to look for. > p_fn <function> what to execute when the element is found. > p_obj <object> an optional object to be passed back as a parameter > to p_fn. > p_override <boolean|object> If set to true, p_fn will execute in > the scope of p_obj, if set to an object it will execute in the scope > of that object
> Returns: void
> > I thought about writing this a while back but > > document ready has suited my needs and I just haven't found the time.
> Here's a simple example of where jQuery.ready is insufficient. A large- > ish page (50kb) uses jQuery.ready to add rounded corners to the header > at the top of the page. The title displays straight away with square > corners; then the rest of the page loads (a delay of a second); then > jQuery.ready fires and the corners abruptly become rounded. If we > rounded the corners as soon as the header was available then the user > experience would be smoother.
> Another poster was worried about poor performance if the technique is > applied to many elements. The obvious remedy is: don't apply it to > many elements. :) Actually, the Yahoo UI code simply adds each > monitored element to a list, and runs through the list every 10ms > doing getElementByID for each item to see if it's available yet. It > would be easy to construct a situation where this killed performance, > but used judiciously it has not caused any problems for me at least.
Erik Beeson wrote: > hmm, this is easy enough if you just do it the old school way:
> <body> > [headers to round] > <script ...> /* do corner rounding on header stuff */ </script> > [the rest of the page that takes a while to load] > </body>
> Is there a reason that won't work or isn't ideal? Since you know > exactly when you want the corner rounding to start, seems like you > shouldn't need to mess around with callback voodoo...
> --Erik
Even more old school, you could even do it with pure CSS ;-)
> Even more old school, you could even do it with pure CSS ;-)
True. But then you end up with either fixed sized boxes, or fairly hairy, un-semantic markup, or both. It's all about markup that starts out clean and is completely abused by JavaScript to be made roundy. ShadedBorder creates 1153 divs to make rounded corners. Imagine doing that by hand ;) Ouch.
I'm still waiting for browsers to support border-radius properly... and waiting, and waiting, and waiting...
