Apply selectivizr after DOM modifications

[fcsonline]

Hello,

First of all thanks for this great tool.

So, my question is if it's possible to apply the CSS after DOM modifications?

An example:

The HTML file:

<table>
    <tr><td>Row 1</td></tr>
    <tr><td>Row 2</td></tr><!-- Appears red -->
    <tr><td>Row 3</td></tr>
    <tr><td>Row 4</td></tr><!-- Appears red -->
</table>

The CSS file:

tr:nth-child(even) td { background:red;}

The javascript code:

$("<tr><td>Row 5</td></tr>").appendTo("table tbody")
$("<tr><td>Row 6</td></tr>").appendTo("table tbody") 

In this example the 'Row 6' dont' appears in color red, because the style of new nodes is not applied.

Is there a solution?

Thanks!

[keithclark]

Currently, there is no automatic solution to this but it is something I'm trying to develop but it's not an easy feature to just "bolt on"

You could manually add the selectivizr classes to your new objects before adding them to the DOM. It's not ideal, but it would allow you to move on.

[arronmabrey]

I'm also needing this right now too. I'm fine to add the classes manually in the mean time. Do you have any documentation on what classes to add?

[keithclark]

The best way to find that out would be to use IE developer tools to see which classes were added to the elements your modifiying. They all begin with slvzr-.

[fcsonline]

And what about to bind DOMNodeInserted Javascript event and filter the selectivizr targets and then apply the appropriate CSS attributes?

[keithclark]

Unfortunately, IE6-8 do not support DOMNodeInserted so that's not possible.

[fcsonline]

Ouch! , and try to rescan the new nodes manualy. Something like:

$("<tr><td>Row 5</td></tr>").appendTo("table tbody");
$("<tr><td>Row 6</td></tr>").appendTo("table tbody");

$("table tbody").selectivizr(); 
// At this point, all the new nodes in this context have the appropriate CSS attributes

What do you think?

[Osoascam]

It's actually kind of difficult, as it implies, for example nth-child(3n-2) to keep track of the parent, remove styles to children created and apply the class again just to the ones that match. Not impossible, but requires a bit of thinking

[yatil]

Tracking this issue as this is something that would have been handy at this very moment :-) Not an easy to do thing though…

[lolmaus]

It would be nice to be able to at least re-run Selectivizr on the whole document...

[PikachuEXE]

@lolmaus I think #75 could be what you are looking for...

[lolmaus]

@PikachuEXE, i've just tried it and it does work. Thank you. ^_^