CODEWITHSUNDEEP
jquerycustom-data-attributeskrollr
clavid
clavid

Reputation: 289

Changing body data attribute with jQuery

I'm using skrollr and want to make the entire body of my page change colors/gradients. I can do this with my current code which is:

<body data-start="background-image:linear-gradient(rgb(4,21,41), rgb(31,16,66));" data-end="background-image:linear-gradient(rgb(31,16,66), rgb(66,16,52));">

However, upon loading of an iFrame (which is triggered by a form submit), I want to change the gradient for the body. I thought changing the data-start values might do the trick so I tried:

<iframe onload="if(submitted)
{$('body').attr('data-start','background-image:linear-gradient(rgb(4,21,41), rgb(31,16,66))'}">

But that hasn't worked. I've tried other jQuery functions that do work when the iFrame loads (e.g. $('#idName').hide()). But the .attr() function doesn't seem to work and I'm thinking something with skrollr is interfering. I've also tried the .data() function but that doesn't seem to change data values either.

Does anyone know how I might change the body gradient after a certain trigger (e.g. submitting a form)?

Upvotes: 0

Views: 826

Answers (1)

James Montagne
James Montagne

Reputation: 78770

From the documentation it seems that refresh should do:

Useful when: ... Data-attributes are manipulated dynamically.

var skroll = skrollr.init(/*...*/);

// when needed
skroll.refresh();

Upvotes: 0

Related Questions