[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1326
  • Last Modified:

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
0
Kolpitz
Asked:
Kolpitz
1 Solution
 
Tom BeckCommented:
Slideshow.js code attached.
/*   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 slide = new Array('image0.jpg','image1.jpg','image2.jpg','image3.jpg','image4.jpg','image5.jpg','image6.jpg','image7.jpg','image8.jpg','image9.jpg');

var IE = document.attachEvent ? true:false;
var DOM = document.addEventListener ? true:false;
/*
Step 5
*/
var scrollButton, diffX;
/*
Step 6
*/
window.onload = setUp;

function eventPositionX(e){
            if (IE) return event.clientX;
            else if (DOM) return e.clientX;
        }
   
/*
Step 7
*/
function setUp(){ 
            var scrollButton=document.getElementById("button");  
            addEvent(scrollButton,"mousedown",grabIt,false);
            addEvent(document,"selectstart",stopSelect,false);
            addEvent(document,"keydown",keyShow,false);
			scrollButton.style.cursor = "pointer";

        }
/*
Step 8
*/
 function grabIt(e){
            var mouseX=eventPositionX(e);
            scrollButton=document.getElementById("button");
            diffX=mouseX-getXCoord(scrollButton);
            addEvent(scrollButton,"mousemove",moveIt,false);
            addEvent(scrollButton,"mouseup",dropIt,false);
        }
/*
Step 9
*/
function moveIt(e){
            var mouseX=eventPositionX(e);
            var buttonPosX=mouseX-diffX;         
            showSlide(buttonPosX);
        }

 /*
 Step 10
 */
 function showSlide(x){   
     if (x<20)x=20; 
            else if (x>299)x=299;               
            placeIt(scrollButton,x,6);
            var i=Math.floor((x/3)/slide.length); 
            document.getElementById("photo").src=slide[i];
        }    
/*
Step 11
*/
function dropIt(){
            removeEvent(scrollButton,"mousemove",moveIt,false);
        }     
/*
Step 12
*/
function getKeyCode(e){
            if (IE) return event.keyCode;
            else if (DOM) return e.keyCode;
        }
          
 function keyShow(e){      
            var key=getKeyCode(e);
            var scrollButton=document.getElementById("button");
            var buttonPosX=getXCoord(scrollButton);
            if (key==37)buttonPosX=buttonPosX-31;
            else if (key==39)buttonPosX=buttonPosX+31;
            if (buttonPosX<20)buttonPosX=20;
            else if (buttonPosX>299)buttonPosX=299;
            placeIt(scrollButton,buttonPosX,6);
            showSlide(buttonPosX);
            return false;   
        }
						   
   
function stopSelect(){return false;}  
        
function placeIt(object, x, y) {
   object.style.left = x + "px";  
   object.style.top = y + "px";   
}


function getXCoord(object) {
   return parseInt(getStyle(object, 'left')); 
}

Open in new window

0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now