Working with event Models - issues with grabIt, moveIt functions

Posted on 2009-04-27
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
 = 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
    LVL 18

    Expert Comment

    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.. :)

    Author Comment

    LVL 18

    Expert Comment

    cant you just pack them ?:D ehh..
    LVL 18

    Expert Comment

    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

    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

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

    Featured Post

    Highfive + Dolby Voice = No More Audio Complaints!

    Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

    Join & Write a Comment

    Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
    Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
    In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
    The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

    745 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

    Need Help in Real-Time?

    Connect with top rated Experts

    15 Experts available now in Live!

    Get 1:1 Help Now