...

View Full Version : DOM slideshow



nanoashash
10-24-2011, 06:57 PM
I am having a problem with my homework assignment and can not figure out the problem. Debug comes back clean and I am stumped on this project for several hours. I hate asking for help and like to figure it out on my own, but I can not seem to know what the problem is. I have done alerts in my blocks of code and everything is coming back.

Here is the book and the case problem I am on:
http://books.google.com/books?id=BeEzti-oB0IC&pg=PA925&lpg=PA925&dq=new+perspectives+badger.htm&source=bl&ots=TJAZ_rgOYT&sig=YGYaBYmAYBOnEFWk7ACcILhx4Co&hl=en&ei=QaWlTsfOCobe0QHngpiIBw&sa=X&oi=book_result&ct=result&resnum=1&ved=0CB0Q6AEwAA#v=onepage&q&f=false

Basically the images is not loading up, or anything is happening.

//EDIT : I have the function setup() onLoad in the body ( body onload="setup()" )

Here is my code:

FileName: flibrary.js



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, cap) {
if (object.attachEvent)
object.attachEvent("on" + evName, fnName);
else if (object.addEventListener)
object.addEventListener(evName, fnName, cap);
}
//step 4
function addEvent(object, evName, fnName, cap) {
if (object.detachEvent)
object.detachEvent("on" + evName, fnName);
else if (object.removeEventListener)
object.removeEventListener(evName, fnName, cap);
}


FileName: slideshows.js


/*
New Perspectives on JavaScript, 2nd Edition
Tutorial 6
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;
var diffX;
// step 7
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);
}
// step 8
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);
}
// step 9
function moveIt(e){
var evt = e || window.event;
var mouseX = evt.clientX;
var buttonPosX = mouseX - diffX;
showSlide();
}
// step 10
function showSlide(x){
if(x<20){
x = 20;
}
if(x>299){
x = 299;
}
scrollButton.style.left = x;
var i = Math.floor((x-20)/31);
document.getElementById("photo").src = image[i];
}
// step 11
function dropIt(e){
removeEvent(scrollButton, "mousemove", moveIt, false);
}
// step 12
function keyShow(e){
var evt = e || window.event;
var key = event.keyCode;
var buttonPosX = scrollButton.style.left;
if(key == 37) buttonPosX -= 31;
if(key == 39) buttonPosX += 31;
showSlide(buttonPosX);
}

Old Pedant
10-24-2011, 09:46 PM
Ready to kick yourself?


// step 3
function addEvent(object, evName, fnName, cap) {
if (object.attachEvent)
object.attachEvent("on" + evName, fnName);
else if (object.addEventListener)
object.addEventListener(evName, fnName, cap);
}
//step 4
function addEvent(object, evName, fnName, cap) {
if (object.detachEvent)
object.detachEvent("on" + evName, fnName);
else if (object.removeEventListener)
object.removeEventListener(evName, fnName, cap);
}

Because you have two functions with the same name, JavaScript only remembers the second one. And so when you call addEvent the code that is actually used detaches/removes the event!!!

nanoashash
10-24-2011, 11:33 PM
OMG! Thanks so much, idk i must of read the same question over and wrote that... ugh well here is the change I did; however it did not fix my problem.

FileName: flibrary.js *Fixed



// step 3
function addEvent(object, evName, fnName, cap) {
if (object.attachEvent)
object.attachEvent("on" + evName, fnName);
else if (object.addEventListener)
object.addEventListener(evName, fnName, cap);
}
//step 4
function removeEvent(object, evName, fnName, cap) {
if (object.detachEvent)
object.detachEvent("on" + evName, fnName);
else if (object.removeEventListener)
object.removeEventListener(evName, fnName, cap);


FileName: slideshows.js
Changes I made:
// step 8
diffX = parseInt(scrollButton.style.left)- mouseX + "px";
// step 9
var buttonPosX = mouseX - diffX + "px";
// step 12
document.getElementById("photo").src = "image" + i + ".jpg";

I forgot to add px to the movements but unsure if I got them all.
Also removed onLoad from body and changed it to window.onload = setup;

Im having an issue with scrollButton.style.left = x; located at step 10; debug is giving me Invalid argument. - The book tells me set the left coordinate of the scrollButton object equal to x

This is hurtting my head, I have been working on this all day!



var scrollButton;
var diffX;
window.onload = setup;
// step 7
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);
}
// step 8
function grabIt(e){
var evt = e || window.event;
var mouseX = evt.clientX;
diffX = parseInt(scrollButton.style.left)- mouseX + "px";
addEvent(scrollButton, "mousemove", moveIt, false);
addEvent(scrollButton, "mouseup", dropIt, false);
}
// step 9
function moveIt(e){
var evt = e || window.event;
var mouseX = evt.clientX;
var buttonPosX = mouseX - diffX + "px";
showSlide();
}
// step 10
function showSlide(x){
if(x<20){
x = 20;
}
if(x>299){
x = 299;
}
scrollButton.style.left = x;
var i = Math.floor((x-20)/31);
document.getElementById("photo").src = "image" + i + ".jpg";
}
// step 11
function dropIt(e){
removeEvent(scrollButton, "mousemove", moveIt, false);
}
// step 12
function keyShow(e){
var evt = e || window.event;
var key = event.keyCode;
var buttonPosX = scrollButton.style.left;
if(key == 37) buttonPosX -= 31;
if(key == 39) buttonPosX += 31;
showSlide(buttonPosX);
}

nanoashash
10-25-2011, 01:25 AM
Since my last update I fix'd all the following:

+ "px" issue - I only added it to // step 10 scrollButton.style.left = x + "px"; and also I change document.getElementById("photo").src = "image" + [i] + ".jpg"; which I think is still wrong and should be + i + , but it wont work right still.

I forgot the parameter in // step 9 showSlide(buttonPosX);


var scrollButton;
var diffX;
window.onload = setup;
// step 7
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);
}
// step 8
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);
}
// step 9
function moveIt(e){
var evt = e || window.event;
var mouseX = evt.clientX;
var buttonPosX = mouseX - diffX;
showSlide(buttonPosX);
}
// step 10
function showSlide(x){
if(x<20){
x = 20;
}
if(x>299){
x = 299;
}
scrollButton.style.left = x + "px";
var i = Math.floor((x-20)/31);
document.getElementById("photo").src = "image" + [i] + ".jpg";
}
// step 11
function dropIt(e){
removeEvent(scrollButton, "mousemove", moveIt, false);
}
// step 12
function keyShow(e){
var evt = e || window.event;
var key = evt.keyCode;
var buttonPosX = scrollButton.style.left;
if(key == 37) buttonPosX -= 31;
if(key == 39) buttonPosX += 31;
showSlide(buttonPosX);
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum