Skip to content

Change log

Jump to bottom Edit New page
Mottie edited this page Nov 17, 2012 · 17 revisions

Wiki Pages: Home | FAQ | Setup | Options | Usage | Events | Change | Credits

Version 2.3.2 (11/17/2012)

  • Updated the API used to change panels. It will now accept a jQuery object of the panel or an element anywhere inside panel: 
    // go to panel 3
var lnk3 = $('.link3'); // link inside panel 3
$('#boxes').movingBoxes(lnk3, function(api){
  alert('Now on panel #' + api.curPanel);
});
    You can also call the api directly 
    // go to panel 3
var api = $('#boxes').data('movingBoxes'), // movingboxes object (api)
    lnk3 = $('.link3'); // link inside panel 3
api.change(lnk3, function(api){
    alert('Now on panel #' + api.curPanel);
});
  • Fixed the issue with the first panel not positioning correctly when the hash is not set.
  • Fixed issues with dealing with only one panel:
    • MovingBoxes with one or less panels will now properly hide the navigation arrows.
    • Starting with two panels and the first slide selected, when the second one was removed, the first panel would not resize. It does now!
  • Fixed an issue that occurred when the indicated hash panel didn't exist - the first cloned slide used to display instead.

Version 2.3.1 (10/9/2012)

  • MovingBoxes will no longer start on the first cloned panel when the wrap option is set to true. Fixes issue #97.

Version 2.3 (9/18/2012)

  • Added a method to check when all images have loaded, then reevaluate the height of each panel.
    • The plugin that was incorporated is called imagesLoaded.
    • This entailed rewritting and fixing the plugin initialization function (issue #92 and initAnimation problems (issue #79).
    • I hope this also includes fixing whatever is going on in issue #62.
  • Added a delayBeforeAnimate option:
    • The beforeAnimation event will be fired, then the animation will be delayed by the value in delayBeforeAnimate in milliseconds.
    • See issue #80 on how this could be useful :). Thanks to Alfazo for the suggestion.
  • Modified the layout so that the UL now gets the margin to center the panels within the frame instead of the first LI. This fixes the animation jump seen when switching from the second to first panel.
  • Removed byte order mark (BOM) from the js files. Fix for issue #94.

Version 2.2.16 (8/17/2012)

  • Added new styling to the demo pages (Chris)
  • Updated to jQuery v1.8
  • Included padding and margins in the panel position calculation to better center them.

Moved repo to CSS-Tricks (8/15/2012)

Version 2.2.15 (4/23/2012)

  • The initAnimation option should again prevent the initial animation. Fix for issue #79.

Version 2.2.14 (3/22/2012)

  • Modified hashTags option and internal change function to now accept jquery id or class selectors:
    • Call it as follows: $('#slider').data('movingBoxes').change('#astronaut');
    • Link to main demo slide: http://css-tricks.github.com/MovingBoxes/index.html#astronaut.
    • On page load, hash tags will now set the initial slide and ignore the hashTag option setting. Previously it would ignore all hash tags if the option was false.
  • Animation stops have been modified to now complete the animation instead of jumping to the end. This will smooth out the animation and resolve issue #73.

Version 2.2.13 (3/2/2012)

  • Added stopAnimation option.
  • If false, movingBoxes will continue to behave as it always has. Any attempt to navigation using arrows or the navigation panel will be ignored until the animation has completed.
  • When true, movingBoxes will force the animation to complete immediately, if the user selects the next panel.
  • This will speed up the animation between panels, but the slider will jump to the next slide instead of smoothly animating.
  • Setting this to true appears to work nicely when adding navigation using a mousewheel.

Version 2.2.12 (3/2/2012)

  • Added callbacks to the goForward() and goBack() internal functions. Previously only the change() function had a callback option. Use it as follows:

    var mb = $('#slider').data('movingBoxes');

// change needs a panel number: mb.change(2, callback);

// mb.goForward(callback) or mb.goBack(callback)
mb.goForward(function(){
   // do something after MovingBoxes has finished the animation
});

  • Modified the internal change function:

  • Multiple calls to it in rapid succession will no longer break the appearance of the slider.

  • Changed to make this mousewheel demo would work properly.

  • In response to issue #71.

Version 2.2.11 (2/28/2012)

  • Fixed cloned panels getting labeled with the "current" class. This will fix issue #67.

Version 2.2.10 (2/28/2012)

  • Fixed navFormatter
  • I copied the code from AnythingSlider which has its option named "navigationFormatter", not "navFormatter". That'll teach me for not testing!
  • Fixed the index since it was sending the navFormatter a zero-based index instead of the expected one-based index.

Version 2.2.9 (2/27/2012)

  • Added preinit callback/event
    • This event is triggered after the basic MovingBoxes structure has been established
    • It occurs before the initialized event.
    • Using this event allow for modifying the struction without any initialization delay.
    • See issue #68 on how use this event to add inline navigation arrows.
  • Modified the navigationFormatter option:
    • Navigation links are now wrapped by a span with a class of "mb-links".
    • The contents within the wrapper are removed and updated every time MovingBoxes gets updated.
    • The wrapper was added to allow prepending and appending navigation arrows, see issue #68.
    • You can now apply attributes directly to the navigation link as well as modifying the contents; this allows for adding tooltip titles or other data attributes.
    • Please refer to the documentation for more details.

Version 2.2.8 (2/22/2012)

  • Clicking on side panels should not follow the link. A better fix for issue #67.

Version 2.2.7 (2/21/2012)

  • Clicking on the side panels that are completely wrapped in a link should no longer open that link. Attempt to fix issue #67.

Version 2.2.6 (2/21/2012)

  • Clicking on panels to switch will now trigger callbacks. Fix for issue #66.

Version 2.2.5 (1/13/2012)

  • Fixed a problem with multiple initializations.
  • Remove the name attribute from inputs in cloned panels.

Version 2.2.4 (1/10/2012)

  • Fixed a bug introduced in the last update where the last panel would be misaligned when scrolling in the previous direction.

Version 2.2.3 (1/10/2012)

  • Added initAnimation option:

    • When true (default), MovingBoxes will show the initial animation starting from the first panel and sliding into the current panel (as determined by the hash or startPanel option).
    • If false, no animation will be seen and MovingBoxes will start on the appropriate panel.

  • The update method now has a flag to prevent callbacks from firing and also has it's own callback:

    • Set the flag to false to prevent the built-in callbacks (initChange, beforeAnimation & completed) from firing during the update. This flag is useful if you plan to call the update method a lot, like when the window resizes.

    • The callback for the update is used as follows:

      // update(flag, callback);
$('#slider').data('movingBoxes').update(false, function(slider){
  alert('update complete');
});

  • Fixed clicking on links in the current panel would go to the next panel. Fix for issue #60.

  • Updated method of plugin initialization to hopefully ensure that the completed callback will not fire until after initialization. Update for issue #57.

  • Fixed a problem where the navigation was clearing the current panel after using the update method.

  • Hopefully fixed the problems brought up in issue #49. So using this bit of code will allow you to set the MovingBoxes width as a percentage value.

    $(function(){
  $(window).resize(function(){
    // get MovingBoxes plugin object
    var slider = $('.slider').data('movingBoxes');
    // set overall width to 50% of the browser width
    slider.options.width = $(window).width() * 0.5;
    // set panel Width to be 50% of MovingBoxes width (which ends up being 25% of browser width; 50% x 50%)
    // OR you can set the panelWidth to a px amount, say 300 instead of a fraction: "slider.options.panelWidth = 300"
    slider.options.panelWidth = 0.5;
    // update the slider; include false flag to prevent built-in callbacks from firing (optional)
    slider.update(false);
  }).resize(); // trigger window resize to do the initial resizing.
});

Version 2.2.2 (1/3/2012)

  • Removed the width and panelWidth options.

    • The width and panel width are now set using css

    • The plugin is still backwards compatible, so setting the width and panelWidth in the option will still override the css settings.

    • Updated the movingboxes.css with the following css:

      ```css
/* Default MovingBoxes wrapper size */
#movingboxes {
  width: 900px;
  min-height: 200px;
}

/* Default MovingBoxes panel size */
#movingboxes > li {
  width: 350px;
}
```

    • So, the width still should not be set to a percentage, e.g. width: 100%, because it will not update when the window resizes.

    • Here is a demo of how to resize the slider on the fly.

    • Please note that the overall width can now be much much wider than the panel, so please DON'T use the wrap option in this case because it just doesn't look good.

    • Fixed for issue #49.

  • The completed callback will no longer run immediately after initialization. Fix for issue #57.

Version 2.2.1 (11/10/2011)

  • Clicking on panels will now work properly. Fix for issue #44.

Version 2.2 (11/9/2011)

  • Modified wrap option to now behave like an infinite slider
    • When true, the first and last MovingBoxes panels are cloned and attached to either end of the slider.
    • When false, the panels will stop at either end and the appropriate navigation arrow will get the disabled css class applied.
  • Added a basic demo page to make it easier to start out with the base code.
  • Added navigation buttons to the demo pages along with a link to a jsFiddle playground.

Version 2.1.4 (9/11/2011)

  • Added disabled option
    • This option contains the css class added to the arrows when the wrap option is true.
    • When the wrap option is false, the slider rewinds when clicking the arrow, so it still has a function.

Version 2.1.3 (8/26/2011)

  • Fixed a problem where the currentPanel class was not being applied to the current panel. Fix for issue #35.

Version 2.1.2 (8/22/2011)

  • Fixed a problem with the arrow buttons not working if the slider starts on any slide but the first - weird that it didn't rear it's ugly head until now... Fix for issue #34.

Version 2.1.1 (6/13/2011)

  • Updated to not animate the panel when the reducedSize option is set to 1. This prevents embeded video from restarting - fix for issue #31.

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.

       $('#slider').movingBoxes({
   // 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.

Version 1.7.1 (2/27/2011)

  • Fixed issue #13. The page no longer scrolls to the MovingBoxes during initialization.

  • Rearranged the events & callbacks to not occur until everything has been initialized.

  • Added a callback to the set method. So you can now do this:

    // returns panel#, scrolls to 2nd panel, then runs callback function
var panel = $('.slider').data('movingBoxes').currentPanel(2, function(){
  alert('done!'); // callback
});

Version 1.7 (1/29/2011)

  • Fixed issue #8, sliding glitch error which actually turned out to be a jQuery error to be fixed in jQuery 1.5... but this version completely bypasses this bug by now using scrollLeft instead of left to position the panels.
  • Cleaned up and removed duplicates in the css.

Version 1.6.3 (11/17/2010)

  • Added callbacks and triggered events: initialized, initChange, beforeAnimation and completed.

Version 1.6.2 (11/7/2010)

  • Added new "arrows.png" and "arrows.gif" to combine the separate arrow images.
  • Changed the initialization of the MovingBoxes script to not give internal links focus. Without this, MovingBoxes panels not at the top of a page will make the page to scroll down.
  • Fixed active panel problem introduced with the above change :P
  • Removed "leftarrow.png", "rightarrow.png", "leftshadow.png" and "rightshadow.png" images.

Version 1.6.1 (10/24/2010)

  • Added easing option which if set to anything other than 'linear' or 'swing' then the easing plugin would be required.

Version 1.6 (10/22/2010)

  • Added buildNav option, which if true will build navigation links which will contain panel numbers by default.
  • Added navFormatter option. This is an optional setting which can contain a function that returns a value for each tab index. See formatting navigation link text examples above.
  • Added tooltipClass option which will be added to the navigation links, but only if a navFormatter function exists. Also note that the title attribute will be empty unless.the link text is hidden using a negative text-indent css class.
  • Added panelTitle option to target the title tag inside the MovingBoxes panel. Selectors or multiple tags can be included (e.g. 'h1, h2.title').
  • Added panelText option to target the text content of the MovingBoxes panel. This too can include a selector or multiple tags (e.g. 'p.wrap, div').
  • Added the CSS class current to the expanded panel & updated the CSS to change the cursor to a pointer in non-"current" panels.
  • Thanks again to dlopez2000 for suggestions and code samples :)

Version 1.5.1 (10/15/2010)

  • Added fixedHeight option, which if true will set the overall slider height to the tallest panel.
  • Adjusted navigation arrow css to use a percentage from top of slider instead of calculating it in the script (removed).

Version 1.5 (10/13/2010)

  • Added panel height auto-resizing, in case there is extra text inside a panel - thanks dlopez2000!
  • Added hashTags option to enable hash tags which works with multiple sliders - thanks dlopez2000!
  • Added wrap option for psuedo wrapping of the panel when it reaches the end - making it really wrap like the AnythingSlider would bloat the code way too much.
  • Added external controls to allow calling goForward() or goBack() functions to control the slider. See example above.
  • Removed image arrow URLs from the options. Modified arrow image to include a hover state, then added it to the CSS.
  • Fixed some problems with IE8 (and compatibility mode).
  • Fixed IE keyboard navigation.
  • Cleaned up and separated the CSS (demo CSS is in a separate file now).

Version 1.4 (8/26/2010)

  • Reduced the amount of HTML markup - Internalized with CSS adjustment of elements (e.g. arrow images)
  • Added left and right navigation arrow urls to the options. The images are added as by the script in an attempt to reduce the amount of required HTML markup
  • Removed sizing options (movingDistance, curWidth, curImgWidth, curTitleSize, curParSize).
  • Added options to set overall width (width), panelWidth (50% of overall width), reducedSize (80% of currently displayed panel), imageRation (4:3 ratio to resize images to properly fit the panel).
  • Added keyboard support for multiple sliders (added back arrow keys and spacebar; but not the enter key as it will follow the external links)
  • Added panel centering to fix issue #2.
  • Updated the index.html to give examples of different movingBox sizes and image ratios.

Version 1.3 (6/21/2010)

  • Significant rewrite & conversion to a plugin (based off of http://starter.pixelgraphics.us/)
  • Removed keyboard support, it would look wierd having mulitple panels moving. Maybe someone has a better method?
  • Added method to get/set current displayed panel

Version 1.2 (2/17/2009)

  • Keyboard support added, arrow keys, spacebar, and enter key
  • Code cleaned up, number of panels and initial widths/sizes are no longer hard coded, so easier to build upon
  • Clicking on non-active left or right panels also triggers animation

Version 1.1 (2/16/2009)

  • Issue with double clicking fixed. Next animation can only start when current animation is complete.

Version 1.0 (2/16/2009)

  • Script released to public

Wiki Pages: Home | FAQ | Setup | Options | Usage | Events | Change | Credits

Add a custom footer
Add a custom sidebar
Clone this wiki locally