Skip to content

Change log

Jump to bottom Edit New page
Mottie edited this page Apr 22, 2011 · 17 revisions

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

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