jQuery: Simple Fixed Previous & Next Buttons

Tweet

The following article has been kindly submitted by Ben Rogerson. It shows a simple way of creating Previous & Next buttons with a short jQuery snippet and some CSS. I hope you like it!
 
Here's a simple little usability update you can quickly apply to your existing blog or results pages.

It will allow users that have a slightly larger running resolution to lessen the time taken to find the 'next page' and 'previous page' buttons which are normally at the bottom of your page.

The first task is to make sure your existing previous and next buttons at the bottom of the page have a class or id attached to them. This is so we can easily target them for replication.

In my case the code for the previous and next buttons look like this:

<a class="prev_page" href="page1.html" title="View Previous Page">Previous Page</a>
<a class="next_page" href="page3.html" title="View Next Page">Next Page</a>

So now that we've located the class names we can add some chained jQuery:

<script type="text/javascript">
<!--
$(document).ready(function(){

if($(window).width() > 1120 ){
$('.prev_page').clone().prependTo('body').addClass('prev_big').html('&lsaquo;');
$('.next_page').clone().prependTo('body').addClass('next_big').html('&rsaquo;');
};

});
// -->
</script>

This jQuery code first targets the button then makes a copy of it and inserts it at the top of the page, directly below the body. For aesthetics, the text of the button is then swapped out with an arrow (‹ and ›).

Now that we've made copies of the buttons it's now time to style them appropriately using CSS. I chose to make them large and added a little CSS3 goodness at the same time.

.prev_big,
.next_big {
background-color: #EEE;
color: #DDD;
font-size: 100px;
font-weight: bold;
width: 50px;
height: 200px;
line-height: 200px;
position: fixed;
text-shadow: 0 1px 0 #FFF;
top: 35%;
z-index: 3;
text-decoration:none;
-moz-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
}

.next_big {
border-bottom-left-radius: 15px;
border-top-left-radius: 15px;
padding: 0 0 15px 20px;
right: 0;
}

.prev_big {
border-bottom-right-radius: 15px;
border-top-right-radius: 15px;
padding: 0 20px 15px 0;
left: 0;
}

.prev_big:hover,
.next_big:hover {
text-decoration:none;
background:#555;
color:#FFF;
font-size:120px;
text-shadow:none;
}

.prev_big:hover {padding-left:10px}
.next_big:hover {padding-right:10px}

Naturally, the CSS transitions won't work in Internet Explorer however you can make the border-radius and text-shadow display in IE with IE-CSS3.

With this code in place I hope it helps to make your site a little more usable.

Example

›

About the author

A twenty-something web designer and developer living in Adelaide, Australia with a passion for all things happening "behind the scenes" of the web.

http://www.facebook.com/rogie.web
http://www.benrogerson.com.au