Canvas Support

Javascript Plugin Conflict

4 replies·opened Jun 8, 2016
N
nickwildJun 8, 2016

Hi,

I want to use DrawFill SVG javascript plugin (https://github.com/callmenick/Draw-Fill-SVG) to animate an svg logo whilst pages load. This animation works works fine outside of canvas but I get an error using in canvas. I have included the modernizr dependency, but this still throws an error -

TypeError: Modernizr.prefixed is not a function. (In 'Modernizr.prefixed("transition")', 'Modernizr.prefixed' is undefined)

Do you have any thoughts please. My website is spaces2020.com.

Thanks

Nick

S
SemiColonWebSTAFFJun 9, 2016

Hello,

Firstly, we see a Serious Issue with your Code. Please find the following code in the Page: 

data-loader-html="<svg xmlns="http://www.w3.org/2000/svg" id="svg" class="svg" viewBox="0 0 960 480" preserveAspectRatio="xMinYMin meet">
       
    <path fill="#173C53"stroke="#173C53" stroke-width="2" stroke-miterlimit="10" d="M294.3,204.5c0,20.6-14.6,45.9-32.5,56.2l-58.9,34c-17.9,10.3-47.1,10.3-64.9,0l-58.9-34
        c-17.9-10.3-32.5-35.6-32.5-56.2v-68c0-20.6,14.6-45.9,32.5-56.2l58.9-34c17.9-10.3,47.1-10.3,64.9,0l58.9,34
        c17.9,10.3,32.5,35.6,32.5,56.2V204.5z M285.3,57.1l-74-42.7c-22.4-13-59.2-13-81.6,0l-74,42.7c-22.4,13-40.8,44.8-40.8,70.7v85.5
        c0,25.9,18.4,57.7,40.8,70.7l74,42.7c22.4,13,59.2,13,81.6,0l74-42.7c22.4-13,40.8-44.8,40.8-70.7v-85.5
        C326.1,101.8,307.8,70,285.3,57.1"/>
    <path fill="#173C53"stroke="#173C53" stroke-width="2" stroke-miterlimit="10" d="M152.5,205.6c-4.4,0-8.8-1.7-12.1-5c-12.8-12.8-19.9-29.8-19.9-48c0-18.1,7.1-35.1,19.9-48
        c12.8-12.8,29.8-19.9,48-19.9s35.1,7,48,19.9c6.7,6.7,6.7,17.6,0,24.3c-6.7,6.7-17.6,6.7-24.3,0c-6.3-6.3-14.7-9.8-23.7-9.8
        c-8.9,0-17.4,3.5-23.7,9.8c-6.3,6.3-9.8,14.7-9.8,23.7c0,8.9,3.5,17.4,9.8,23.7c6.7,6.7,6.7,17.6,0,24.3
        C161.3,204,156.9,205.6,152.5,205.6"/>
    <path fill="#173C53"stroke="#173C53" stroke-width="2" stroke-miterlimit="10" d="M200.7,236.2c12.8-12.8,19.9-29.8,19.9-48s-7.1-35.1-19.9-48c-1.3-1.3-2.9-2.3-4.5-3.1
        c-5.6-2.8-12.4-2.4-17.6,1.4c-0.8,0.5-1.5,1.1-2.2,1.8c-0.9,0.9-1.7,1.9-2.3,3c-2.6,4.1-3.2,9-2.1,13.5c0.7,2.9,2.2,5.6,4.4,7.8
        c1.8,1.8,3.4,3.9,4.8,6c3.3,5.2,5,11.3,5,17.6c0,8.9-3.5,17.4-9.8,23.7c-6.3,6.3-14.7,9.8-23.7,9.8s-17.4-3.5-23.7-9.8
        c-6.7-6.7-17.6-6.7-24.3,0c-1.7,1.7-2.9,3.6-3.7,5.6c0,0,0,0,0,0.1c-2.2,5.4-1.5,11.6,2,16.4c0.5,0.7,1.1,1.5,1.8,2.2
        c2.3,2.3,4.7,4.3,7.2,6.2c5.9,4.4,12.3,7.9,19.2,10.2c6.9,2.3,14.1,3.5,21.5,3.5c7.3,0,14.3-1.2,21.1-3.4
        c5.4-1.8,10.5-4.2,15.3-7.3C193.2,242.8,197.1,239.7,200.7,236.2"/>
</svg>"

and replace it with: 

data-loader-html='<svg xmlns="http://www.w3.org/2000/svg" id="svg" class="svg" viewBox="0 0 960 480" preserveAspectRatio="xMinYMin meet">
       
    <path fill="#173C53"stroke="#173C53" stroke-width="2" stroke-miterlimit="10" d="M294.3,204.5c0,20.6-14.6,45.9-32.5,56.2l-58.9,34c-17.9,10.3-47.1,10.3-64.9,0l-58.9-34
        c-17.9-10.3-32.5-35.6-32.5-56.2v-68c0-20.6,14.6-45.9,32.5-56.2l58.9-34c17.9-10.3,47.1-10.3,64.9,0l58.9,34
        c17.9,10.3,32.5,35.6,32.5,56.2V204.5z M285.3,57.1l-74-42.7c-22.4-13-59.2-13-81.6,0l-74,42.7c-22.4,13-40.8,44.8-40.8,70.7v85.5
        c0,25.9,18.4,57.7,40.8,70.7l74,42.7c22.4,13,59.2,13,81.6,0l74-42.7c22.4-13,40.8-44.8,40.8-70.7v-85.5
        C326.1,101.8,307.8,70,285.3,57.1"/>
    <path fill="#173C53"stroke="#173C53" stroke-width="2" stroke-miterlimit="10" d="M152.5,205.6c-4.4,0-8.8-1.7-12.1-5c-12.8-12.8-19.9-29.8-19.9-48c0-18.1,7.1-35.1,19.9-48
        c12.8-12.8,29.8-19.9,48-19.9s35.1,7,48,19.9c6.7,6.7,6.7,17.6,0,24.3c-6.7,6.7-17.6,6.7-24.3,0c-6.3-6.3-14.7-9.8-23.7-9.8
        c-8.9,0-17.4,3.5-23.7,9.8c-6.3,6.3-9.8,14.7-9.8,23.7c0,8.9,3.5,17.4,9.8,23.7c6.7,6.7,6.7,17.6,0,24.3
        C161.3,204,156.9,205.6,152.5,205.6"/>
    <path fill="#173C53"stroke="#173C53" stroke-width="2" stroke-miterlimit="10" d="M200.7,236.2c12.8-12.8,19.9-29.8,19.9-48s-7.1-35.1-19.9-48c-1.3-1.3-2.9-2.3-4.5-3.1
        c-5.6-2.8-12.4-2.4-17.6,1.4c-0.8,0.5-1.5,1.1-2.2,1.8c-0.9,0.9-1.7,1.9-2.3,3c-2.6,4.1-3.2,9-2.1,13.5c0.7,2.9,2.2,5.6,4.4,7.8
        c1.8,1.8,3.4,3.9,4.8,6c3.3,5.2,5,11.3,5,17.6c0,8.9-3.5,17.4-9.8,23.7c-6.3,6.3-14.7,9.8-23.7,9.8s-17.4-3.5-23.7-9.8
        c-6.7-6.7-17.6-6.7-24.3,0c-1.7,1.7-2.9,3.6-3.7,5.6c0,0,0,0,0,0.1c-2.2,5.4-1.5,11.6,2,16.4c0.5,0.7,1.1,1.5,1.8,2.2
        c2.3,2.3,4.7,4.3,7.2,6.2c5.9,4.4,12.3,7.9,19.2,10.2c6.9,2.3,14.1,3.5,21.5,3.5c7.3,0,14.3-1.2,21.1-3.4
        c5.4-1.8,10.5-4.2,15.3-7.3C193.2,242.8,197.1,239.7,200.7,236.2"/>
</svg>'

Secondly, do make sure that you add the modernizr JS Linking and any other Javascript Plugin Linking at the bottom of the Page just before the js/functions.js JS File Linking.

This should automatically fix your issue. Let us know if we can help you with anything else or if you find any further issues.

N
nickwildJun 13, 2016

Hi,

Many thanks for your advice. It now shows the logo during, without the errors but it just shows the SVG file and does not perform the drawfillsvgfunction (I have included the demo at spaces2020.com/test that works).

Do you have any further advice?

Many thanks

Nick

S
SemiColonWebSTAFFJun 15, 2016

Hello,

We have checked out your Website and the issue was that you are Calling the DrawFillSVG Function before it is initialized in the Footer. Additionally, the Initialization JS Code for the DrawFillSVG Function should be placed inside the jQuery Document Ready Function. We have created a Sample Template for your use which is working fine for us: https://www.dropbox.com/s/bzy1v6ei8pwz3zu/draw-svg-example.html?dl=1 .

This should definitely work fine. Let us know if we can help you with anything else or if you find any further issues.

N
nickwildJun 15, 2016

This great thanks. Excellent customer service!

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard