Your Very First Roundabout

This three-step guide will assist you in converting a boring unordered-list into an exciting Roundabout! Once this tutorial is complete, check out how to customize your Roundabout. Once you’ve mastered that, learn about Advanced Techniques.

This guide assumes that you have an unordered-list in your HTML somewhere, maybe one that looks like this:

 <ul id="myRoundabout">
   <li>Box 1</li>
   <li>Box 2</li>
   <li>Box 3</li>
   <li>Box 4</li>
</ul> 

1. Include Your Scripts

Before we can set our Roundabouts loose, we must first include the Roundabout script on our page. Because this script believes in unobtrusive JavaScript, you can put these lines right before the </body> of your HTML document.

 <script type="text/javascript"  src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.roundabout-1.0.min.js"></script> 

2. Set Up Your CSS

Due to unordered-lists having bullets and built-in indenting by default in most browsers, we’re going to need to make some CSS changes so that these features don’t get in the way once Roundabout is up and running. Below is some sample CSS that will set up a nice, standard Roundabout.

 <style type="text/css">
   /* <![CDATA[ */
   .roundabout-holder { padding: 0; height: 5em; }
   .roundabout-moveable-item {
      height: 4em;
      width: 4em;
      cursor: pointer;
      background-color: #ffc;
      border: 1px solid #999;
   }
   .roundabout-in-focus { cursor: auto; }
   /* ]]> */
</style> 

3. Attach Roundabout

This can happen in a separate file, or it can be right on the page. Let’s put it right on the page for the sake of this example.

 <script type="text/javascript">
   // <![CDATA[
   $(document).ready(function() {
      $('ul#myRoundabout').roundabout();
   });
   // ]]>
</script> 

There are two things happening here: first, we’re using the document’s ready state to trigger our Roundabout’s loading. This is important; we don’t want Roundabout looking for an HTML element that isn’t in the DOM yet.

Second, we select all of the HTML elements that we want to turn into Roundabouts with a jQuery selector and then attach the .roundabout() method onto it.

Save your file and load it in a browser. If all of your paths are correct and the CSS is in place, you should have a Roundabout!