2

Working on a pie menu using wheelnav.js. Everything is going well thus far, but for the life of me I do not seem to find anywhere in the wheelnav.js documentation on how to suppress the bouncing effect when you make a menu choice.

For an example of this effect, please look at http://pmg.softwaretailoring.net/ , turn on the 'rotate' switch and click a number in the pie menu. The selected choice rotates around to the focus point (default top) and bounces to a stop.

The original examples from http://wheelnavjs.softwaretailoring.net/examples.html I thought would be helpful as the first example on that page has a pie menu that does not bounce, but they've obfuscated and minified the underlying examples javascript file.

Any hints or tips on where to look for more extensive documentation or detailed examples would be greatly appreciated.

UPDATE: found a reference to a wheel object in their website code that uses the animatetime property. Setting that to a low number, like 200, causes the wheel to spin faster but not bounce. Not a perfect solution, as I might want the spinning to be slower, but will suffice until I learn of a better method.

3 Answers 3

3

Try using something like this:

wheel = new wheelnav('wheelDiv');
wheel.animatetime = 1000;
wheel.animateeffect = 'linear';

I believe the linear setting is the specific property you are looking for.

This can be found on this page of the documentation

3
  • Huh. Completely missed that. Thanks a lot! Would be nice to see a more traditional in-depth documentation on all the properties. For example, what other effects are available for .animateeffect. I guess I could dive into the source code for that, but it would be time consuming. Thanks again! Apr 13, 2016 at 12:03
  • 1
    Yeah, I know what you mean. Whilst it might be dry, documentation like that helps a lot. Anyway easy to miss and I had no idea about this library before, very cool so thanks for surfacing it to me.
    – Matt
    Apr 13, 2016 at 12:07
  • 1
    Glad to help. I guess staring at the limited docs for so long had me blurring everything together. Another annoying thing I noticed about the wheelnav.js docs in this case, is that you have to try out each little button to see the corresponding effects. That's ok for the 'push everything to see what happens crowd', but not for a developer that just wants a straight answer. Apr 13, 2016 at 12:31
1

I have used wheelnav.js and also contact his auther for my problems, and he has given proper answer to me about my problem but you can not find proper documentation for this jquery, you can also ask him (mail him) for your problem if needed

you can use below code indexWheel.animatetime = 2000; // by this you can set faster/slower speed strong text


        window.onload = function () {
            var values = ['1','2','3','4'];
            var percent = [51,11,30,8];            
            var tool = ["1234 (40.10%) \n Companies (9)","1234 (40.10%) \n Companies (9)","1234 (40.10%) \n Companies (9)","1234 (40.10%) \n Companies (9)"];           

        var indexWheel = new wheelnav("indexDiv");
        indexWheel.animatetime = 2000;
            indexWheel.navItemsContinuous = true;
            indexWheel.navAngle = 0;            
            indexWheel.wheelRadius = indexWheel.wheelRadius * 0.9;
            indexWheel.slicePathFunction = slicePath().PieSlice;
            indexWheel.sliceSelectedTransformFunction = sliceTransform().MoveMiddleTransform;
            indexWheel.colors = colorpalette.goldenyellow;
            indexWheel.initWheel(values);
            indexWheel.createWheel(values);
            indexWheel.setTooltips(tool);
        };
    
3
  • Sorry but Yoda beat you by a good 25 minutes at least (see answer above). Plus, I already discovered the .animatetime property, and it was not really the proper solution in this case. But it is good information to know that the author is very responsive to questions via email. Thanks for that! :-) Apr 13, 2016 at 12:34
  • Not sure about the author's responsiveness. I've written to him asking about what code examples are available for creating pie-menu submenus, but it's been three days. :( Apr 21, 2016 at 6:08
  • Author is Gábor Berkesi, : I had sent mail to gabor.berkesi@softwaretailoring.net Apr 21, 2016 at 6:10
1

Additional info for animateeffect.

There is a link for available effects on this page. Press 'animate' button and click on 'easing type' link.

P.S. I know the lack of in-depth documentation which should contain reference for all properties. It's on my todo list, but this is a side project, pls be patient. ;) Thanks for your feedbacks!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.