content non-specific resizing

Author: Mottie

README.markdown

@@ -9,14 +9,24 @@
 
 (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.1 (6/10/2011)
+* The script now prevents changing slides before it completes initialization. Fix for [issue #29](https://github.com/chriscoyier/MovingBoxes/issues/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.
+* Fixed margins when MovingBoxes gets updated. Fix for [issue #30](https://github.com/chriscoyier/MovingBoxes/issues/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.
+* 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()").
@@ -35,9 +45,9 @@
 * 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.
+* 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).

css/demo.css

@@ -39,6 +39,7 @@
   width: 350px;  /* default, this is overridden by script settings */
   margin: 5px 0;
   padding: 5px;
+  display: block;
   cursor: pointer;
   float: left;
   list-style: none;
@@ -56,33 +57,8 @@
   border: 1px solid #999;
 }
 
-.mb-inside img {
-  display: block;
-  border: 1px solid #666;
-  margin: 0 auto;
-  width: 100%;
-}
-
-.mb-inside h2 {
-  font-weight: normal;
-  color: #000;
-  font-size: 140%; /* Adjust panel header font size using em or % */
-  margin: 0 0 8px 0;
-}
-
-.mb-inside p {
-  font-size: 100%; /* Adjust panel text font size using em or % */
-  color: #444;
-}
-
-.mb-inside a {
-  color: #333;
-  text-decoration: none;
-  border-bottom: 1px dotted #ccc;
-}
-
-.mb-inside a:hover {
-  border-bottom: 1px solid #999;
+.mb-inside * {
+  max-width: 100%;
 }
 
 /*** Left & Right Navigation Arrows ***/

css/movingboxes.css

@@ -0,0 +1,59 @@
+/* Moving Boxes demo CSS */
+* {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font: 11px Helvetica, Arial, sans-serif;
+}
+
+#wrapper {}
+
+/* Moving Boxes title image wrapper */
+#title {
+  text-align: center;
+}
+#title img {
+  border: 0;
+}
+
+/* panel images */
+.mb-inside img {
+  width: 100%;
+}
+
+
+#slider-two .current img {
+  /* height of the placeholder until image completely loads - needed for
+     webkit browsers, add this only if you don't want the height animation
+     on startup.
+
+     326px measures the height of the current image when enlarged 
+
+  height: 326px;
+
+  */
+}
+
+/* panel links */
+.mb-inside a {
+  color: #333;
+  text-decoration: none;
+  border-bottom: 1px dotted #ccc;
+}
+.mb-inside a:hover {
+  border-bottom: 1px solid #999;
+}
+
+/* Add/remove panels buttons */
+.buttons {
+  padding: 5px 10px;
+  text-align: center;
+}
+
+/* direct link styling */
+.dlinks {
+  text-align: center;
+  font-size: 20px;
+}

images/1.jpg demo/1.jpg

@@ -7,32 +7,29 @@ $(function(){
 	$('#slider-one').movingBoxes({
 		startPanel   : 4,      // start with this panel
 		width        : 300,    // overall width of movingBoxes (not including navigation arrows)
-		imageRatio   : 1,      // Image ration set to 1:1 (square image)
 		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
-		panelType    : '> li', // selector to find the immediate ">" children "li" of "#slider-one" in this case
 		navFormatter : function(){ return "●"; } // function which returns the navigation text for each panel
 	});
 
 	$('#slider-two').movingBoxes({
 		startPanel   : 3,      // start with this panel
-		width        : 600,    // overall width of movingBoxes (not including navigation arrows)
+		width        : 650,    // overall width of movingBoxes (not including navigation arrows)
 		panelWidth   : .7,     // current panel width adjusted to 70% of overall width
-		imageRatio   : 16/9,   // Image ratio set to 16:9
 		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
 	});
 
 	// Add a slide
-	var imageNumber = 1,
-	panel = '<li><img src="images/*.jpg" alt="picture" /><h2>News Heading #*</h2><p>A very short exerpt goes here... <a href="#">more</a></p></li>',
+	var imageNumber = 0,
+	panel = '<li><img src="demo/*1.jpg" alt="picture" /><h2>News Heading #*2</h2><p>A very short exerpt goes here... <a href="#">more</a></p></li>',
 	// to test adding/removing panels to the second slider, comment out the line above and uncomment out the line below - slider-two uses divs instead of UL & LIs
 	// panel = '<div><img src="images/*.jpg" alt="picture" /><h2>News Heading #<span>*</span></h2><p>A very short exerpt goes here... <a href="#">more</a></p></div>',
 	slider = $('#slider-one'); // $('#slider-two'); // second slider
 
 	$('button.add').click(function(){
 		slider
-		.append(panel.replace(/\*/g, (++imageNumber%7 + 1)))
+		.append( panel.replace(/\*2/g, ++imageNumber).replace(/\*1/g, (imageNumber%7 + 1)) )
 		.movingBoxes(); // update movingBoxes
 	});
 

images/2.jpg demo/2.jpg

@@ -13,18 +13,18 @@
   <![endif]-->
 
   <!-- Required script -->
-  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" charset="utf-8"></script>
+  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" charset="utf-8"></script>
   <script type="text/javascript" src="js/jquery.movingboxes.js" charset="utf-8"></script>
 
   <!-- Demo only -->
-  <link type="text/css" href="css/demo.css" media="screen" charset="utf-8" rel="stylesheet"  />
-  <script type="text/javascript" src="js/demo.js"></script>
+  <link type="text/css" href="demo/demo.css" media="screen" charset="utf-8" rel="stylesheet"  />
+  <script type="text/javascript" src="demo/demo.js"></script>
 </head>
 
 <body>
  <div id="wrapper">
   <div id="title">
-   <a href="http://github.com/chriscoyier/MovingBoxes"><img src="images/movingboxes.png" alt="moving boxes" /></a>
+   <a href="http://github.com/chriscoyier/MovingBoxes"><img src="demo/movingboxes.png" alt="moving boxes" /></a>
   </div>
 
   <br><br>
@@ -43,45 +43,45 @@
   <ul id="slider-one">
 
    <li>
-    <img src="images/1.jpg" alt="picture" />
+    <img src="demo/1.jpg" alt="picture" />
     <h2>News Heading</h2>
-    <p>A very short exerpt goes here... <a href="http://flickr.com/photos/justbcuz/112479862/">more</a></p>
+    <p>Add a short exerpt here... <a href="http://flickr.com/photos/justbcuz/112479862/">more</a></p>
    </li>
 
    <li>
-    <img src="images/2.jpg" alt="picture" />
+    <img src="demo/2.jpg" alt="picture" />
     <h2>News Heading</h2>
-    <p>A very short exerpt goes here... <a href="http://flickr.com/photos/joshuacraig/2698975899/">more</a> and a whole lot more text goes here, so we can see the height adjust.</p>
+    <p>Add a short exerpt here... <a href="http://flickr.com/photos/joshuacraig/2698975899/">more</a> and a whole lot more text goes here, so we can see the height adjust.</p>
    </li>
 
    <li>
-    <img src="images/3.jpg" alt="picture" />
+    <img src="demo/3.jpg" alt="picture" />
     <h2>News Heading</h2>
-    <p>A very short exerpt goes here... <a href="http://flickr.com/photos/ruudvanleeuwen/468309897/">more</a></p>
+    <p>Add a short exerpt here... <a href="http://flickr.com/photos/ruudvanleeuwen/468309897/">more</a></p>
    </li>
 
    <li>
-    <img src="images/4.jpg" alt="picture" />
+    <img src="demo/4.jpg" alt="picture" />
     <h2>News Heading</h2>
-    <p>A very short exerpt goes here... <a href="http://flickr.com/photos/emikohime/294092478/">more</a></p>
+    <p>Add a short exerpt here... <a href="http://flickr.com/photos/emikohime/294092478/">more</a></p>
    </li>
 
    <li>
-    <img src="images/5.jpg" alt="picture" />
+    <img src="demo/5.jpg" alt="picture" />
     <h2>News Heading</h2>
-    <p>A very short exerpt goes here... <a href="http://www.flickr.com/photos/fensterbme/499006584/">more</a></p>
+    <p>Add a short exerpt here... <a href="http://www.flickr.com/photos/fensterbme/499006584/">more</a></p>
    </li>
 
    <li>
-    <img src="images/6.jpg" alt="picture" />
+    <img src="demo/6.jpg" alt="picture" />
     <h2>News Heading</h2>
-    <p>A very short exerpt goes here... <a href="#">more</a></p>
+    <p>Add a short exerpt here... <a href="#">more</a></p>
    </li>
 
    <li>
-    <img src="images/7.jpg" alt="picture" />
+    <img src="demo/7.jpg" alt="picture" />
     <h2>News Heading</h2>
-    <p>A very short exerpt goes here... <a href="#">more</a></p>
+    <p>Add a short exerpt here... <a href="#">more</a></p>
    </li>
 
   </ul> <!-- end Slider #1 -->
@@ -92,33 +92,33 @@ <h2>News Heading</h2>
   <div id="slider-two">
 
    <div>
-    <img src="images/5.jpg" alt="picture" />
+    <img src="demo/5.jpg" alt="picture" />
     <h2>News Heading - <span>Lisa</span></h2>
-    <p>A very short exerpt goes here... <a href="http://flickr.com/photos/fensterbme/499006584/">more</a></p>
+    <p>Add a short exerpt here... <a href="http://flickr.com/photos/fensterbme/499006584/">more</a></p>
    </div>
 
    <div>
-    <img src="images/4.jpg" alt="picture" />
+    <img src="demo/4.jpg" alt="picture" />
     <h2>News Heading - <span>Monica</span></h2>
-    <p>A very short exerpt goes here... <a href="http://flickr.com/photos/emikohime/294092478/">more</a></p>
+    <p>Add a short exerpt here... <a href="http://flickr.com/photos/emikohime/294092478/">more</a></p>
    </div>
 
    <div>
-    <img src="images/3.jpg" alt="picture" />
+    <img src="demo/3.jpg" alt="picture" />
     <h2>News Heading - <span>Lin</span></h2>
-    <p>A very short exerpt goes here... <a href="http://flickr.com/photos/ruudvanleeuwen/468309897/">more</a></p>
+    <p>Add a short exerpt here... <a href="http://flickr.com/photos/ruudvanleeuwen/468309897/">more</a></p>
    </div>
 
    <div>
-    <img src="images/2.jpg" alt="picture" />
+    <img src="demo/2.jpg" alt="picture" />
     <h2>News Heading - <span>Shiela</span></h2>
-    <p>A very short exerpt goes here... <a href="http://flickr.com/photos/joshuacraig/2698975899/">more</a></p>
+    <p>Add a short exerpt here... <a href="http://flickr.com/photos/joshuacraig/2698975899/">more</a></p>
    </div>
 
    <div>
-    <img src="images/1.jpg" alt="picture" />
+    <img src="demo/1.jpg" alt="picture" />
     <h2>News Heading - <span>Joanne</span></h2>
-    <p>A very short exerpt goes here... <a href="http://flickr.com/photos/justbcuz/112479862/">more</a></p>
+    <p>Add a short exerpt here... <a href="http://flickr.com/photos/justbcuz/112479862/">more</a></p>
    </div>
 
   </div>