conflict in Divi theme with SVG Logo animation
-
Hi
i would like to use an animated SVG logo as I have it right here on this site: https://litradio.net.
I installed a plugin to enable svg upload. So far all good. But if I’m putting the same js-code in Theme Options > Integrations > <head> no animation is working (here: http://2018.litradio.net).
Console gives me this error:
Uncaught TypeError: Cannot read property 'substr' of undefined at Image.onLoad
So it looks as if there is a conflict between your plugin and Divi, right? Could you inspect this?The page I need help with: [log in to see the link]
-
Ok, I had a look and tested it on a fresh install of WordPress with Divi and my plugin.
In my plugin settings, I chose the “Enable Advanced Mode”, then saved to open advanced settings, then enabled the “Force Inline SVG?” option because Divi doesn’t give you the option to add a class to your logo image. This makes sure the SVG is rendered inline and internal elements can be targeted.
Then you just need to make sure your JS targets the thing.
I switched your line:
svg = document.querySelector( "#svg-replaced-1" ),
with
svg = document.querySelector( ".logo_container svg" ),I added your JS to the integrations tab in Divi, in the
<head>, making sure to wrap the whole lot with<script></script>tags.Here is the final JS you can simply paste in that section:
<script> window.onload = function() { /* HELPERS */ function checkMobileDevice() { return navigator.userAgent.match(/iPad|iPhone|iPod|Android|webOS|BlackBerry/i) != null || screen.width <= 480; } function getWidth() { if (self.innerWidth) { return self.innerWidth; } if (document.documentElement && document.documentElement.clientWidth) { return document.documentElement.clientWidth; } if (document.body) { return document.body.clientWidth; } } function getHeight() { if (self.innerHeight) { return self.innerHeight; } if (document.documentElement && document.documentElement.clientHeight) { return document.documentElement.clientHeight; } if (document.body) { return document.body.clientHeight; } } function getDistance(x1, y1, x2, y2) { var a = x1 - x2, b = y1 - y2, c = Math.sqrt( a*a + b*b ); return c } function mapToRange(value, in_min, in_max, out_min, out_max) { return (value - in_min) * (out_max - out_min) / (in_max - in_min) + out_min; } function prepareOffset(offset, margin) { offset = mapToRange(offset, 0, 1, -margin, 1 + margin) if (offset < 0) offset = 0 if (offset > 1) offset = 1 return offset } function calcScrollFactor(event) { var scrollHeight = document.documentElement.scrollHeight, clientHeight = getHeight(), scrollY = window.pageYOffset; return scrollY / (scrollHeight - clientHeight); } /* PATH */ function DrawablePath(path) { var length = path.getTotalLength() path.style.strokeDasharray = length + ' ' + length; return { draw: function(factor) { path.style.strokeDashoffset = length * factor; } } } /* EVENTS */ function onMouseMove(event) { var width = getWidth(), height = getHeight(), offset; offset = getDistance(event.clientX, event.clientY, 0, 0) / getDistance(0, 0, width, height); offset = prepareOffset(offset, margin); lit.draw(offset); } function onScroll(event) { var scrollFactor = calcScrollFactor(event); lit.draw(scrollFactor * 2); } /* MAIN */ var isMobileDevice = checkMobileDevice(), margin = 0.05 svg = document.querySelector( ".logo_container svg" ), lit = null; if (svg) { lit = new DrawablePath( svg.querySelector("#lit") ); if (isMobileDevice) { document.addEventListener("scroll", onScroll, false); document.addEventListener("touchmove", onScroll, false); } else { document.addEventListener("mousemove", onMouseMove, false); } } } </script>So yeah, no conflict, just need to know what to do 🙂
- The topic ‘conflict in Divi theme with SVG Logo animation’ is closed to new replies.
