Inline Javascript Variable as Part of an Element Attribute in Slim

Question

Background:

I am using the skrollr plugin as part of a Rails project that is using Slim for markup. The plugin requires data attributes for start and end points for scrolling animations. Here is an example:

#canvas-1 data-0="top:-80px;" data-1180="top:0px;"

The plugin will basically animate the top css from data-0 (scroll position 0px) to data-1180 (scroll position 1180px).

Question:

A few elements on the page that need to be animated are positioned below containers with varying heights. So, the data-xxxx can be different depending on the content in the preceding containers. I have a javascript function that figures out the height of all the preceding elements and returns a variable of what the data-xxxx should be. This is theoretically what the output should look like in Slim:

#logo.unit data-#{ "<script>logoPosition</script>" }="top:5px" data-#{ "<script>logoPosition + 200</script>" }="top:-8px;"

Slim errors. No matter how I try to add the inline javascript attribute - it errors. My current solution is all javascript (which replaced the attribute completely). However, I would like to know the proper way of doing inline javascript generated attributes.

Possible?

Answer 1

If I'm understanding you correctly, you can do this with skrollr alone. Read the docs about relative mode https://github.com/Prinzhorn/skrollr#absolute-vs-relative-mode

Like this (you get the idea):

#logo.unit data-top="top:5px" data-200-top="top:-8px;"

Using data-anchor-target="#logo.unit" you could even have the animation of other elements depend on the position of the logo.