asked on

Scrollbar on web page slideshow not working

Hi,

I need help with this. I can't get the scrollbar to move with either the mouse or the keyboard, but I'm not sure what I've done incorrectly.

Thanks

/*
   New Perspectives on HTML, XHTML, and DHTML 4th Edition
   Tutorial 15
   Case Problem 2

   Author:   
   Date:     
   Filename: flibrary.js



   Functions List:

   getStyle(object, styleName)
      Returns the computed style value for a specified styleName applied to
      an object.

   addEvent(object, evName, fnName, cap)
      Assigns an event handers to object where evName is the name of the event,
      fnName is the name of the function, and cap is the capture phase.
      This function works for both the IE and W3C event models.
   
   removeEvent(object, evName, fnName, cap)  
      Removes an event handers from object where evName is the name of the event,
      fnName is the name of the function, and cap is the capture phase.
      This function works for both the IE and W3C event models.

*/


function getStyle(object, styleName) {
   if (window.getComputedStyle) {
      return document.defaultView.getComputedStyle(object, null).getPropertyValue(styleName);
   } else if (object.currentStyle) {
      return object.currentStyle[styleName]
   }
}


 function addEvent(object, evName, fnName, cap){
if(object.attachEvent)
object.attachEvent("on"+evName, fnName);
else if (object.addEventListener)
object.addEventListener(evName, fnName, cap);
}

function removeEvent(object, evName, fnName, cap){
if(object.detachEvent)
object.detachEvent("on"+evName, fnName);
else if(object.removeEventListener)
object.removeEventListener(evName, fnName, cap);
}

Open in new window

/*
   New Perspectives on HTML, XHTML, and DHTML 4th Edition
   Tutorial 15
   Case Problem 2

   Author:  
   Date:    

   Filename: slideshow.js


   Global Variables:
  
   scrollButton
      References the scrolling button in the slide show

   diffX
      Stores the horizontal distance in pixels between the
      mouse pointer when the scrolling button is clicked
      and the left edge of the scrolling button.

   Functions List:

   setup()
      Initializes the contents of the Web page. Creates
      event handlers for the mouse and keyboard events

   grabIt(e)
      "Grabs" the scrolling button to set up the
       horizontal scrolling of the slide show

   moveIt(e)
      Moves the scrolling button horizontally through
      the scrollbar

   showSlide(x)
      Shows the image corresponding the to the x coordinate
      on the scrollbar

   dropIt(e)
      Drops the scrolling button after the user releases the
      mouse button

   keyShow(e)
      Uses the left and right arrow keys to move the scrolling
      button through the scrollbar

*/


var scrollButton, diffX;
window.onload = setup;

function setup(){
scrollButton = document.getElementById("button");
scrollButton.style.top = getStyle(scrollButton, "top");
scrollButton.style.left = getStyle(scrollButton, "left");
scrollButton.style.cursor = "pointer";
addEvent(scrollButton, "mousedown", grabIt, false);
addEvent(document, "keydown", keyShow, false);
}

function grabIt(e){
var evt = e||window.event;
var mouseX = e.target||evt.clientX;
diffX = (scrollButton.style.left - mouseX);
addEvent(scrollButton, "mousemove", moveIt, false);
addEvent(scrollButton, "mouseup", dropIt, false);
}

function moveIt(e){
	var evt = e||window.event;
	var mouseX = e.target||evt.clientX;
	var buttonPosX = mouseX + diffX;
}
function showSlide(x){
	if(x<20) x = 20;
	if(x>299) x = 299;
	x = scrollButton.style.left;
	var i = Math.floor(x-20)/31;
	document.getElementByID("photo").src = image[i].jpg;
}

function dropIt(e){
	removeEvent(scrollButton, "mousemove", moveIt, false);
}

function keyShow(e){
var evt = e||window.event;
var key = e.target||evt.keyCode;
var buttonPosX = scrollButton.style.left;
if(key==-37) buttonPosX = buttonPosX-31;
else if(key==39) buttonPosX = buttonPosX +31;
showSlide(buttonPosX);	
}

Open in new window

<?xml version="1.0" encoding="UTF-8" ?>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- 
   New Perspectives on HTML, XHTML and DHTML 4th Edition
   Tutorial 15
   Case Problem 2
 
   Badger Aviation
   Author:  Jennifer Colpitts         
   Date:    04/26/2011         
 
   Filename:         badger.htm
   Supporting files: back.jpg, bar.jpg, corner.jpg, functions.js
                     image0.jpg-image9.jpg, links.jpg, logo.jpg, styles.css
-->
   <title>Badger Aviation</title>
   <link href="styles.css" rel="stylesheet" type="text/css" />
<!--
Step 2
-->
   <script src = "flib.js" type = "text/javascript"></script>
   <script src = "slide.js" type = "text/javascript"></script>
</head>
 
<body>
   <div id="logo"><img src="logo.jpg" alt="Badger Aviation" /></div>
   <div id="corner"><img src="corner.jpg" alt="" /></div>
   <div id="links"><img src="links.jpg" alt="" /></div>
   <div id="title"><h1>Flight Photos</h1></div>
   <div id="photos"><img id="photo" name="photo" src="image0.jpg" alt="" /></div>
 
   <div id="bar">
      <div id="button">&nbsp;</div>
   </div>
 
   <div id="message">
      See photos from one of our popular Dane County tours. Scroll through 
      the slide show using your mouse or the Right and Left arrows on your keyboard.
   </div>
 
</body>
</html>

Open in new window

image0.jpg
image1.jpg
image2.jpg
image3.jpg
image4.jpg
image5.jpg
image6.jpg
image7.jpg
image8.jpg
image9.jpg
links.jpg
logo.jpg
back.jpg
bar.jpg
corner.jpg

ASKER CERTIFIED SOLUTION

Tom Beck

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial