Adding the MovingBoxes plugin to Blogger

These instructions will allow you to add a MovingBoxes widget to any Blogger post. These instruction really apply to any plugin out there, but instead of making a generic post, I think a specific example is best.

• 
  

  Olivia News Heading

  A very short exerpt goes here... more
• 
  

  Alice News Heading

  A very short exerpt goes here... more and a whole lot more text goes here, so we can see the height adjust.
• 
  

  Yin News Heading

  A very short exerpt goes here... more
• 
  

  Gerri News Heading

  A very short exerpt goes here... more
• 
  

  Tabitha News Heading

  A very short exerpt goes here... more
• 
  

  Mary News Heading

  A very short exerpt goes here... more
• 
  

  Kitty News Heading

  A very short exerpt goes here... more

Note: In the next version of MovingBoxes, I plan to change the width and panelWidth options. At that time, I will update this post.

Code, CSS and image setup

Required Files
I don't know how github would feel about directly linking to their servers. Most businesses frown upon hot-linking and will most likely block your URL, or the entire domain if the hot-linking gets too rampant. So I'd recommend copying each file below and saving it to your own server.

• http://css-tricks.github.com/MovingBoxes/css/movingboxes.css (don't copy this one, see below)
• http://css-tricks.github.com/MovingBoxes/images/arrows.png
• http://css-tricks.github.com/MovingBoxes/js/jquery.movingboxes.min.js

Note that inside of the css, you'll need to change the arrows.png url to point to the new location of the image file.

/*** Left & Right Navigation Arrows ***/
a.mb-scrollButtons {
  background: transparent url(../images/arrows.png) no-repeat;
}

If you don't have a server, you can use dropbox or your iCloud (I don't own a Mac, so I'm only guessing that it'll allow you to save javascript & css files). If you don't have a server to save the files, then first, save the image to an image hosting site, like photobucket, Flickr or something. Then you can save the javascript and css into your own blog design. The main problem with saving into your page design is that it will increase your page size and possibly make the page loading take longer. Either way you'll need to add a gadget, or add to an already existing one.

Add a Gadget
So once you have your files saved and the css file updated:

• Go to your Dashboard > Design > Add a Gadget > Pick the "HTML/Javascript" gadget.
  
• Once the popup window opens, add the following plugin css and javascript in the content window, the URL should point to your hosted files
• Note: After testing this, it seems that adding a <link> tag inside of the HTML/Javascript gadget gets removed. I'm not sure why, but in this case we can just paste in the entire css.
  
  

  <style>
  /*** 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;
   left: 0;
   top: 0;
   border-radius: 1em;
   -moz-border-radius: 1em;
   -webkit-border-radius: 1em;
   box-shadow: inset 0 0 10px #888;
   -moz-box-shadow: inset 0 0 10px #888;
   -webkit-box-shadow: inset 0 0 10px #888;
  }
  
  /* Panel Wrapper */
  .mb-slider, .mb-scroll {
   width: 100%;
   height: 100%;
   overflow: hidden;
   margin: 0 auto;
   padding: 0;
   position: relative;
   left: 0;
   top: 0;
  
   /***(>'-')> Control Panel Font size here <('-'<)***/
   font-size: 18px;
  }
  
  /* active slider border highlight */
  .mb-active-slider {
   border-color: #999bff;
  }
  
  /*** Slider panel ***/
  .mb-slider .mb-panel {
   width: 350px;  /* default, this is overridden by script settings */
   margin: 5px 0;
   padding: 5px;
   display: block;
   cursor: pointer;
   float: left;
   list-style: none;
  }
  
  /* Cursor to arrow over current panel, pointer for all others,
  change .current class name using plugin option, currentPanel : 'current' */
  .mb-slider .mb-panel.current {
   cursor: auto;
  }
  
  /*** Inside the panel ***/
  .mb-inside {
   padding: 10px;
   border: 1px solid #999;
  }
  
  .mb-inside * {
   max-width: 100%;
  }
  
  /*** Left & Right Navigation Arrows ***/
  a.mb-scrollButtons {
   display: block;
   width: 45px;
   height: 58px;
   background: transparent url(http://css-tricks.github.com/MovingBoxes/images/arrows.png) no-repeat;
   position: absolute;
   top: 50%;
   margin-top: -29px; /* if you change the arrow images, you may have to adjust this (1/2 height of arrow image) */
   cursor: pointer;
   text-decoration: none;
   outline: 0;
   border: 0;
  }
  a.mb-scrollButtons.mb-left {
   background-position: left top;
   left: -45px;
  }
  a.mb-scrollButtons.mb-right {
   background-position: right top;
   right: -45px;
  }
  a.mb-scrollButtons.mb-left:hover {
   background-position: left bottom;
  }
  a.mb-scrollButtons.mb-right:hover {
   background-position: right bottom;
  }
  a.mb-scrollButtons.disabled {
   display: none;
  }
  
  /*** Controls added below the panels ***/
  .mb-controls {
   margin: 0 auto;
   text-align: center;
   background: #ccc;
   position: relative;
   z-index: 100;
  }
  .mb-controls a {
   color: #444;
   font: 12px Georgia, Serif;
   display: inline-block;
   text-decoration: none;
   padding: 2px;
   height: 18px;
   margin: 0 5px 0 0;
   text-align: center;
   outline: 0;
  }
  .mb-controls a.current, .mb-controls a:hover {
   color: #fff;
  }
  .mb-active-slider .mb-controls {
   background: #999bff;
  }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  <script src="http://css-tricks.github.com/MovingBoxes/js/jquery.movingboxes.min.js"></script>
  <script>
  jQuery(function(){
  
    jQuery('.movingboxes').movingBoxes({
      startPanel   : 1,      // start with this panel
      width        : 300,    // overall width of movingBoxes
      panelWidth   : 0.5,    // current panel width adjusted to 50% of overall width
      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
    });
  
  });
  </script>

  
  
• Modify the "width" and "panelWidth" options (in red) as desired. Or add and/or remove options following these instructions.
  
• If you don't have your own server, then you can open the movingboxes.css file in a text editor and save it into the content window; again make sure the arrow.png url is pointing to the new location in the css below.
  
  

  <style>
    /* add movingboxes.css contents here */
  </style>
  <script>
    /* add jquery.movingboxes.min.js contents here */
  </script>

Adding a blog post

Now the first step here would be to open a new post.

Switch the editor to "Edit HTML" - tab in the upper right corner, then paste in the basic plugin HTML Note, keep the <img> and <li> on the same line or blogger will add a <br> in between.

<ul class="movingboxes">
  <li><img src="http://css-tricks.github.com/MovingBoxes/demo/1.jpg" alt="picture">
    <h2>Olivia News Heading</h2>
    <p>A very short exerpt goes here... <a href="http://flickr.com/photos/justbcuz/112479862/">more</a></p>
  </li>
  <li><img src="http://css-tricks.github.com/MovingBoxes/demo/2.jpg" alt="picture">
    <h2>Alice 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>
  </li>
  <li><img src="http://css-tricks.github.com/MovingBoxes/demo/3.jpg" alt="picture">
    <h2>Yin News Heading</h2>
    <p>A very short exerpt goes here... <a href="http://flickr.com/photos/ruudvanleeuwen/468309897/">more</a></p>
  </li>
  <li><img src="http://css-tricks.github.com/MovingBoxes/demo/4.jpg" alt="picture">
    <h2>Gerri News Heading</h2>
    <p>A very short exerpt goes here... <a href="http://flickr.com/photos/emikohime/294092478/">more</a></p>
  </li>
  <li><img src="http://css-tricks.github.com/MovingBoxes/demo/5.jpg" alt="picture">
    <h2>Tabitha News Heading</h2>
    <p>A very short exerpt goes here... <a href="http://www.flickr.com/photos/fensterbme/499006584/">more</a></p>
  </li>
  <li><img src="http://css-tricks.github.com/MovingBoxes/demo/6.jpg" alt="picture">
    <h2>Mary News Heading</h2>
    <p>A very short exerpt goes here... <a href="#">more</a></p>
  </li>
  <li><img src="http://css-tricks.github.com/MovingBoxes/demo/7.jpg" alt="picture">
    <h2>Kitty News Heading</h2>
    <p>A very short exerpt goes here... <a href="#">more</a></p>
  </li>
</ul>

Note that the UL has a class named "movingboxes", it originally had an ID, but to make this plugin work on any future blog entries we need to make sure it's a class name we can remember.

Now, just publish your post and reload your page. The MovingBoxes plugin should initialize and look like it does at the top of this post :)

All Images Loaded (imagesLoaded)

*NOTE* this code causes infinite loops in IE with image load errors, so I improved and turned this into a real plugin and hosted it on github.

---

A little jQuery function that checks if all images are loaded. If they all are, the callback function is called. Check out the latest version in this gist.

Script below:

/*
 Check if all images are loaded
 - Callback occurs when all images are loaded
 - image load errors are ignored (complete will be true)
 - Use:
   $('.wrap img').imagesLoaded(function(){
     alert('all images loaded');
   });
*/

jQuery.fn.extend({
  imagesLoaded: function( callback ) {
    var i, c = true, t = this, l = t.length;
    for ( i = 0; i < l; i++ ) {
      if (this[i].tagName === "IMG") {
        c = (c && this[i].complete && this[i].height !== 0);
      }
    }
    if (c) {
      if (typeof callback === "function") { callback(); }
    } else {
      setTimeout(function(){
        jQuery(t).imagesLoaded( callback );
      }, 200);
    }
  }
});

Use it as follows:

$(function(){
  $('.wrap img').imagesLoaded(function(){
    alert('all images loaded');
  });
});

jQuery Pathslider

I just created this plugin that is a very basic UI Slider (similar to the jQuery slider), but it doesn't just allow you to move the handle horizontally and vertically, it will follow any shaped curve! If you've ever used Adobe Illustrator or CorelDraw then you probably recognize the Bezier curve below.

The handle, or grip as I call it, can be dragged along the black curve. For now, it only returns values from 0 (green dot) to 100 (red dot).

The plugin is in the early stages of development and still needs a lot of work, but it is usable now.

Check out the demo page, and the builder page. If you would like to help me out, submit an enhancement or issue, or fork a copy of the plugin on Github and send me a pull request! I'd love the input!