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)
• http://dev.cmportals.com/ssrc/ResourcesjQuery/jquery-1.3.2.min.js
• 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)
• http://dev.cmportals.com/ssrc/ResourcesScripts/images/avatar_movie_based_ubisoft_game_concept_art_1.jpg
• http://dev.cmportals.com/ssrc/ResourcesScripts/images/blank.gif

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:

1. Clicking on the content area
2. Clicking on actions buttons
3. Using left/right arrows on your keyboard
4. 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.