Skip to content

Change log

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

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

##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 | Creditss)

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