I've got a section slider on my web page, but i can't get it to actually scroll. i've got all the text in the box and added the links, but the links currently don't do anything and i can't work out where i'm going wrong.

Here's the html:

<h2>Rome - <span class="link" onmousedown="slideContent('Section-1')">Colosseum</span> | <span class="link" onmousedown="slideContent('section-2')">Trevi Fountain</span> | <span class="link" onmousedown="slideContent('section-3')">The Spanish Steps</span> - <span class="link" onmouseover="scrollContent('slider',-1)" onmouseout="cancelScroll('slider')">Up</span> | <span class="link" onmouseover="scrollContent('slider',1)" onmouseout="cancelScroll('slider')">Down</span></h2>
  <div class="slider">
  <div class="slidercontent" id="slider">
	 <div id="section-1" class="section upper">
	<strong>Colosseum:</strong> It is an eliptical amphitheatre in the centre of the city of Rome, Italy and was the largest ever built in the Roman Empire. Its construction started between 70 and 72AD under the emperor Vespasiam and was completed in 80AD under Titus. The Colosseum was capaple of seating 50,000 spectators and was used for gladiatoral conquests and public spectacles. Mock sea battles, re-enactmenents of famous battles, animal hunts, among other things, were also held there as well.
	 </div>
	 <div id="section-2" class="section upper">
		<strong>Trevi Fountain:</strong> It is 25.9 metres high and 19.8 metres wide, making it the largest Baroque fountain in the city. The fountain is at the junction of 3 roads and marks the terminal point of one of the ancient aqueducts that supplied water to ancient Rome.
	 </div>
	 <div id="section-3" class="section">
		<strong>The Spanish Steps:</strong> They climb a steep slope between the Piazza di Spagna at the base and the Piazza Trinita dei Monti. It is the longest and widest staircase in all of Europe. There are 138 steps and they were built between 1723 and 1725. Initially the steps were divided into two parts - the French Square and the Spanish Square.
	 </div>
  </div>
  </div>

 

and here's the style sheet:

h2 {font-size: 11pt; margin-left:150px; margin-top:40px}
.link {cursor:pointer; color:#666}
.link:hover {color:#000}
.slider {position:relative; overflow:hidden; border:2px solid #9ac1c9; margin-left:100px; height:225px; width:600px; background:#eef5f6; margin-bottom:20px}
.slidercontent {position:absolute; margin-left:5px; width: 590px}
.slidercontent .upper {border-bottom:1px solid #9ac1c9}
.section {padding:10px}

On your first 'link', you have

onmousedown="slideContent('Section-1')

but the actual id is 'section-1' (lowercase).

Can you post the javascript too?

here's the java script:

var SLIDETIMER = 3;
var SLIDESPEED = 3;
var SCROLLTIMER = 3;
var SCROLLSPEED = 3;
var STARTINGOPACITY = 40;

// handles section to section scrolling of the content //
function slideContent(id,prefix,timer) {
 var div = document.getElementById(id);
 var slider = div.parentNode;
 clearInterval(slider.timer);
 slider.section = parseInt(id.replace(/\D/g,''));
 slider.target = div.offsetTop;
 slider.style.top = slider.style.top || '0px';
 slider.current = slider.style.top.replace('px','');
 slider.direction = (Math.abs(slider.current) > slider.target) ? 1 : -1;
 slider.style.opacity = STARTINGOPACITY * .01;
 slider.style.filter = 'alpha(opacity=' + STARTINGOPACITY + ')';
 slider.timer = setInterval( function() { slideAnimate(slider,prefix,timer) }, SLIDETIMER);
}

function slideAnimate(slider,prefix,timer) {
 var curr = Math.abs(slider.current);
 var tar = Math.abs(slider.target);
 var dir = slider.direction;
 if((tar - curr <= SLIDESPEED && dir == -1) || (curr - tar <= SLIDESPEED && dir == 1)) {
slider.style.top = (slider.target * -1) + 'px';
slider.style.opacity = 1;
slider.style.filter = 'alpha(opacity=100)';
clearInterval(slider.timer);
if(slider.autoscroll) {
  setTimeout( function() { autoScroll(slider.id,prefix,timer) }, timer * 1000);
}
 } else {
var pos = (dir == 1) ? parseInt(slider.current) + SLIDESPEED : slider.current - SLIDESPEED;
slider.current = pos;
slider.style.top = pos + 'px';
 }
}

// handles manual scrolling of the content //
function scrollContent(id,dir) {
 var div = document.getElementById(id);
 clearInterval(div.timer);
 var sections = div.getElementsByTagName('div');
 var length = sections.length;
 var limit;
 if(dir == -1) {
limit = 0;
 } else {
if(length > 1) {
  limit = sections[length-1].offsetTop;
} else {
  limit = sections[length-1].offsetHeight - div.parentNode.offsetHeight + 20;
}
 }
 div.style.opacity = STARTINGOPACITY * .01;
 div.style.filter = 'alpha(opacity=' + STARTINGOPACITY + ')';
 div.timer = setInterval( function() { scrollAnimate(div,dir,limit) }, SCROLLTIMER);
}

function scrollAnimate(div,dir,limit) {
 div.style.top = div.style.top || '0px';
 var top = div.style.top.replace('px','');
 if(dir == 1) {
if(limit - Math.abs(top) <= SCROLLSPEED) {
  cancelScroll(div.id);
  div.style.top = '-' + limit + 'px';
} else {
  div.style.top = top - SCROLLSPEED + 'px';
}
 } else {
if(Math.abs(top) - limit <= SCROLLSPEED) {
  cancelScroll(div.id);
  div.style.top = limit + 'px';
} else {
  div.style.top = parseInt(top) + SCROLLSPEED + 'px';
}
 }
}

// cancel the scrolling on mouseout //
function cancelScroll(id) {
 var div = document.getElementById(id);
 div.style.opacity = 1;
 div.style.filter = 'alpha(opacity=100)';
 clearTimeout(div.timer);
}

// initiate auto scrolling //
function autoScroll(id,prefix,timer,restart) {
 var div = document.getElementById(id);
 div.autoscroll = (!div.autoscroll && !restart) ? false : true;
 if(div.autoscroll) {
var sections = div.getElementsByTagName('div');
var length = sections.length;
div.section = (div.section && div.section < length) ? div.section + 1 : 1;
slideContent(prefix + '-' + div.section,prefix,timer);
 }
}

// cancel automatic scrolling //
function cancelAutoScroll(id) {
 var div = document.getElementById(id);
 div.autoscroll = false;
}

Hi, I've just copied and pasted your html,css and js and it all seems to work fine for me