Chrome 20.x issue (bug?) With classes applied / removed at intervals via jQuery

Question

This is fun for those of you who love to bang your head on a computer keyboard.

Website: http://blduke.com.php53-27.dfw1-2.websitetestlink.com

An interesting jQuery thing going right under the navigation here. This is actually a radial menu ( plugin ). The plugin includes functions that will start clockwise and counterclockwise rotation, and by default the radial menu is not displayed. Therefore, I have a code to initialize the radial menu, a code to display it immediately, and a code to start the next rotation at intervals. Finally, I used the plugin API to connect to the afterAnimation option to make sure that the “active” class is applied to the “active” menu item. I am going to use it to make some interesting CSS material, rotate some to the right of this graphic, etc. You can see that the “active” class in the list items is adding a red background right now.

This works absolutely fine in IE8 +, Firefox, Safari, and Chrome version 17.0-19.0. In Chrome 20.x, it crashes in a weird way.

The active class still jumps to the corresponding list item, if necessary, but the browser does something strange, for example, deferring the rendering of the active class to a new item or completely skips it at some points or points it to two items (the last item, and following)

There are no script errors, and I'm puzzled, like the dev plugin. Anyone have any ideas, insight?

My code is:

jQuery(document).ready(function($) { $("#radial_container").radmenu({ listClass: 'list', // the list class to look within for items itemClass: 'item', // the items - NOTE: the HTML inside the item is copied into the menu item radius: 130, // radius in pixels animSpeed:400, // animation speed in millis centerX: 0, // the center x axis offset centerY: 0, // the center y axis offset angleOffset: 30, // in degrees, afterAnimation: function($m){ // after the animation triggers, grab the "active" menu item (object) to recieve the "active" class $("#radial_container").radmenu(2); } }).radmenu("show"); // Show the menu straight off, we don't need to trigger with a click setInterval(function() { // automatically rotate the menu at intervals $('#radial_container').radmenu('next'); }, 4000); }); 

Answer 1

I changed the code a bit during local testing:

 setInterval(function() { // automatically rotate the menu at intervals $('.radial_div div').removeClass('active'); //add this line $('#radial_container').radmenu('next'); }, 4000); 

Tested on Chrome 20 and FF16a.

This ensures that all divs lose the active class when you call the rotation plugin, and it is correctly added back to the top element when the afterAnimation function is afterAnimation .

---

Then the new problem seems rather difficult to debug, as I cannot make it constantly occur. However, try the following:

 afterAnimation: function($m){ // after the animation triggers, grab the "active" menu item (object) to recieve the "active" class setTimeout(function() { $("#radial_container").radmenu(2); }, 0); } 

This ensures that the radmenu function radmenu called only after the processing of the current stack of functions is completed, I looked at it for a couple of minutes, and this was not an error even once.

Also, if you want to run the top element with the active class already, you can simply add:

 $('.radial_div div:nth-child(3)').addClass('active'); 

Everywhere inside the .ready function.

Answer 2

Why do you need a plugin for this? You are just animating above and to the left of three simple elements. Why not write it by hand. There will be no longer example code that you provided.

 function setPosition(element, position) { var placements = [[100,100], [200, 200], [0, 200]] ; //for instance $(element).stop().animate({left: placements[position][0]+ 'px', top: placements[position][1] + 'px'}); if (position == 0) { $(element).addClass('activeMenuItem');} } var state = 0; function rotateMenu(direction) { state += direction; if (state < 0) state = 2; if (state > 2) state = 0; $('.menuItem').removeClass('activeMenuItem'); setPosition('#item0', state % 3); setPosition('#item1', (state + 1) % 3); setPosition('#item2', (state + 2) % 3); } 

What is it. rotateMenu(1) rotates in one direction, and rotateMenu(-1) rotates it in another direction.

Your menu items will have class = "menuItem" and id = "item".

Here's jsFiddle for a little demo.