I have successfully applied an animation to my DOM (ID = flexRepeater) statically but I am having trouble doing it conditionally based on the size of the document and window. If the flexRepeater overflows the window, I’d like to enable an animation called ‘marquee’. I already have the CSS keyframes for the animation defined in a stylesheet and tested, so that isn’t the problem. Here’s my code:
<body>
<script>
$(document).ready(function () {
function applyAnimation() {
if ( $(document).width() > $(window).width() ) {
$("#flexRepeater").css("animation", "marquee");
} else {
$("#flexRepeater").css("animation", "");
}
}
$(window).resize(applyAnimation());
applyAnimation();
});
</script>
</body>But I can’t get the function to trigger at all. I never see the animation unless I go back to just applying it to the flex repeater without the if/else condition. Can anyone see why this wouldn’t be working? If it matters, I am running this inside an Ignition 8.1 Perspective project (Ignition is an industrial automation / SCADA software).