Skip to content

Change log

Jump to bottom Edit New page
Mottie edited this page Nov 10, 2011 · 14 revisions

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

###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.

    ```javascript
$('#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](https://github.com/chriscoyier/MovingBoxes/issues/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:

    ```javascript
// 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 | Usage | Events | Change | Credits


              


              

                
                   Add a custom footer
              

          



  
          

            

              

                
                   Add a custom sidebar
              


            
Clone this wiki locally