Working with event Models - issues with grabIt, moveIt functions

Posted on 2009-04-27
Medium Priority
Last Modified: 2013-11-19
I have a practice assignment that I coded from start to finish.  The page has a scroll bar on the bottom that is supposed to scroll when you click and drag on it using the mouse.  I have it working using the left and right direction buttons but it should work with both.  My tutor is of no use to me.  I have been staring at this since last night and I can't figure out what is wrong.  I fixed all of my typos and made sure everything is as it should be.

I need an extra set of eyes to proof what I have done.  Is there anything I missed?
<title>Badger Aviation</title>
<link href="images/styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="functions.js"></script>
<script type="text/javascript">  // #2 added embedded script element
if (document.images) {
var slide=new Array();  // #a created image array and added images 0-9
slide[0]=new Image();
slide[1]=new Image();
slide[2]=new Image();
slide[3]=new Image();
slide[4]=new Image();
slide[5]=new Image();
slide[6]=new Image();
slide[7]=new Image();
slide[8]=new Image();
slide[9]=new Image();
var IE = document.attachEvent ? true:false  // #b global variable to indicate if IE event model is supported
var DOM = document.addEventListener ? true:false  // b global variable to indicate if DOM event model is supported
function applyEventF(obj, ename, fname, capture) {  // #3a adds function to an object as the event occurs
		 if (IE) obj.attachEvent("on" + ename, fname);
		 else if (DOM) obj.addEventListener(ename, fname, capture);
function removeEventF(obj, ename, fname, capture) {  // #b removes attached function from an object
		 if (IE) obj.detachEvent("on" + ename, fname);
		 else if (DOM) obj.removeEventListener(ename, fname, capture);
function eventPositionX(e) {  // #c returns the x coordinate of an event
		 if (IE) return event.clientX;
		 else if (DOM) return e.clientX;
function getKeyCode(e) {  // #d returns keycode value of a keyboard event
		 if (IE) return event.keyCode;
		 else if (DOM) return e.keyCode;
function setup() {  // #4 sets up the page for the operation of the horizontal scrollbar
		 var button=document.getElementById("button"); // #a references the element with the id "button"
		 button.onmousedown=grabIt;  // #b document object that runs the grabIt() function
		 document.onselectstart=stopSelect;  // #c document object that runs the stopSelect() function
		 document.onkeydown=keyShow;  // #d document object that runs the keyShow() function
function stopSelect() {  // #5 returns the value false
		 return false;
function grabIt(e) {  // #6 created function to grab the scroll bar button
		 //dragItem = eventSource(e);
		 //mouseX = eventPositionX(e);
		 //mouseY = eventPositionY(e);
		 //diffX = mouseX - getXCoord(dragItem);
		// diffY = mouseY - getYCoord(dragItem);
function moveIt(e) {  // #7 created function and added parameter "e"
		 var mouseX=eventPostionX(e);  // #a current position of the X postion of the event 
		 var diffX=mouseX-200;  // #b current position of the scrollbar button
		 var buttonposX=diffX;  // #c makes sure the scroll button is not dragged off of the scroll bar
	     if (buttonposX < 20) buttonposX=20;     
		 if (buttonposX > 299) buttonposX=299;      
		 placeIt(button, buttonposX, 6);  // #d function to place the scroll button object
		 showImage(buttonposX);  // #e calls the showImage() function
function dropIt() {  // #8 created function to detach moveIt() from the mousemove event occuring in the scrollbutton object
function keyShow(e){  // #9 function is to move the scroll bar button using the left and right arrows on the keyboard.
    	 key=getKeyCode(e);  // #a stores the keycode value
    	 buttonPosX=getXCoord(button);  // #b stores the x coordinate of the scrollbar
    	 if (key==37) buttonPosX -= 31;  // #c left arrow key is pressed, decrease the value by 31
    	 if (key==39) buttonPosX += 31;  // #c right arrow key is pressed, increase the value by 31
    	 if (buttonPosX < 20) buttonPosX =20;  // #d setting values on the buttons  
    	 if (buttonPosX > 299) buttonPosX = 299;  // #d setting values on the buttons
    	 placeIt(button, buttonPosX,6);  // #e places the scroll bar at the coordinates
    	 showImage(buttonPosX);  // #f calls the showImages() function
    	 return false;  // #g returns value as false so that Safari treats the arrow keys as single buttons
function showImage(x) {  // #10 determines which image to display based on the postion of the scrollbar button
		  var i = Math.floor((x-20)/31);  // #a coverts x coordinate range into an index number
      	  document.photo.src = slide[i].src;  // #b changes the source of the slide[i] image
<body onload="setup()">  <!-- #11 added event handler to the body element that runs the setup() function-->
<div id="logo"><img src="images/logo.jpg" alt="Badger Aviation" /></div>
<div id="corner"><img src="images/corner.jpg" alt="" /></div>
<div id="links"><img src="images/links.jpg" alt="" /></div>
<div id="title"><h1>Flight Photos</h1></div>
<div id="photos"><img id="photo" name="photo" src="images/image0.jpg" alt="" /></div>
<div id="bar" style="position:absolute; top: 450px; left:180px; width: 368px; height: 41px">
<div id="button" style="position: absolute; top: 6px; left: 20px; width: 50px; height:22px">
<div id="message">See photos from one of our popular
                  Dane County tours. Scroll through the slideshow 
                  using your mouse or the right and left arrows on 
                  your keyboard.

Open in new window

Question by:seeminglylost
  • 4
  • 2
LVL 18

Expert Comment

by:Pawel Witkowski
ID: 24252141
could you make those images external links ? I have to images and I would like to see what is going on but I dont want to spent time creating images etc.. :)
LVL 18

Expert Comment

by:Pawel Witkowski
ID: 24253628
cant you just pack them ?:D ehh..
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

LVL 18

Expert Comment

by:Pawel Witkowski
ID: 24258180
You did not gave me css so I did not saw bar hah;) ok now I see it, hopefully its enough to check what is wrong in your code
LVL 18

Accepted Solution

Pawel Witkowski earned 1000 total points
ID: 24258240
Well... Please install firebug.... there you would find that you have literal problem:

79:                var mouseX=eventPostionX(e);  // #a current position of the X postion of the event

should be:

                var mouseX=eventPositionX(e);  // #a current position of the X postion of the event

blah... I spent more time downloading stuff and creating test case that finding this bug :P

If you use IE, just install Microsoft Visual Web Developer  that has attached debugger to it It really helps solving that type of bugs :)

Author Closing Comment

ID: 31575274
As per your recommendation, firebug has been installed.  Thanks so much!

Featured Post

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.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question