Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Simple horizontal slider which grows up the current box when it's in focus (image, title & text) and back down when it's not in focus.

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.


MoxingBoxes jQuery Plugin


(Only the most recent changes are shown below, see the wiki page for a complete listing)

Version 2.1 (6/10/2011)

  • The script now prevents changing slides before it completes initialization. Fix for issue #29.
  • Removed element specific resizing:
    • Removed imageRatio option. Set the image using a percentage width and it will adjust the height automatically to maintain the image's aspect ratio.
    • In the script, the portion which set the height of images was removed. So now all panel content is set using css percentage values (or "em" for font sizes).
    • Moved CSS, including .mb-inside img {} to the demo.css since the layout now allows images of any size inside the panels. The dimensions should now be set in the css using a percentage value.
    • MovingBoxes will update a second time once the page has completely loaded. This now causes a vertical height resizing animation in webkit browsers. One way to work around this is to set the image height of the "current" panel - see the demo.css file.
  • Removed panelType options as the script now automatically looks for immediate children of the initialized element. You shouldn't even notice a difference.
  • Moved all demo related files into a demo folder.

Version 2.0.5 (6/9/2011)

  • Fixed margins when MovingBoxes gets updated. Fix for issue #30.

Version 2.0.4 (5/7/2011)

  • Fixed hash tags which apparently broke in the last version =/

Version 2.0.3 (4/22/2011)

  • Adjusted width of MovingBoxes internal wrapper to fix issue #24.
  • Restructured the plugin to allow updating MovingBoxes after adding or removing a panel.
    • To use, simply call the plugin a second time without any options: $('.slider').movingBoxes();
    • These new changes now require a minimum of jQuery version 1.4.2 (due to the use of "delegate()").
  • Restructured the layout of MovingBoxes.
    • Previously, two divs were wrapped inside of the element the MovingBoxes plugin was called on. The structure was like this: #slider-one.movingBoxes.mb-slider > DIV.mb-scroll > DIV.mb-scrollContainer > .mb-panel.
    • It worked, but when the element was a UL it became poorly formed HTML, because it added two divs inside the UL which wrapped all of the LI's.
    • This restructuring actually only required minor changes to the css: .mb-slider is no longer the overall wrapper, it was renamed to .mb-wrapper and .mb-scrollContainer was renamed to .mb-slider
    • The new layout is DIV.movingBoxes.mb-wrapper > DIV.mb-scroll > #slider-one.mb-slider > .mb-panel
    • When accessing the plugin object, you will still target the .mb-slider. So the methods, events & callbacks didn't change at all. You may not even notice a difference, unless you modified the css for your theme.
  • Modified the plugin so that instead of using the currentPanel() function to set the current panel, you can just call the plugin with a number (shortcut method). Both of these methods do the same thing:
    • $('.slider').data('movingBoxes').currentPanel(2, function(){ alert('done!'); });
    • $('.slider').movingBoxes(2, function(){ alert('done!'); });

Version 2.0.2 (4/8/2011)

  • Changed default box shadow to be "inset".
  • Added a separate IE stylesheet for versions < 9. Older IE versions will use a background image to add an inner shadow. It is using a png file, so it may not work properly in all older versions.

Version 2.0.1 (3/31/2011)

  • Added more width to the scroll container. Fix for issue #19.
  • Centered the image... silly css problem. Fix for issue #20.
  • Moving boxes will no longer scroll when using the space bar or arrow keys inside an input, selector or textarea. Fix for issue #22.

Version 2.0 (3/11/2011)

  • Made all css class name more unique by adding a "mb-" in front. Fix for issue #15.
  • Removed font-size animation, and set percentage font sizes in the css. This reduces the amount of scripting and speeds up the script. CSS comments added to make these changes more clear.
  • Removed panelTitle and panelText options as these sizes are now controlled as percentages in the CSS.
  • Removed panels class name from HTML markup. It is now mb-panels and automatically added by the script.
  • Added panelType option. This is the jQuery selector used to find the panels.

    • The default value is "> div" which means target the immediate children (">") only if they are divs "div".
    • For example, the first demo is now an unordered list (ul#slider-one & li) with it's panelType set to "> LI" (the immediate childen of the UL).
    • The second demo example has divs inside of a div#slider-two. So panelType is not set in the options.
    • If the ">" (immediate children selector) is not used, any panels that have matching elements ("LI" within a list inside the panel) will also be targeted and likely break the MovingBoxes appearance.
    • If there are any issues with panels not being found, then set panelType to something like ".myPanel", then just add the "myPanel" class to panel.
  • Added a "movingBoxes" namespace to all events

    • The triggered events are now as follows: initialized.movingBoxes, initChange.movingBoxes, beforeAnimation.movingBoxes and completed.movingBoxes.
    • The "tar" event variable is now available in all events (it wasn't included in the initialized and completed events before).
    • Use it as follows:

      $('#slider').bind('completed.movingBoxes', function(e, slider, tar){
          // e.type = "completed", e.namespace = "movingBoxes"
          // tar = target panel# which is the same as current panel (slider.curPanel) when "completed" event is called
          alert('Now on panel #' + slider.curPanel);
    • Note that the callback names haven't changed (don't add a ".movingBoxes" to the end when adding the callback name in the initialization options.

          // tar = target panel# which is the same as current panel (slider.curPanel) when "completed" event is called
          completed : function(e, slider, tar) { alert('now on panel ' + tar); }
  • Added a "slider" variable to the set method callback:

        // returns panel#, scrolls to 2nd panel, then runs callback function
        // panel also contains the current slide #, but it's not accessible inside the callback
        var panel = $('.slider').data('movingBoxes').currentPanel(2, function(slider){
            alert('done! now on slide #' + slider.curPanel); // callback
  • Fixed a problem in Opera where the top half of the panel would be out of view.

Something went wrong with that request. Please try again.