New Rubik’s Cube jQuery Plugin

I consider myself an avid speed cuber. Not world class, but fast enough and not too obsessed with it. That being said all the sites I’ve seen in the past with references to algorithms all seem to use really clunky client side Java or Flash plugins to handle the demonstration of moves.  I wanted to create a simple to implement jQuery plugin that utilizes the browser’s built in features to do the same thing.  The result is my jquery.cube.js plugin. As seen below.

The plugin code is available here:


See the Pen jQuery and CSS Implemented Rubik’s Cube by Jason Graves (@godlikemouse) on CodePen.

This plugin utilizes standard cube notation, both modern and old to execute moves. For example, the moves executed above are utilizing the following notation:

x (R’ U R’) D2 (R U’ R’) D2 (R U R’) D2 (R U’ R’) D2 (R U R’) D2 (R U’ R’) D2 R2 x’

This algorithm is being passed to the cube plugin by way of the execute() method.

This plugin currently supports a number of configuration options that can be passed at instantiation time including, cube face colors, animation delay time with more to come shortly.

For more information on this plugin or to view the source please visit:

28 thoughts on “New Rubik’s Cube jQuery Plugin

  1. Achan Lin

    Hi Jason:
    Thanks very much for your plugin. I use it on my website. Also, I think there is a type error in jquery.cube.js, within
    _ref.turn=function(move, rotation){
    case (“f”)
    pos.oz should be 90 instead of -90

    1. godlikemouse Post author

      Hi Achan,

      Are you seeing an error in the console, or is the move incorrect on the screen? Thanks.

          1. godlikemouse Post author

            Hi Achan,

            Sorry, I’m not seeing the issue. When I send an “F” I see the front face turn 90deg clockwise which is correct. Is there something I’m missing? Perhaps file an issue on github with reference to where the code is incorrect because I’m not seeing a problem.

          2. Achan Lin

            Thank you for the update. Could you help me for a question?
            In my html file, I set up the following variable.
            var cube = $(“.cube”).cube({
            animation: {
            delay: 1000 }

            I have two functions using this “cube” variable. And I want they have different delay parameters. The first function, delay 1000 is good, the second one I want to change the animation
            delay to 200, how do I do it ? I wrote
            cube.animation.delay = 200;
            But it does not work.
            Thank you.

          3. godlikemouse Post author

            I think the best way to do this would probably be to add a method for retrieving the living options from the plugin, which can then be modified for real time changes. How does this sound?

          4. Achan Lin

            Yes, probably. But I just start to learn JS,…. If you have time, would you please add that method?
            If not, I’ll just leave it for that for now.
            Anyway, thank you very much for the plugin. I modified it for 4×4 and 5×5 cube, it works great.

        1. godlikemouse Post author

          Hi Achan,

          Try re instantiating the cube plugin with the new value. Let me know if that works for you.

          1. Achan Lin

            Thanks for the answer. But I do not want to re instantiating the cube plugin.
            In my website animation, I use one function to maneuver the cube so the cube present a status which could apply the formula. I want this maneuver faster. Then use another function.
            for example, in the following animation, I want “press me first” execute faster. the one with formula slow.

            Thank you.

    1. godlikemouse Post author

      Hi Niranjana, are you testing this on a native machine or through an emulator? Being that the WebGL context attempts to use the graphics card for acceleration, if you’re not running native you may have problems. I just tested using Firefox which automatically updated to 44.0.2 and it worked just fine. I can add a fallback renderer which would be the canvas renderer however, the performance will be very clunky.

  2. Steve Marsh

    any ideas on why the CSS seems to go nuts when i add an HTML div or a button after the cube div?
    all is OK until clicking on the page causes some of the faces to disappear or shift.
    i wanted to add a UI to execute steps interactively…

    1. godlikemouse Post author

      Hi Steve,

      Hmm, I’m not really sure why that would be happening. If the button is outside the bounds of the cube I don’t see why it would start getting weird CSS wise. Is there perhaps something else on the page that’s interfering with the cube’s CSS? A button alone wouldn’t cause this issue. If you want to post the code on a fiddle, I can have a look at it.

      1. Steve Marsh

        thanks for the very prompt reply!

        not sure how to use your library code on fiddle but the html i am having trouble with is very short and here it is:

        jQuery Rubik’s Cube Plugin Demo

        #taDisp { display:block; width:256px; height:7.2em; margin:24px auto 4px; padding:2px; background-color:#edd; color:red; }

        L R D U

        window.onload = function () {
        var cube = $(“.cube”).cube({
        animation: {delay:333}
        cube.execute(“U D L'”);
        if (cube) document.querySelector(“button”).addEventListener(“click”, function(){ cube.execute(taDisp.value); }, false);

        i do not believe it’s the version of jQuery i am using since it appears much more as browser-related, but maybe???

        the initial execute works and looks great when the onload fires. when i either just click the button or even just click inside the text area that’s when the cube color panels go nuts. they stay that way through further executes until you refresh the page to initial state again.

        thanks for any more inisght you may have.

        1. godlikemouse Post author

          Hi Steve,

          Your codepen seems to work fine in Chrome. What browser are you using by the way?

          Also, there’s a bit easier of away to do the button handling using jQuery, for example:

          $(document).on("click", "button", function(){

          This will save you for having to worry about whether or not the document/window has finished loading, etc.

          1. Steve Marsh

            Thanks for checking this out for me. I already use Chrome as my main browser but use the ‘portable’ version off of a thumbdrive. I thought i was using a fairly recent version but guess i need to get a newer less-buggy version. I got tired of Chrome always updating itself every dang day it seems. I prefer to update my software when i want, not them :-);

            I was tending to Chrome as the culprit but was not sure it wasn’t a little typo in your plugin code. You structured it well but i got lost in all the permutations keeping track of lefts, rights, ups, downs, etc. as the rotations change state!

            I also appreciate the jQuery thought but wanted things as simple as possible while learning the 3D CSS. Went back to good ole KISS development mode and cut/pasted from another file, which explains the ID and colors of the text area too, an input in this case and not output display ;-).

            Thanks again for your time and the neat plugin! I always like to check out other people’s code and hopefully learn some new techniques.

Comments are closed.