jQuery Content Slider Tutorial

Simple Demo (Firefox, IE7, IE6, Opera, Safari) | Demo with content | Source Code

LavaBlast launched a new front page recently and we have incorporated a new jQuery slider. You can see it in action below (in the Flash animation) or you can go see it directly on our website home page.

Scroll down to find out how this little puppy was implemented!

HTML & CSS

HTML

This is the basic ASP.NET in the ASPX page:

<divclass="FrontMenu">

<divclass="Bar">

<asp:RepeaterID="Repeater"runat="server"onitemdatabound="Repeater_ItemDataBound">

<ItemTemplate>

<spanclass="item">

<ahref="#"class="jFlowControl">

<asp:LabelID="lbl"runat="server"/>

</a>

<divclass="spike"style="z-index:999999">

</div>

<divclass="right">

</div>

</span>

</ItemTemplate>

</asp:Repeater>

</div>

<divclass="Panel">

<div><cms:ParagraphID="paragraph1"runat="server"ContentName="frontMenu1"/></div>

<div><cms:ParagraphID="paragraph2"runat="server"ContentName="frontMenu2"/></div>

<div><cms:ParagraphID="paragraph3"runat="server"ContentName="frontMenu3"/></div>

<div><cms:ParagraphID="paragraph4"runat="server"ContentName="frontMenu4"/></div>

<div><cms:ParagraphID="paragraph6"runat="server"ContentName="frontMenu5"/></div>

</div>

</div>

This is pretty simple HTML. Everything is enclosed in the main div with the css class FrontMenu. We have the animated bar at the top and the content panel underneath it. The menu bar is generated by a simple repeater control bound to data in our ASP.NET page. Each menu item is a span containing a link that we’ll use to change the selected menu item. The Panel div contains multiple dynamic paragraphs from our content management system (SubSonic CMS). You could easily change this code to bind to data from another source.

Here is the code behind for this control. We kept it pretty simple:

publicpartialclass FrontPageMenu : UserControl

protectedvoid Page_Load(object sender, EventArgs e)

if (!IsPostBack)

            List<string> list = new List<string>();

            list.Add("How can we help?");

            list.Add("Our Products");

            list.Add("Hot Features");

            list.Add("Testimonials");

            list.Add("Read");

            Repeater.DataSource = list;

            Repeater.DataBind();

protectedvoid Repeater_ItemDataBound(object sender, RepeaterItemEventArgs e)

if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)

            Label lbl = e.Item.FindControl("lbl") as Label;

            lbl.Text = (string)e.Item.DataItem;

The following picture shows how the html menu item elements are rendered. The CSS section of this article will dive deeper in the inner workings of the menu.

JQuery

jFlow

We used jFlow to scroll our panels when we click on a menu item. The code was fairly straightforward to use. We included this script in our user control.

$(".FrontMenu").jFlow({

    slides: ".FrontMenu .Panel",

    width: "974px",

    height: "344px",

    duration: 300

});

And then we included a simple reference to our script manager.

<asp:ScriptManagerProxyID="proxy"runat="server">

<Scripts>

<asp:ScriptReferencePath="~/js/jquery.flow.1.0.min.js"/>

</Scripts>

</asp:ScriptManagerProxy>

We could have used Next and Previous buttons but decided not to.

IE6 Problems

This menu did require some basic jQuery. Except for the scrolling animation, we could have built almost all of this in pure CSS thanks to the hover pseudo-class. However, Internet Explorer 6 came back from the grave to haunt us… As we still have some visitors who are using IE6, we could not afford to let our home page break down in IE6. Microsoft gods: please please, hear our prayers and find a way to erase IE6 from the face of earth. But hey, we've got work to do and can't wait five years for the browser to die like IE 5 did.

We discovered that using a:hover in IE6 to change our background image will make the browser crash. We used IETester to test the menu in IE6: it made IETester crash. We then tried Virtual PC running Win98 and IE6: Internet Explorer crashed again when we hovered over one of the links with a:hover CSS styles.

The solution to this problem was simply to apply a style to the hovered link (.hover). Then we could easily style the children of this element to our liking without breaking IE6.

$(".FrontMenu .Bar a").mouseover(function() { $(this).addClass("hover"); });

$(".FrontMenu .Bar a").mouseout(function() { $(this).removeClass("hover"); });

To change the style of the selected item we added the css class .sel to the span.item (the parent of the clicked link). First of all, when a link is clicked, remove the currently selected item. Second, set the parent of the link as the current selected item. It’s important to return false as otherwise the browser will follow the link and scroll to the top of the page.

$("div.FrontMenu div.Bar a").click(function()

    $("div.FrontMenu div.Bar").children("span.sel").removeClass("sel");

    $(this).parent().addClass("sel");

returnfalse;

});

CSS

Let’s take a deeper look at the menu’s CSS. Let’s start with the FirstMenu class which is not too complicated.

.FrontMenu

    padding: 5px 5px 0px 5px;

    margin-left: 2px;

    margin-top: -4px;

.FrontMenu .Bar

    background: #F6ECA4 url(images/MainPage/bar.jpg) no-repeat top left;

    width: 980px;

    height: 48px;

    position: relative;

.FrontMenu .Bar a

    color: #FFFFFF;

    font-size: large;

    font-family: Tahoma;

    position: relative;

    top: 7px;

    display: block;

    text-decoration: none;

    padding-right: 6px;

    margin-right: -6px;

    cursor: pointer;

Now let’s take a closer look at the Bar menu. Here are the images we used to style our menu items.

CSS

Images

.FrontMenu .Bar span.sel

selLeft.gif

selRight.gif

spike.gif

.FrontMenu .Bar a.hover span

hoverLeft.gif

hoverRight.gif

Like you saw in the jQuery part, we change the class in JavaScript to bypass some IE6 issues, so you should not be surprised by the CSS.

The code for the main span for each menu item:

.FrontMenu .Bar span.item

    line-height: 30px;

    margin: 0px 0px;

    float: left;

    position: relative;

    display: inline;

    cursor: pointer;

    width: 188px;

    text-align: center;

    margin-left: 6px;

Here is the code when you hover over the link inside the menu item:

/* We have to handle hover with jQuery because :hover makes IE6 crash when we change the background image. */

.FrontMenu .Bar a.hover

    background: transparent url(images/MainPage/hoverRight.gif) no-repeat top right;

    height: 30px;

/* We have to handle hover with jQuery because :hover makes IE6 crash when we change the background image. */

.FrontMenu .Bar a.hover span

    background: transparent url(images/MainPage/hoverLeft.gif) no-repeat top left;

    height: 30px;

    display: block;

Like you can see, the link contains the background image and the span inside the link contains the . This enables the link to have any length and the control will resize easily. If you ever get a link that is wider than the left image, simply make the image wider...

Then we only needed the CSS to change the menu item to make it look selected.

.FrontMenu .Bar span.sel a:hover { background: none; padding-left: 0px; margin-left: 0px; }

.FrontMenu .Bar span.sel a:hover span { background: none; padding-left: 0px; margin-left: 0px; }

.FrontMenu .Bar span.sel

    background: transparent url(images/MainPage/selLeft.gif) no-repeat top left;

    height: 48px;

.FrontMenu .Bar span.item .spike, .FrontMenu .Bar span.sel .spike

    background: transparent url(images/MainPage/spike.gif) no-repeat top left;

    display:none;

    position: absolute;

    top: 44px;

    left: 50%;

    margin-left: -11px;

    width: 22px;

    height: 17px;

    z-index: 9999;

.FrontMenu .Bar span.sel .spike

    display: block;

.FrontMenu .Bar span.sel .right

    background: transparent url(images/MainPage/selRight.gif) no-repeat top right;

    position: absolute;

    height: 48px;

    width: 4px;

    right: 0px;

    top: 0px;

.FrontMenu .Bar span.sel a { color: #d43300; }

The parent span for the menu item with the .sel class contains the image and the div.right inside this span contains the image. We have to make sure too that the hover style does not get applied when the item is selected.

The spike is applied in absolute position in the center. To do that in absolute position, you have to set the following:

left: 50%;

margin-left: -11px;  // <—This is the width/2

width: 22px;

Even with a higher z-index, we were not able to make the spike go on top of the content panel in IE6. Therefore, we had to put a margin on top of content panel just to make sure the spike was not overlapping the content panel below: