Background:
I am using the skrollr plugin as part of a Rails project using Slim for markup. The plugin requires data attributes for the 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 topcss from data-0(scroll position 0px) to data-1180(scroll position 1180px).
Question:
Several elements on the page that need to be animated are located below containers with different heights. Therefore, it data-xxxxmay differ depending on the contents in previous containers. I have a javascript function that determines the height of all previous elements and returns a variable of what should be data-xxxx. Theoretically, what the result should look like in Slim:
#logo.unit data-#{ "<script>logoPosition</script>" }="top:5px" data-#{ "<script>logoPosition + 200</script>" }="top:-8px;"
Subtle mistakes. No matter how I try to add a built-in javascript attribute, these are errors. My current solution is all javascript (which completely replaced the attribute). However, I would like to know the correct way to create inline javascript attributes.
Possible?