Permalink
Browse files

removed width and panelWidth option

  • Loading branch information...
1 parent 6dbbfab commit 4fccb012c51d0b40d6cfc3da56293f879c1d82e5 @Mottie Mottie committed Jan 4, 2012
Showing with 317 additions and 104 deletions.
  1. +26 −66 README.markdown
  2. +11 −3 basic.html
  3. +12 −4 css/movingboxes.css
  4. +15 −7 demo/demo.js
  5. +11 −1 index.html
  6. +36 −21 js/jquery.movingboxes.js
  7. +2 −2 js/jquery.movingboxes.min.js
  8. +165 −0 license.txt
  9. +39 −0 package.json
View
@@ -10,6 +10,32 @@
(Only the most recent changes are shown below, see the [wiki page](https://github.com/chriscoyier/MovingBoxes/wiki/Change-Log) for a complete listing)
+###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](http://jsfiddle.net/Mottie/jMXx3/1/) 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](https://github.com/chriscoyier/MovingBoxes/issues/49).
+* The `completed` callback will no longer run immediately after initialization. Fix for [issue #57](https://github.com/chriscoyier/MovingBoxes/issues/57).
+
###Version 2.2.1 (11/10/2011)
* Clicking on panels will now work properly. Fix for [issue #44](https://github.com/chriscoyier/MovingBoxes/issues/44).
@@ -49,69 +75,3 @@
###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](https://github.com/chriscoyier/MovingBoxes/issues/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](https://github.com/chriscoyier/MovingBoxes/issues/19).
-* Centered the image... silly css problem. Fix for [issue #20](https://github.com/chriscoyier/MovingBoxes/issues/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](https://github.com/chriscoyier/MovingBoxes/issues/22).
-
-###Version 2.0 (3/11/2011)
-* Made all css class name more unique by adding a "mb-" in front. Fix for [issue #15](https://github.com/chriscoyier/MovingBoxes/issues/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 &amp; 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.
View
@@ -16,13 +16,21 @@
<!-- Demo only -->
<link href="demo/demo.css" media="screen" rel="stylesheet">
+ <style>
+ /* Dimensions set via css in MovingBoxes version 2.2.2+ */
+ #slider { width: 500px; }
+ #slider li { width: 250px; }
+ </style>
<script>
$(function(){
$('#slider').movingBoxes({
+ /* width and panelWidth options deprecated, but still work to keep the plugin backwards compatible
+ width: 500,
+ panelWidth: 0.5,
+ */
startPanel : 1, // start with this panel
- width : 300, // overall width of movingBoxes (not including navigation arrows)
- wrap : true, // if true, the panel will "wrap" (it really rewinds/fast forwards) at the ends
+ wrap : false, // if true, the panel will "wrap" (it really rewinds/fast forwards) at the ends
buildNav : true, // if true, navigation links will be added
navFormatter : function(){ return "&#9679;"; } // function which returns the navigation text for each panel
});
@@ -41,7 +49,7 @@
<div id="nav">
<a href="index.html">Main Demo</a>
<a class="current" href="basic.html">Basic Demo</a>
- <a class="play" href="http://jsfiddle.net/Mottie/SnjC4/">Playground</a>
+ <a class="play" href="http://jsfiddle.net/Mottie/jMXx3/">Playground</a>
<a class="git" href="https://github.com/chriscoyier/MovingBoxes/wiki">Documentation</a>
<a class="git" href="https://github.com/chriscoyier/MovingBoxes/downloads">Download</a>
<a class="issue" href="https://github.com/chriscoyier/MovingBoxes/issues">Issues</a>
View
@@ -1,7 +1,16 @@
+/* Default MovingBoxes wrapper size */
+#movingboxes {
+ width: 900px;
+ min-height: 200px;
+}
+
+/* Default MovingBoxes panel size */
+#movingboxes > li {
+ width: 350px;
+}
+
/*** Overall MovingBoxes Slider ***/
.mb-wrapper {
- width: 900px; /* default, this is overridden by script settings */
- min-height: 200px;
border: 5px solid #ccc;
margin: 0 auto;
position: relative;
@@ -37,8 +46,7 @@
/*** Slider panel ***/
.mb-slider .mb-panel {
- width: 350px; /* default, this is overridden by script settings */
- margin: 5px 0;
+ margin: 0;
padding: 5px;
display: block;
cursor: pointer;
View
@@ -6,18 +6,27 @@ $(function(){
$('#slider-one').movingBoxes({
startPanel : 1, // start with this panel
- width : 300, // overall width of movingBoxes (not including navigation arrows)
+ reducedSize : 0.8, // non-current panel size: 80% of panel size
wrap : true, // if true, the panel will "wrap" (it really rewinds/fast forwards) at the ends
buildNav : true, // if true, navigation links will be added
navFormatter : function(){ return "&#9679;"; } // function which returns the navigation text for each panel
+
+ // width and panelWidth options removed in v2.2.2, but still backwards compatible
+ // width : 300, // overall width of movingBoxes (not including navigation arrows)
+ // panelWidth : 0.5, // current panel width
+
});
$('#slider-two').movingBoxes({
startPanel : 3, // start with this panel
- width : 500, // overall width of movingBoxes (not including navigation arrows)
- panelWidth : .7, // current panel width adjusted to 70% of overall width
+ reducedSize : 0.8, // non-current panel size: 80% of panel size
buildNav : true, // if true, navigation links will be added
navFormatter : function(index, panel){ return panel.find('h2 span').text(); } // function which gets nav text from span inside the panel header
+
+ // width and panelWidth options removed in v2.2.2, but still backwards compatible
+ // width : 500, // overall width of movingBoxes (not including navigation arrows)
+ // panelWidth : 0.7, // current panel width
+
});
// Add a slide
@@ -76,15 +85,14 @@ $(function(){
return false;
});
-/*
// Report events to firebug console
$('.mb-slider').bind('initialized.movingBoxes initChange.movingBoxes beforeAnimation.movingBoxes completed.movingBoxes',function(e, slider, tar){
// show object ID + event in the firebug console
// namespaced events: e.g. e.type = "completed", e.namespace = "movingBoxes"
- if (window.console && window.console.firebug){
+ if (window.console && window.console.log){
var txt = slider.$el[0].id + ': ' + e.type + ', now on panel #' + slider.curPanel + ', targeted panel is ' + tar;
- console.debug( txt );
+ console.log( txt );
}
});
-*/
+
});
View
@@ -17,6 +17,16 @@
<!-- Demo only -->
<link href="demo/demo.css" media="screen" rel="stylesheet">
<script src="demo/demo.js"></script>
+ <style>
+ /* Overall & panel width defined using css in MovingBoxes version 2.2.2+ */
+ ul#slider-one { width: 300px; }
+ ul#slider-one > li { width: 150px; }
+ div#slider-two { width: 500px; }
+ div#slider-two > div { width: 360px; }
+ </style>
+ <script>
+
+ </script>
</head>
<body>
@@ -28,7 +38,7 @@
<div id="nav">
<a class="current" href="index.html">Main Demo</a>
<a href="basic.html">Basic Demo</a>
- <a class="play" href="http://jsfiddle.net/Mottie/SnjC4/">Playground</a>
+ <a class="play" href="http://jsfiddle.net/Mottie/jMXx3/">Playground</a>
<a class="git" href="https://github.com/chriscoyier/MovingBoxes/wiki">Documentation</a>
<a class="git" href="https://github.com/chriscoyier/MovingBoxes/downloads">Download</a>
<a class="issue" href="https://github.com/chriscoyier/MovingBoxes/issues">Issues</a>
Oops, something went wrong.

0 comments on commit 4fccb01

Please sign in to comment.