How to apply this method to all future matching elements as well?

Question

The following javascript/jquery snippet applies a css to all currently matchicng elements in the DOM.

$('.centeredByJquery').each(function(){
    $(this).css({'margin-left': -parseInt($(this).css('width'))/2,
                'left':'50%',
                'margin-top': -parseInt($(this).css('height'))/2,
                'top':'50%'});
})

How do I apply this method to all future matching elements as well ?

Are you going to be adding more elements with the `centeredByJquery` class? — tymeJV, May 09 '13 at 18:24
You can't set the style property of an element that does'nt exist yet, it's simply something that can't be delegated to a parent, and you would have to insert a style tag into the head instead, or figure out a way to do the same thing with regular CSS. — adeneo, May 09 '13 at 18:24
Simply add the class `centeredByJquery` when you add new elements. — Santosh, May 09 '13 at 18:24
From what I understand is he wants to use this as a basis for changing other elements in his site. Which he would probably need to turn this into a variable function that he can call. — Cam, May 09 '13 at 18:25
You can modify `document.styleSheets` to change style definitions dynamically. jQuery doesn't have an interface to this, just use plain Javascript. — Barmar, May 09 '13 at 18:26
please note I m forced to specify css rule using javascript as I need to set dynamically calculated values to `margin-*` — Rajat Gupta, May 09 '13 at 18:26
You need to run said code in the ajax success either directly, or by calling a function that does it. There is no automagical way to run code when x element is available that works in all browsers. — Kevin B, May 09 '13 at 18:26
@KevinB: ohk.. I was expecting that somthing like `on()` or `live()` that do apply to future matching elements.. — Rajat Gupta, May 09 '13 at 18:28
I think the answers here may help: http://stackoverflow.com/questions/1079237/jquery-equivalent-of-yui-stylesheet-utility — Barmar, May 09 '13 at 18:28
.on and .live require an event, your code above doesn't happen on an event. — Kevin B, May 09 '13 at 18:28
I wrote a micro-framework once that injects into native DOM manipulation elements, but I never tested browser compatibility. Maybe you can expand upon it, should it be necessary... It's purpose was to react to new elements within the site that have not been added through AJAX yet you do not have control of how and when they are added, like through other plugins. You can find it [here](http://jsfiddle.net/Derija93/Z8cDj/). Maybe it helps. — Kiruse, May 09 '13 at 18:33
The answer is *"When you update the DOM, you call the method that runs this code!"* — epascarello, May 09 '13 at 18:38

neiker · Answer 1 · 2013-05-09T18:57:28.147

You can't.. The only way to do that is using an interval:

setInterval(function(){
    $('.centeredByJquery').each(function(){
        $(this).css({'margin-left': -parseInt($(this).css('width'))/2,
                    'left':'50%',
                    'margin-top': -parseInt($(this).css('height'))/2,
                    'top':'50%'});
    })
},1000);

But it is a terrible idea..

If you know WHEN a new element is inserted, you can just call a function to center that element.

How to apply this method to all future matching elements as well?

1 Answers1