[ASK] Apply stylesheet to new element generated by ajax

[resarahman]

Hi there,

Nice plugin...

Btw, is there a way to apply the same stylesheet to generate element by ajax ?

will it work if I calling again skrollr.init() or s.refresh() after new element added by ajax ?

Thanks for your help.

[Prinzhorn]

This is not possible due to the way skrollr-stylesheets works.

But it would certainly be a nice feature. Maybe I come up with a solution in the future.

[dremonkey]

On a similar note, I am trying to make AngularJS and skrollr/skrollr-stylesheets work together, unfortunately because of the way AngularJS injects templates, skrollr-stylesheets parses the document before the element that needs to have the keyframes attached to it exists.

So I played around a bit... exposed the applyKeyframes function and changed the scope of the 'animations' and 'selectors' vars so I could call applyKeyframes without needing to explicitly pass in those variables. This solution seems to have worked for my purposes. See my fork.

Not sure if this will work for AJAX loaded content, but I assume that if the stylesheets have defined the skrollr keyframes for the AJAX elements, then calling applyKeyframes and skrollr.init() should work.

What do you think @Prinzhorn?

[Prinzhorn]

I guess it should work and it looks like a simple solution.

Thinking about it, I probably want to change the way skrollr-stylesheets works in the future. I'm not sure how, but it should just work™ when using skrollr. When calling init or refresh (which init calls eventually) the stylesheets should be applied automatically.

[JulianJorgensen]

Yeah super nice work guys! I'll look at @dremonkey solution now. Have been trying to modify the script myself to support more responsive sites (as opposed to only rendering skrollr on beginning of load).

Any other pointers or suggestions on this would be super appreciated.

Thanks again!

It just works™

[JulianJorgensen]

Actually, I just added following right after the "kickstart()" function call (on around line 193):

window.skrollrStylesheets = { refresh: function() { kickstart(document.querySelectorAll('link, style')); } };

this allows me to run following at any point after initial load: skrollrStylesheets.refresh(); s.refresh();

Hope that helps someone, was very helpful to me in making a more smooth responsive transition without page reload.

[matiaspunx]

i try to use the @JulianJorgensen's solution but the script generate animations on document resize.

Theres is another solution to make this responsive?

Ty

[KevinOrfas]

Hi there, @dremonkey your link "see my fork" doesn't work. Have you removed that? I am after to implement something similar and I d like to review your code. Thank you.

[dremonkey]

@KevinOrfas I did some cleanup awhile back and removed it... sorry about that. However, I did have a copy on my computer so I setup the fork again and fixed the link. I have linked it again here for your convenience.

But to be honest I am not sure how much help it will be because it is based off the 0.0.4 version of skrollrStylesheets and it looks like the code base has changed a bit since then. Anyway you can take a look... hope it helps.

[KevinOrfas]

Thanks a lot guys, I am about to start looking at that.