• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1367
  • Last Modified:

Web page scrollbar for slideshow doesn't work

I need help with this assignment.  My scrollbar does not work for the slideshow.  It should respond to the mouse and to the cursor keys.  Any help is appreciated.

Thanks
<?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 = "flibary.js" type = "text/javascript"></script>
   <script src = "slideshow.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

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

   Author:  Jennifer Colpitts
   Date:    04/26/2011

   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

*/


/*
Step 5
*/
var scrollButton, diffX;
/*
Step 6
*/
var IE = document.attachEvent ? true:false  
var DOM = document.addEventListener ? true:false  
 
function removeEventF (obj,evName,fnName,capture){
            if (IE) object.detachEvent("on"+evName,fnName);
            else if (DOM) object.removeEventListener(evName,fnName,capture);
        }
        
        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); 
} 

/*
Step 8
*/
function grabIt(e){
        var evt = eventPositionX(e);
         scrollbutton = document.getElementById("button");
	diffX= evt-getXCoord(scrollbutton);
	addEvent(scrollbutton, "mousemove", moveIt, false);
	addEvent(scrollbutton, "mouseup", dropIt, false);


}

/*
Step 9
*/
function moveIt(e){
        var evt = eventPositionX(e);
        evt= eventPositionX(e);
	buttonposX=evt-diffX;
	if(buttonposX<20)buttonposX=20;
	if(buttonposX>299)buttonposX=299;
	placeIt(scrollbutton, buttonposX, 6);
	showImage(buttonposX);
}

/*
Step 10
*/
function showSlide(x){
 x=Math.floor((x-20)/31);
document.getElementById("photo").src=slide[x];
       

}

/*
Step 11
*/
function dropIt(e){
removeEvent(scrollbutton, "mousemove", moveIt, false);

}

/*
Step 12
*/
function keyShow(e){
        
        var evt=getKeyCode(e);
        var scrollbutton = document.getElementById("button");
	buttonposX=getXCoord(scrollbutton);
	if (evt==37) buttonposX=buttonposX-31;
	else if (evt==39) buttonposX=buttonposX+31;
	if (buttonposX<20) buttonposX=20;
	else if (buttonposX>299) buttonposX=299;
	placeIt(scrollbutton, buttonposX, 6);
	showImage(buttonposX);
	return false;//stops double key on Safari
}

Open in new window

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

   Author: Jennifer Colpitts	  
   Date:    04/26/2011 
   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]
   }
}
/*
Step 3
*/
function addEvent(object, evName, fnName, capture) {
   if(IE) object.attachEvent("on"+evName, fnName);
   else if(DOM) object.addEventListener(evName, fnName, capture);
}
/*
Step 4
*/
 function removeEvent(object, evName, fnName, capture) {
   if(IE) object.detachEvent("on"+evName, fnName);
   else if(DOM) object.removeEventListener(evName, fnName, capture);
}

Open in new window

back.jpg
bar.jpg
corner.jpg
image0.jpg
image1.jpg
image2.jpg
image3.jpg
image4.jpg
image5.jpg
image6.jpg
image7.jpg
image8.jpg
image9.jpg
links.jpg
logo.jpg
0
Kolpitz
Asked:
Kolpitz
  • 11
  • 9
1 Solution
 
Tom BeckCommented:
@Kolpitz,

How are you doing with this? I took a look at and found numerous problems with the slideshow script. It needs to be thoroughly debugged before it will work.

As per EE rules for students, I can only provide guidance, not corrected code. I'll give you some examples of the problems I noticed:
 
-- Reference to a non-existent object "stopSelect"  in this line addEvent(document, "selectstart", stopSelect, false);

-- Reference to non-existent functions like getKeyCode(), getXCoord(), and placeIt().

There are many javascript debuggers available online that allow you to step through the code line by line. Or, if you have IE8 or Chrome, you can use their built in Developer Tools to step through and find the problems.


0
 
KolpitzAuthor Commented:
I've gone back through and re-written some of my code.  I got the pointer to work correctly and I am no longer receiving any javascript errors, but it still doesn't work and I'm not sure what the issue is.  I don't need code written for me, what I need is there, but my setup or grabIt function isn't working because I still can't move the scollbar.  I just need to know what part of it isn't correct.  Here is my new code:
/*
   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

0
 
Tom BeckCommented:
I can take another look.

Can you post your styles.css? The script refers to positions of elements on the page but I don't have them.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
KolpitzAuthor Commented:
Thanks, here you go.
styles.css
0
 
Tom BeckCommented:
I added notes to you last post of the slideshow.js file (post ID:35484497). I hope this helps. Repost when you have it updated, I can take another look.
/*
   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); //this will return NaN (not a number) because scrollButton.style.left is a string (ex. "20px") and mouseX is an integer. Convert string "20px" to integer by parseFloat("20px"). Note that the subtraction will result in a negative number. Is that what you want? 
addEvent(scrollButton, "mousemove", moveIt, false); 
addEvent(scrollButton, "mouseup", dropIt, false);
}

function moveIt(e){
	var evt = e||window.event; 
	var mouseX = e.target||evt.clientX; //e.target is element (ex. the button div). e.clientX is the X mouse position, so the e.target is being assigned but it's not a number
	var buttonPosX = mouseX + diffX; //this will not compute because mouseX is now e.target (NaN) and so is diffX (see note in GrabIt).
}
function showSlide(x){
	if(x<20) x = 20;  //this will be overwritten by x = scrollButton.style.left
	if(x>299) x = 299; //this will too. consider an if/elseif/else statement for these three lines
	x = scrollButton.style.left; //scrollButton.style.left = a string. Convert to integer first parseFloat("20px")
	var i = Math.floor(x-20)/31; //this returns NaN because x is a string
	document.getElementByID("photo").src = image[i].jpg; //image is not an array and src is looking for a string. What you really mean to say then is 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;  //see note on this in moveIt
var buttonPosX = scrollButton.style.left; //see note in showSlide
if(key==-37) buttonPosX = buttonPosX-31; //if you mean for key to equal to the keyCode, it would be a positive number (37)
else if(key==39) buttonPosX = buttonPosX +31; //both lines fail because buttonPosX is now a string
showSlide(buttonPosX);	
}

Open in new window

0
 
Tom BeckCommented:
Point of clarification. In your case, because you are not using decimal values for position, parseInt(string) will be sufficient to convert, for example, "20px" into integer 20. You could just put the string representation as the argument like this: parseInt(scrollButton.style.left).
0
 
KolpitzAuthor Commented:
I'm getting a javascript error that the method of document.getElementById on line 81 isn't a supported method, but this is the way my book shows how to do it.  I made the changes you suggested also.
/*
   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 = evt.clientX;
diffX = parseFloat(scrollButton.style.left - mouseX); 
addEvent(scrollButton, "mousemove", moveIt, false); 
addEvent(scrollButton, "mouseup", dropIt, false);
}

function moveIt(e){
	var evt = e||window.event; 
	var mouseX = evt.clientX; 
	var buttonPosX = mouseX + diffX; 
}
function showSlide(x){
	if(x<20) x = 20;  
	else if(x>299) x = 299; 
	x = parseFloat(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 = evt.keyCode;  
var buttonPosX = parseFloat(scrollButton.style.left); 
if(key==37) buttonPosX = buttonPosX-31; 
else if(key==39) buttonPosX = buttonPosX +31; 
showSlide(buttonPosX);	
}

Open in new window

0
 
Tom BeckCommented:
Javascript is case sensitive, so on line 81 the "d" in getElementByID() should be lower case.

Still need an else condition in showSlide for the default condition. Use curly braces for clarity:

if (condition1) {
   //statement;
}else if (condition2) {
  //statement;
}else{
  //default statement;

On line 66, you want parseInt(scrollButton.style.left) - mouseX;

This results in a big negative number. Is that what you want

In line 74 you are calculating what I'm guessing is the new position you want for the scrollbar, however you are not doing anything with it. Also, because diffX is a negative number, the scrollbar will likely move off the page if you set it to this.
0
 
KolpitzAuthor Commented:
I added an else statement, and line 66 is supposed to set the value of diffX equal to the difference between the left coordinate of the scrollbutton and the value of the mouseX variable.  I added the showSlide function on line 75 with the buttonPosX as the parameter.
/*
   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 = evt.clientX;
diffX = parseInt(scrollButton.style.left - mouseX); 
addEvent(scrollButton, "mousemove", moveIt, false); 
addEvent(scrollButton, "mouseup", dropIt, false);
}

function moveIt(e){
	var evt = e||window.event; 
	var mouseX = evt.clientX; 
	var buttonPosX = mouseX + diffX; 
	showSlide(buttonPosX);
}
function showSlide(x){
	if(x<20){ x = 20;}  
	else if(x>299) {x = 299; }
	else {x = x;}
	x = parseInt(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 = evt.keyCode;  
var buttonPosX = parseInt(scrollButton.style.left); 
if(key==37) buttonPosX = buttonPosX-31; 
else if(key==39) buttonPosX = buttonPosX +31; 
showSlide(buttonPosX);	
}

Open in new window

0
 
Tom BeckCommented:
For line 66, it's not going to compute that way. You cannot do the subtraction while the scrollButton.style.left is a string. See my last post.

I think you have most of the syntax problems corrected, but there are still some problems with your logic. Your not getting the numbers you think you are getting with the calculations. For example, the position of the button is 20px left of the "bar" container's left edge. The bar container's left edge is 180px from the browser's left edge, so you would need to add 180px to the button's left position just to get back to it's starting point before trying to set a new position. The clientX position is always relative to the browser window edges not the container where the event occurred. The scrollbar never moves because it's new position always calculates to it's original position or zero. It will not move in either case because the new position must be converted back to a string with the "px" appended.

You need to SEE what is happening by stepping through the code line by line and observing the values generated in the variables. You cannot rely solely on IE status bar for javascript errors. Do you have IE8? Load your page in IE8. Go to Tools-->Developer tools. Click on the Script tab in the left column. Set a breakpoint at the Setup function's first statement (click just left of the line number to create a breakpoint). Click Start Debugging. Reload the page if prompted. Take the desired action on the web page (scroll, click the button, whatever). Click on the Watch tab in the right pane. Type in the variables you want to "watch" and observe the values as you use the "Step Into" icon to step through the code line by line.

The Chrome web browser has even better developer tools. The watch list is automatically populated.

If you want to write javascript code or any code for that matter, you need to have a way to debug. Computers can only do exactly what you tell them. They cannot interpret your meaning. You would be amazed at how often your meaning in misinterpreted.
0
 
Tom BeckCommented:
Correction: It's Firefox's add-on called Firebug that auto populates the Watch list.

You're almost there. I can actually step through this code and produce values with few errors. It's just that the values generated will not produce the action you desire.
0
 
KolpitzAuthor Commented:
I've got it closer.  I think the grabIt function is working, but the moveIt is not.
if (buttonPosX<20)buttonPosX=20; 
            else if (buttonPosX>299)buttonPosX=299;               
            placeIt(scrollButton,buttonPosX,6);

Open in new window

0
 
Tom BeckCommented:
Did you add a new function called placeIt? Or did you mean moveIt?
0
 
KolpitzAuthor Commented:
It's a new function
0
 
KolpitzAuthor Commented:

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

   Author:  Jennifer Colpitts
   Date:    04/26/2011

   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();
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);
            i=Math.floor((x-20)/31);
            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) {
   x = object.style.left;
   y = object.style.top;
}


function getXCoord(object) {
   return parseInt(object.style.left);
}

Open in new window

0
 
Tom BeckCommented:
I played around with this until I got it working reasonably well on my system, just a few minor changes. Let me know if you are stuck.
0
 
KolpitzAuthor Commented:
I still can't figure out what's wrong with it.
0
 
Tom BeckCommented:
Is your code still exactly as in post ID:35493210? If not, please post the latest version.
0
 
KolpitzAuthor Commented:
Yes, I figured it out, thanks for your help
0
 
Tom BeckCommented:
That's great. You're welcome. Are you going to close the question?
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

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