Center Title on Wheelnav.js Circle

I am currently utilizing Wheelnav js and attempting to align each title within the circle’s red region. However, I seem to be overlooking something crucial in the process. Can someone please help me identify what I may be missing? Additionally, I am looking to enable mouse scrolling for item navigation, but it doesn’t seem to work at the moment (although clicking on the menu items is functional).

Thank you.

var wheel = new wheelnav("wheelDiv");
wheel.wheelRadius = wheel.wheelRadius * 2;//2
wheel.navItemsContinuous = true;
wheel.sliceAngle = 8;
wheel.colors = colorpalette.gamebookers;
wheel.slicePathFunction = slicePath().NullSlice;

var anchorAttr = "middle";
wheel.titleFont1 = "200 24px Impact, Charcoal, sans-serif";
wheel.titleFont2 = "200 34px Impact, Charcoal, sans-serif";
wheel.titleAttr = {fill: "#bbb", textAlign: "left", font: wheel.titleFont1,"text-anchor":anchorAttr};
wheel.titleHoverAttr = {font: wheel.titleFont1, cursor: 'pointer',"text-anchor":anchorAttr};
wheel.titleSelectedAttr = { fill: "#000", textAlign: "left", font: wheel.titleFont2,"text-anchor":anchorAttr};

wheel.animatetime = 500;
wheel.animateeffect = 'linear';

wheel.createWheel(["Menu Item -1","Menu - 2","Active Menu Item","Menu - 4","Menu Item - 5","Menu - 6","Active Menu Item","Menu - 8"]);

https://i.sstatic.net/2qA6G.jpg

javascriptjqueryhtmlcsswheelnav.js

Answer №1

After running the initWheel function, you have the ability to adjust the properties of each navItem individually. Title positioning can be customized using slicePathCustomization.

wheel.initWheel(["Menu Item -1", "Menu - 2", "Active Menu Item", "Menu - 4", "Menu Item - 5", "Menu - 6", "Active Menu Item", "Menu - 8"]);

//Initial
wheel.sliceInitPathFunction = slicePath().NullSlice;
wheel.navItems[0].sliceInitPathCustom = new slicePathCustomization();
wheel.navItems[0].sliceInitPathCustom.titleRadiusPercent = 0.1;
//Default
wheel.slicePathFunction = slicePath().NullSlice;
wheel.navItems[0].slicePathCustom = new slicePathCustomization();
wheel.navItems[0].slicePathCustom.titleRadiusPercent = 0.2;
//Hover
wheel.sliceHoverPathFunction = slicePath().NullSlice;
wheel.navItems[0].sliceHoverPathCustom = new slicePathCustomization();
wheel.navItems[0].sliceHoverPathCustom.titleRadiusPercent = 0.3;
//Selected
wheel.sliceSelectedPathFunction = slicePath().NullSlice;
wheel.navItems[0].sliceSelectedPathCustom = new slicePathCustomization();
wheel.navItems[0].sliceSelectedPathCustom.titleRadiusPercent = 0.4;

wheel.createWheel();

To learn more about customization options, visit this resource.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Selecting meteor.js user logout functionality

Is there a reliable method for detecting when a user logs out of the website? I have some maintenance tasks that need to be handled upon logout. The website is built using meteor.js user accounts. I will also be implementing validation features, so it&apo ...

javascriptmeteor

Is it possible to launch a browser window using javascript?

I need to open a new Internet Explorer browser window and I am currently using the following code: window.open("http://jsc.simfatic-solutions.com", "mywindow"); However, I would like to know how can I open a new IE window with a fresh session? ...

javascriptjquerybrowser

The struggle of media queries: How can you reset an element to its original display style when it's set to none?

If faced with the following scenario, how would you handle it? Imagine this: You need to hide a visible element when a specific media query is met: .myElement { display: block; } and the media query to hide it: @media (min-width: 1000px) { .myElement ...

htmlcssmedia-queries

Chrome encounters gaps when images within table cells are not responsive in scaling

I'm currently working on optimizing my company's email layout for better mobile responsiveness. Unfortunately, due to the constraints of email designing, I find myself resorting to old-school techniques like using tables and image slices. My cur ...

htmlcssemailresponsive-design

Issue with calling on-click function from a directive's template not being triggered

I am new to Angular and I'm experiencing an issue with my ng-click not working in certain contexts. Let me share my code and explain the problem more clearly. HTML : <div ng-app='myApp'> <section id="map-orders" ng-controller= ...

javascriptangularjsangularjs-ng-click

The error message "Uncaught TypeError: Object #<a Document> has no method 'write'" appears

Encountered an error when trying to integrate the Google Visualization API into a page on Google App Engine while using Chrome's developer tools console: Uncaught TypeError: Object # has no method 'write' In Firefox 3.5, the error displayed ...

javascriptgoogle-visualization

How to Embed HTML Code in Email Using ASP.NET C#

I have encountered a puzzling issue... I created a form for sending emails, and it worked perfectly. However, when I extended a text box with an AJAX Control Toolkit HTML extension, the code I send in the email does not display properly. Let me give you an ...

c#htmlasp.netemail

There seems to be an issue with Vue JS slots[name$1].every function as it is

I attempted to implement a custom isEmpty function for the Object prototype as follows: Object.prototype.isEmpty = function() { for (var key in this) { if (this.hasOwnProperty(key)) { return false } } return true } However, when tryin ...

javascriptvue.js

Designing CSS outlines to create shapes

I want to design a unique navigation for my website without using images, so I thought using shapes would be a cool idea. Specifically, I am trying to create a crescent moon shape with a border. My goal is to have a border around the red part of the cres ...

htmlcsscss-shapes

Ensuring file integrity during upload in Rails

Looking to adjust the dimensions and file size of an image using pixels? Check out this code snippet: <div class="control-group row"> <%= f.fields_for :activity_documents, @activity.activity_documents do |builder| %> & ...

ruby-on-railsrubyhtmlfilecoffeescript

Expanding the Element prototype with TypeScript

Is there a corresponding TypeScript code to achieve the same functionality as the provided JavaScript snippet below? I am looking to extend the prototype of the HTML DOM element, but I'm struggling to write TypeScript code that accomplishes this with ...

javascripthtmlnode.jstypescriptprototype

Is there a way to create a fading effect for background images using jQuery?

Is there a way to animate the background-image of an element with fadein and fadeout effects on hover? ...

javascriptjquery

Place the div at the center within the header

I'm struggling to center the logo in my media query for screens below 479px. Whenever I use margin auto, the image gets pushed to the right by the browser. Here is what I have so far and any assistance would be greatly appreciated. HTML <div clas ...

csshtml

Is there a way to detect hovering over SVG elements and trigger transitions on a different SVG element at the same time?

I'm exploring hover animations for specific elements within an SVG using CSS. I have a complex SVG with multiple parts and I want to trigger hover effects on the parent SVG element so that only certain elements inside it animate upon hovering. While I ...

csssvghovercss-animations

What is the best way to incorporate inline CSS using jQuery data attributes along with CSS3 prefixes?

This method works well for setting the background size using inline css like so: style="background-size:cover" $(".tp-sliderSection .item").css('background-size', function(){ $(this).css('background-size',$(this).data("bg-size")); } ...

javascriptjqueryhtmlcss

Tips for concealing a component in the DOM using ng-if in angular.js and angularmaterial:

Currently, I'm utilizing angular.js 1.5 along with angular material on the frontend to populate the DOM with objects retrieved from the Database. Within one of the repeaters, I am facing an issue where I need to determine if an object is already prese ...

javascriptarraysangularjsangular-material

What is the most effective method to make a div span the entire width of the page?

My webpage has a header at the top and here is the HTML code: <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <css link here> </head> <body onload="prettyPrin ...

htmlcss

What is the best way to delete a class that begins with a certain string?

Is it possible to remove a class that begins with "num" using jquery? I attempted to utilize ^= but found it ineffective. Thank you in advance. <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div c ...

jquery

Dealing with WCF Jquery Ajax cross domain issues: "Error Message: Method Not Allowed"

I've been attempting to interact with a WCF service through Jquery from Localhost to a server, but I keep encountering a "405 Method Not Allowed" error. Below is the configuration setup I am using: <system.serviceModel> <bindings> < ...

jquerywcfcross-domain

PapaParse is not properly recognizing the date format

Having trouble creating a chart using JSON data from papaparse, resulting in the following error: c3.js:2100 Failed to parse x '10-18-2018' to Date object I've tried adjusting the date format in the CSV file but haven't had any luck. I ...

javascriptnode.jsc3.jspapaparse