Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From \$16.50/m

# Extreme Makeover: jPaginator CSS3 Edition

jPaginator is a nifty jQuery plugin by Remy Elazare which combines pagination and scrolling in a simple user interface. Remy recently asked me if I would like to use it for something on Webdesigntuts+ and I figured it would be a great candidate for a style make-over.

Pagination often involves lots of page links, which themselves need navigating along before you can select them. jPaginator aims to improve the user experience of long pagination lists by offering a slider to animate links left and right. You can also use the control links either side of the pagination, or even rely on the good ol' arrow keys.

## Introduction

Check out jPaginator in its raw state. Uncomplicated and perfectly usable, but let's see if we can't jazz it up a little. We're going to use a few CSS3 techniques, that's what we're aiming to practice with this tut, but we'll make sure that the resulting interface is at least usable for non-supportive browsers.

## What's Covered?

Noteworthy CSS:
multiple backgrounds
:after selector
sprite sheet use

Browser Support (without workarounds):
IE9+
FireFox 3.6
Safari 1.0
Chrome 1.3
Opera 10.5

## Step 1: The PSD

I could write a tutorial about how the .psd was pulled together, then continue to explain the markup and styling, but there's no way you'll pay attention that long! Instead, just grab the source download and play with the file yourself.

Worth mentioning is the "Tactile Noise" background texture, downloaded from Atle Mo's very useful subtlepatterns.com.

## Step 2: New HTML Document

Let's create a new document, then reference a couple of files which we'll need to use the jPaginator plugin.

We begin with a basic HTML5 document, reference jQuery (in this case hosted by Google), then the jQuery UI slider plugin on which jPaginator is reliant, and finally the jPaginator.js script itself.

Having done that, we link to the jPaginator.css file (which gives us the working slider base) and then finally our own custom.css which we'll use to style the whole lot to our hearts' desire.

Here's what your document structure should look like at this point:

## Step 3: Initiate the jPaginator

It's time to add our jPaginator to the page. We begin with the markup, slotted into the body of our document:

The div "pagination" is what we're going to target, this is where our jPaginator will be added. The div element before "pagination" isn't crucial, but we're going to use it to illustrate the pagination actually doing something, by changing the content within it each time a button is clicked.

Also worth noting are the control buttons, two links on either side of the "paginator_p_wrap" which we'll use to control our pagination. These are entirely optional - we'll assign them a role in the parameters when we call jPaginator. Finally, we include the markup for the slider.

The whole lot is then wrapped in a "container" div just to help us display things nicely.

Now we need to call jPaginator within the <head>:

Here you can see jPaginator being applied to our div "pagination", fine-tuned with just a couple of the many parameters available to us. We've set the amount of pages to 64, the margin around each link to 5px and the length (however many links will be visible) to 8. Moving on, we list the 4 control elements we added to our markup - now they'll actually do something. Lastly, a function (provided by Remy) to change the content of our div "page" when we get clicking.

Having completed the steps so far you should have the whole thing working in its most basic form.

## Step 4: Let the Games Begin

In order to accurately build our elements we should first make sure we know how big everything is. Let's take a look at the various dimensions of our design:

To sum up, we have the pagination buttons (they aren't button elements, but we'll refer to them as buttons from this point on) which are 30x30px, the container (including highlights and shadows) which is 110px high and the nav links which are 40px wide.

That covered, let's move on to some prettying up..

## Step 5: Style Sheet

The buttons for our pagination are created dynamically, so if you deleted the commented out example you'll need to use Firebug or some other browser inspector to see how things are put together.

Having ascertained that our buttons are actually divs with a class of "paginator_p" we at least know what we'll be styling. We can also see that a lot of inline styles are added to these elements by jPaginator, though they all determine layout as opposed to aesthetics.

Let's add some rules to our stylesheet, to get the ball rolling..

A solid start. Before we begin messing about with the buttons, we set a background image for the body and add some styling to our "container" div. We've specified that our buttons are to be 30x30px, we've set the line-height within them to match (which will position our numbers more or less vertically centered) and we've applied a text-align: center to deal with the numbers' horizontal alignment. So, we have nice square buttons, with perfectly centered numbers. Then we fatten the text up and color it according to our design.

## Step 6: Pretty Colors

Moving on, let's apply the correct background to our buttons. We'll use CSS3 gradients, which will see us catered for by all modern browsers - even IE10. To safeguard, we'll have a solid color and a gradient image fallback for uncooperative browsers. We'll also add a subtle drop shadow to the text within our button, as dictated by our design.

Note: if you have 5 minutes, check out Paul Irish's CSS3,please! for more info on CSS3 and supporting browsers.

## Step 7: The Circle of Life

We already specified that our links were 30px squares, so adding rounded corners of 15px will give us perfect circles. Off you go then..

## Step 8: Pop!

We're just a couple of small details away from having buttons like those in the .psd. Let's add a box shadow to make our element pop. In fact, let's add two.

We'll give each link a dark shadow, acting as a dark glow around the circle. They'll be spread 1px from the circle, then blur a further 4px. I've specified the color exactly (thanks to the dropper tool in Photoshop) but we could also have used an rgb value with opacity here.

Having applied our first box shadow, we can now apply a second (gotta love box shadows) to act as our highlight-glow-thing. You'll see the second set of values preceded by "inset" which forces the glow inward. No blur, no x-axis offset, but offset 1px down so the glow just skims the top of our circles.

Here's what the resultant css looks like for our "paginator_p" div:

## Step 9: Milestone #1

Right then, we have our links in their default state - looking good! We now need to add a bit of breathing space to the elements around the links:

The "paginator_p_bloc" is the parent of all our buttons, and it needs a bit of padding (top and bottom) to allow for the drop shadow we've applied around them. What you now have should look like our first milestone.

## Step 10: Hover State

Let's apply a nice hover state to our buttons, just as we set out in the .psd.

So what have we done here? Well, we've darkened the numbers' color and given them a pale drop shadow. We've altered the values of the background gradient (to brighten things up) and we've subtly altered the highlight box-shadow at the top of the links. The dark glow drop shadow remains the same, but we have to declare it again if it's not to be ignored.

## Step 11: Selected State (Milestone #2)

We've been kindly furnished with a selected class, so let's style it as if the button has been depressed (by which I mean it's been pushed inwards, it's not sitting in the bathroom rocking back and forth, sobbing into a pot of peanut butter).

We've included a selected:hover state so that the button doesn't change when hovered over. So what else have we done here? We changed the color and text shadow again, reversed the gradient to give a concave feel and reduced the dark glow (suggesting it's no longer sticking out so much). Simple. What you now have should look like our second milestone

## Step 12: The Slider

Having sorted out the buttons, let's turn our attention to the slider. It's relatively straight-forward; we need to alter the margins to have it spaced properly, give it a background and make it the correct height. It needs to be 10px high, according to our design, so we'll give it 8px of height plus a 1px border all around to pad it out. We give the top and left borders a dark color, then the bottom and right borders a pale color to give an impression of relief.

Lastly, round the corners on either end - we now have ourselves a nice slider rail.

## Step 13: The Knob

Yes, knob. It seemed like a good name at the time, but I suppose I could have stuck with "handle". Anyway, let's add some style to that thing you click and drag along the slider rail..

Most of this styling will look familiar as it's based on our buttons' default state; the pre-defined width and height, the gradient background, the rounded corners and the various box-shadows.

The only other noteworthy rules are outline:none which will remove the dotted outline in Firefox, the y-axis positioning to alter where the knob sits vertically on the slider rail, and the margin-left: -10px; which nudges the knob left exactly half its width. Check out the image below to find out why:

Thanks to Alex for pointing out this bug!

We're making progress, check out our third milestone.

## Step 14: Controls

Continuing on, let's tidy up the controls on either side of the pagination container.

For the sake of simplicity we're going to use images, so jumping back into Photoshop prepare yourself a sprite sheet for the link icons. I already started compiling a spritesheet with the fallback gradients, so I'll just add to that, placing everything logically for referencing in the CSS. If you opt to throw everything randomly into your spritesheet, you can always locate your images thanks to services such as Sprite Cow.

Each icon state is 40x40px and we'll oppose the hover states vertically. As you can see from the styling below, each button is a 40x40px block and has the appropriate image applied, depending on its position and state. The css is commented, so I'll shut up now.

Very good, take a look at what's been done so far in milestone #4.

## Step 15: Sinking Feeling

There are really just a couple more details we need to take care of. Our buttons are too high, and they disappear into nothingness when they hit the edge of the parent container, which is a bit lackluster. Our design takes care of this by suggesting they tuck underneath a slot in the background, so let's see if we can translate that into the browser.

Take a look at the image below. In it, you'll see that we need four images to deal with each of the highlights and shadows. The highlights belong besides the controls either side of the container, the shadows belong in the container itself, so we need to make it 110px high.

Let's first take care of (increase) the padding on our container element:

Having done that, our pagination has been pushed down into its rightful position.

## Step 16: Nip and Tuck

OK, let's slot these shadows in (I've once again added them to the sprite sheet):

..and now, let's deal with the highlights using the :after selector (supported in all major browsers)

The :after selector effectively generates an object within our page. We can then manipulate that element just like any other, bearing in mind that it inherits properties from its parent. In our case, owing to extensive styling of the parent object, we've opted for absolute postioning enabling us to pinpoint where the highlight appears.

Some additional styles to tidy up the page content, then we're done.

Excellent! We've reached milestone #5, the finishing line unless you want to cater for older browsers.

## Step 17: Backwards Compatibility

I'm going to leave this to you. The techniques we've practiced were exactly that; techniques for practicing and I've listed the browser compatibility in the introduction. However, if you want to go further and make sure everything is tickety-boo in older browsers you have a few options open to you. We made sure that our gradients were covered by including fallback images in the sprite sheet. However, fixing multiple background images, box-shadows, text-shadows and border-radius isn't quite as straight-forward.

Employing CSS3PIE will help you out with most of those things (all apart from text-shadow), or you could add the buttons to the spritesheet (actually, I've already done that for you) and apply them using a browser-specific stylesheet. Target IE8 and lower using a conditional statement such as the one below and modern browsers will be non the wiser.

## Conclusion

Thanks for following along, I hope you manage to pull some useful ideas from what you've read. Also, a big thanks to Remy for volunteering jPaginator as a guinea pig - remember to check out its development at GitHub!