I am a freelancer and looking for work

When you have limited space on a page but require more text than the space allows, a nice trick to to have a scrolling effect for that div only. I personally don’t like having a scroll bar down the right hand side. When you’ve put in the effort to create a wonderful design, having a grey scrolling bar on the right hand side of an element can take the eye away from when you want it.

A neat way around this is to have a custom scrolling effect using jQuery’s .animate. The demo page for the following demo is at http://www.codemonkeysteve.com/tutorials/demo_scrolling.php

HTML/CSS

To start,you need to have a div to contain the content to scroll. Let’s give it a class of  ’contentHolder’.  The important part is to set the overflow:hidden CSS property.  Give it the following style.

<style>
.contentHolder {
overflow:hidden;
height:320px;
display:block;
width:490px;
}
</style>

Within that div, place your content. Now you need up and down buttons. Images will be fine but for the demo, I’ve anchored simple text. Give the up button a class of ‘page_up’ and the down button a class of ‘page_down’.

<a href=’#’ class=’page_down’>down</a>
<a href=’#’ class=’page_up’>up</a>

Javascript

Within your javascript, you need to calculate the height of the element we’re to be scrolling. At the same time, we decide whether the up and down buttons are to be available. The following function will assign the number of possible pages to a variable ‘contentPages’. This variable should be initialised. At the same time, initialise ‘contentPage’ which shall hold the current page we are scrolled to.

function setPageArrows() {
contentPages = Math.ceil($(‘.pageContent’).height() / 150) -1;
$(“.page_up, .page_down”).addClass(“disabled”);

if (contentPage > 1) {
$(“.page_up”).removeClass(“disabled”);
}
if (contentPage < contentPages) {
$(“.page_down”).removeClass(“disabled”);
}
}

//initialise the starting page and the number of pages
var contentPage = 1;
var contentPages = 1;

Now we need to attach the animate functions to the up and down buttons. In your jQuery ready function, create a click event for each button. At the same time, call the ‘setPageArrows()’ function to set the initial state of the buttons. This is done with the code below.

$(document)
.ready(function() {
/* Page scroll */
$(“.page_up”).click(function() {
if (contentPage > 1) {
contentPage–;
$(“.pageContent”).animate({
“margin-top” : “+=150px”
}, “slow”,function() {
setPageArrows();
});

}

});

$(“.page_down”).click(function() {
if (contentPage < contentPages) {
contentPage++;
$(“.pageContent”).animate({
“margin-top” : “-=150px”
}, “slow”,function() {
setPageArrows();
});
}
});
setPageArrows();
});

Again, the demonstration code can be found at http://www.codemonkeysteve.com/tutorials/demo_scrolling.php