Avatar, the Movie: SharePoint Navigation Re-creation – Part 1
Guest Author: Christina Wheeler
Introduction
In this article I will show you how to re-create the scrolling boxes (without content) using jQuery Tools JavaScript library.
jQuery Tools
One of the approaches that I am taking with re-creating the Avatar navigation in SharePoint is using jQuery Tools which is part of the jQuery Tools JavaScript Library written by Tero Piirainen (@jquerytools). jQuery Tools is a collection of the most important user interface components which are tooltips, overlays, exposing effects, scrollables, tabs and accordions.
Solution
All scripts/solutions will be stored in a central library with the CEWP pointing to the solution.
Step 1. Central Repository: Created a Scripting Resource Center based on Mark Miller’s recommendation.
Step 2. Downloads: To make it easier, I have provided downloads for the JavaScript and Image files that are used for this project.
- JavaScript Files Download
Download the necessary files and put them in your central repository. You will have to change the code to reflect where your files are located. For this project I used the minified version for the jQuery main library and the source code files for the jQuery Tools since they will need to be modified for this project. - jQuery JavaScript Library (Minified Version)
- jQuery Tools Scrollable JavaScript Library (Source Code)
- Scrollable Plugin:
http://dev.cmportals.com/ssrc/ResourcesjQuery/tools.scrollable-1.1.2.js - Circular Plugin (generates an infinite loop for the scrollable items):
http://dev.cmportals.com/ssrc/ResourcesjQuery/tools.scrollable.circular-0.5.1.js

- Images Download
Download this sample background image and the blank gif and load it into your central repository. (right click to save)
Step 3. HTML page & CSS file: Create a blank HTML page and a blank CSS file. I named my html file 01_jQueryAvatarNav.htm and named my CSS file 01_AvatarStyle.css. Once created load these files into your central repository.

Step 4. Content Editor Web Part: Add a CEWP to your page and point it to your 01_jQueryAvatarNav.htm file.


For those who have been using jQuery for awhile you know that most solutions begin with adding a hidden CEWP to the bottom of the page. For this solution we cannot hide the web part and instead need change the ‘Chrome Type’ from Default to None.
The next thing I wanted to do is hide the Quick Launch bar. To achieve this I created a hidden CEWP naming it CSS Override and I added the following HTML source code.

<style> .ms-nav { display:none; } </style>
Step 5. Edit the HTML Page: Since the files are now stored SharePoint you can open your html, css, and js central repository files through SharePoint Designer.
HTML Code
First thing will be to layout the scrollables. In the html you must have a root element for the scrollable and inside that another wrapper element for the items. Since I will not be using content for Part One of this project, I am using blank.gif placeholder images.
<!-- "previous page" action --> <a class="prevPage browse left"></a> <!-- root element for scrollable --> <div class="scrollable" id=scroll> <!-- root element for the items --> <div class="items"> <!-- 1-4 --> <img src="/ssrc/ResourcesScripts/images/blank.gif" /> <img src="/ssrc/ResourcesScripts/images/blank.gif" /> <img src="/ssrc/ResourcesScripts/images/blank.gif" /> <img src="/ssrc/ResourcesScripts/images/blank.gif" /> <!-- 5-8 --> <img src="/ssrc/ResourcesScripts/images/blank.gif" /> <img src="/ssrc/ResourcesScripts/images/blank.gif" /> <img src="/ssrc/ResourcesScripts/images/blank.gif" /> <img src="/ssrc/ResourcesScripts/images/blank.gif" /> </div> </div> <!-- "next page" action --> <a class="nextPage browse right"></a> <br clear="all" />
Next/Prev buttons
As a document on the jQuery Tools Website, the scrollable plugin tool looks for elements whose CSS class name is prevPage and nextPage and automatically binds the seeking action to them.
CSS Code
Below are the CSS settings used for this project to create the horizontal scrollable. I also updated the ms-bodyareaframe class for setting the background image that we want to use behind the scrolling boxes. You will need to add the following CSS settings to your 01_AvatarStyle.css file or whichever CSS file you are using for your project.
Note: I am working in a resolution of 1440×900 therefore you may need to adjust the positioning and sizing if you are working in a smaller resolution.
/* root element for the scrollable. when scrolling occurs this element stays still. */ .scrollable { /* required settings */ position:relative; overflow:hidden; width:100%; height:250px; /* optional settings */ top:350px; } /* root element for scrollable items. Must be absolutely positioned and it should have an extremely large width to accommodate scrollable items. it’s enough that you set the width and height for the root element and not for this element. */ .scrollable .items { /* this cannot be too large */ width:20000em; position:absolute; clear:both; } /* a single item. must be floated in horizontal scrolling. Typically, this element is the one that *you* will style the most. */ .scrollable .items div { float:left; } /* single scrollable item */ div.scrollable img { float:left; margin: 0px 5px 0px 5x; background-color:#000000; border-top:15px transparent solid; border-bottom:15px transparent solid; cursor:pointer; width:320px; height:210px; } /* active item */ .items .active { border-top:15px transparent solid; border-bottom:15px transparent solid; z-index:9999; position:relative; width:320px; height:210px; } /* SharePoint Core CSS Override */ .ms-bodyareaframe { background-image:url(/ssrc/ResourcesScripts/images/avatar_movie_based_ubisoft_game_concept_art_1.jpg); background-repeat:no-repeat; padding:0px; }
JavaScript Setup
In order to get the effect of the scrollable boxes I am using the Scrollable plugin from jQuery Tools. The scrollable plugin can be used with any HTML (text, images, forms, Flash objects, or any combination of the above).
- Add a reference to your jQuery library files and CSS file to the top of your html page.
<script src="/ssrc/ResourcesjQuery/jquery-1.3.2.min.js"></script> <script src="/ssrc/ResourcesjQuery/tools.scrollable-1.1.2.js"></script> <script src="/ssrc/ResourcesjQuery/tools.scrollable.circular-0.5.1.js"></script> <!-- styling --> <link rel="stylesheet" type="text/css" href="/ssrc/ResourcesScripts/css/01_AvatarStyle.css" />
- The next part is to add the scripting for the scrollable to the bottom of your html page. Select the elements from the page by using the jQuery selector following by the scrollable constructor. The constructor accepts a configuration object as the first element. The one property I needed to change is the size property. The size property is the number of visible items with the scrollable-enabled HTML element. As stated in the jQuery Tools online documentation, this property can also be referred to as the "page size", since it defines how many items are moved in a particular direction when either the nextPage or prevPage actions are executed.
The JavaScript below will create a basic horizontal scrollable.
<!-- javascript coding --> <script> $(document).ready(function() { // initialize scrollable plugin $("#scroll").scrollable({size: 4}); }); </script>
Now let’s add the effect for infinite looping for the scrollable items. This can be done by initializing the circular plugin with the scrollable plugin with the following changes to the JavaScript.
// initialize scrollable together with the circular plugin $("#scroll").scrollable({size: 4}).circular();
Next, let’s add the transparency effect to the scrollable items. This can be done by modifying the JavaScript as shown below.
// initialize scrollable together with the circular plugin with transparency $("#scroll").scrollable({size: 4}).circular().css({opacity: 0.75});
At this point, you should have scrollable infinite looping box items with a transparency of 75% or whichever percentage you set your opacity to. The items can be clicked on from the right or left side to make them move.
Here is the full html.
<script src="/ssrc/ResourcesjQuery/jquery-1.3.2.min.js"></script> <script src="/ssrc/ResourcesjQuery/tools.scrollable-1.1.2.mod.js"></script> <script src="/ssrc/ResourcesjQuery/tools.scrollable.circular-0.5.1.js"></script> <!-- styling --> <link rel="stylesheet" type="text/css" href="/ssrc/ResourcesScripts/css/01_AvatarStyle.css" /> <!-- "previous page" action --> <a class="prevPage browse left"></a> <!-- root element for scrollable --> <div class="scrollable" id=scroll> <!-- root element for the items --> <div class="items"> <!-- 1-4 --> <img src="/ssrc/ResourcesScripts/images/blank.gif" /> <img src="/ssrc/ResourcesScripts/images/blank.gif" /> <img src="/ssrc/ResourcesScripts/images/blank.gif" /> <img src="/ssrc/ResourcesScripts/images/blank.gif" /> <!-- 5-8 --> <img src="/ssrc/ResourcesScripts/images/blank.gif" /> <img src="/ssrc/ResourcesScripts/images/blank.gif" /> <img src="/ssrc/ResourcesScripts/images/blank.gif" /> <img src="/ssrc/ResourcesScripts/images/blank.gif" /> </div> </div> <!-- "next page" action --> <a class="nextPage browse right"></a> <br clear="all" /> <!-- javascript coding --> <script> $(document).ready(function() { // initialize scrollable together with the circular plugin with transparency $("#scroll").scrollable({size: 4}).circular().css({opacity: 0.75}); }); </script>
Scrollable Configurations
One of configurations I found missing from the jQuery Tools Scrollable library is the JavaScript for MouseOver items. The plugin only allowed the following:
- Clicking on the content area
- Clicking on actions buttons
- Using left/right arrows on your keyboard
- Using your mouse scroll wheel.
So now it’s time to modify the Scrollable plugin to support MouseOver events. Before making the changes I first made a copy of the tools.scrollable-1.1.2.js in the Resources-jQuery central repository and named it tools.scrollable-1.1.2.mod.js. Next I updated my script reference in my html file to point to the new modified file.
<script src="/ssrc/ResourcesjQuery/tools.scrollable-1.1.2.mod.js"></script>
Now it’s time to modify the JavaScript. To achieve the rollover effect, I first added a mouseover configuration option with a setting of true to the plugin below the loop: false configuration option in the // other section.
// other disabledClass: 'disabled', hoverClass: null, clickable: true, activeClass: 'active', easing: 'swing', loop: false, mouseover: true,
Next I added the following to the self.onReload(function() below the // hovering section.
// mouseover if (conf.mouseover) { self.getItems().each(function(i) { $(this).unbind("mouseover").bind("mouseover", function(e) { if ($(e.target).is("a")) { return; } return self.click(i); }); }); }
The full modified Scrollable plugin file can be downloaded at: http://dev.cmportals.com/ssrc/ResourcesjQuery/tools.scrollable-1.1.2.mod.js
Here is how the page looks now.

Problems
Once I added in the MouseOver functionality I noticed that my circular items were not cloning properly when I’d rollover the items. I tried fixing this by modifying the circular plugin however I still haven’t been able to get it working 100%. I’m still working on fixing the circular problem therefore I am not including the modifications in this article.
Next Steps
In Part Two of this series, I will demonstrate creating the MouseOver event to change the box size, position, and add the boxed title.
Guest Author: Christina Wheeler
Christina Wheeler is a Senior SharePoint Consultant for Summit 7 Systems and Founder of CM Portal Solutions, LLC based in Malvern, PA. With over 10 years of experience in the industry, Christina has a background in graphic design, web development, custom development, and has been working with SharePoint since May 2005. Christina has a strong passion for technology and photography who enjoys sharing and learning with the community.
- Avatars, The Movie - Now That's a Real Navigation System
- Avatar, the Movie: SharePoint Navigation Re-creation Introduction
- Avatar, the Movie: SharePoint Navigation Re-creation - Part 1
Nice! I like it so far! Keep up the great work!
This is really a cool project. Looking forward to the next steps!
Noted that I doesn’t seem to display properly in Google Chrome.
Greg – Christina and I discussed the Chrome/Safari/Opera situation. For the first iteration, we’re trying to get everything to work in IE7 and IE8. If enough people are interested, after the final solution, we might put together a team to make this solutions cross-browser. — Mark
Christina,
Nice Job! and Great! Post.
When I am trying t run in my IE 7 browser, it is not rendering background image.
Regards,
Venky
Hi Venky,
I tested in IE 7 and the background image rendered fine. My styling is based on MOSS 2007 and I have not tested in WSS 3.0 or any other SharePoint versions. Verify that your image path is correct and that your site is not calling a different class. You may want to use the IE Developer toolbar for debugging your styling and for checking class inheritance. This tool is included in IE 8 but has to be downloaded and installed for IE 7. Also, when I have problems with class inheritance, I’ve had to add !important; to my class property values that I wanted to force to load last.
- Christina
This is great stuff! Looking forward to reading more.
Awesome!
Kudos to jQuery for giving some extra life to [table] SharePoint [/table]
Can we get a tool tip when we mouse over on a item in a sharepoint list.
Tool tip should contain a particular column value in that list.
Please help me in this if it is possible.
Thanks a bunch in advance
Bharath – Post your question in the jQuery forum on Stump the Panel and we’ll take a look at it there. — Mark
Great post and it works a treat. I’m looking forward to part 2.
I have enjoyed recreating this in my sandbox. your instruction was very easy to follow. will you be posting part 2 soon? Thanks for sharing.