pleasantBailey
commented
9 years ago Nevermind, I figured it out!
I changed a href="javascript:toggle_visibility('1a');" to a href="javascript:toggle_visibility('1a');s.refresh();"
Funny how trying to find the answer myself for 2 hours only comes to a head after I give up and ask for help, and then find the answer 15 minutes later.
In my layout, I have most of the content set to display:none when the page loads, except for some introductory information and elements.
Then, a user is given a prompt, such as "Does A or B apply to you?", and then if the user selects A, a javascript sets contentA, backgroundA, and illustrationA to display:block. There are four such prompts on the page.
The problem is that I have skrollr values set for illustrationA, and they never trigger. As a test, I used visibility: hidden instead on illustrationA, and skrollr can then act on it. But, first of all, this interferes with my layout and creates unwanted empty space on the page. Secondly, when contentA is re-displayed, it pushes illustrationA further down the page, and skrollr does not recalculate whether its in the viewport any longer. For the first block, it's easy enough to just offset the skrollr values, but as more and more content becomes active, it's becomes difficult to predict how far away from its initial position an illustration becomes. This is doubly difficult with a responsive design.
What I am hoping is that there is some way to force skrollr to reinitialize when content is moved, or when changing the display property.
Disclaimer: I am a graphic designer first, and a coder out of necessity, so I may have made some false assumptions or missed a simpler solution.