Contemplator

How to activate Javascript in plugin SVG-Radial-Menu

Recommended Posts

Hi there,

i would like to use this wonderful plugin : https://www.jqueryscript.net/menu/SVG-Radial-Menu-TweenMax.html

 

I have added everything to my site, according to guide,  but interactions do not work, so javascript somehow isn't included. I believe i added scripts & links right. I m sending some screeshots.. and codepen so that u see. (Javascript works in Codepen so i m confused what is wrong)

 

Scripts at lines: 31 , 37, 38 , 39, 40

 

Also, if i want to style for example colors / backgrounds of buttons, where can i change it, i can't see that in CSS.

 

Could some1 help me please why wouldn't it work for me  ?

SVG-radial.PNG

Share this post


Link to post
Share on other sites

Hi ad welcome to the GreenSock forums.

 

We did't write that tutorial so its kind of tough to troubleshoot it. Might be good to reach out to the author for the best support.

 

Also its very difficult to troubleshoot a complex javascript demo by looking at a screenshot of your dev environment. However, one thing that should be fixed is that you are loading 2 different versions of TweenMax: 2.0.2 and 1.20.3, you probably just want 2.0.2

 

Since the CodePen is working, something you can do is export a zip and inspect it locally. Try to match your dev version with what you have in the CodePen.

In CodePen there is an "export" button in the lower right.

 

 

 

 

 

 

  • Like 2

Share this post


Link to post
Share on other sites
49 minutes ago, Carl said:

 

I

49 minutes ago, Carl said:

Is it possible  that i will throw .zip / .rar  or link to github ?  like whole page... i cannot manage to find out what's wrong, i have tried to match codepen with my dev. I really do not know what is wrong. I was looking 5 hours at it...

 

 

 

 

 

 

 

 

 

 

 

 

 

Share this post


Link to post
Share on other sites

if you want to upload  zip of just the bare-essentials to replicate the issue that is fine.

We don't need something with bootstrap or dozens of dependencies. Try to make it as simple as possible.

 

One more thing I noticed from your screenshot is that it is not clear that you are loading script.js from the proper location, but I would think that the browser would have shown an error in the console.

 

the screenshot below shows the script I am talking about and the path it looks like it should be coming from

 

error.png

  • Like 2

Share this post


Link to post
Share on other sites
22 hours ago, Carl said:

 

I

Quote

Ok, i have figured it out, though it was not what you pointed out, i'm glad for response.

 

One question remains:

 

 If i want to style for example colors / backgrounds of buttons, where can i change it, i can't see that in CSS.  I mean i want to insert Font-Awesome icons within links like this:  


<a href="https://www.facebook.com/name" target="blank" class="social-icon"><i class="fab fa-facebook-f fa-2x"></i></a>

 

If i put it into <g></g> tag  or so everything dissapears.  Could you give me some guide (i am quite low with svg's ) Is it even possible to insert it since there are linked these icons: <link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> ?

 

 

 

 

 

 

 

 

 

Share this post


Link to post
Share on other sites

Sorry, we have to keep our supported focused on the GSAP API. We just don't have the resources to provide effective assistance with general web development issues. Being that your menu is an SVG it might not be totally straightforward to embed custom fonts and icons. 

 

Since the menu is already made of SVG, it might be better to find a solution that uses SVG artwork as opposed to font.

  • Like 1

Share this post


Link to post
Share on other sites
3 hours ago, Carl said:

Since the menu is already made of SVG, it might be better to find a solution that uses SVG artwork as opposed to font.

 

I'd definitely echo @Carl's advice about that. Bringing font-awesome icons into the project seems likely to over complicate things. Most of those icons are fairly simple. Just a few lines, polylines and circles will take care of most of them. You may want to take a look at this:

 

https://webdesign.tutsplus.com/tutorials/how-to-hand-code-svg--cms-30368

 

Happy tweening.

:)

   

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.