Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4

Thread: DOM slideshow

  1. #1
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    DOM slideshow

    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=BeE...page&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

    Code:
    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
    Code:
    /*
       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);
    }
    Last edited by nanoashash; 10-24-2011 at 07:45 PM. Reason: added more info

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    Ready to kick yourself?
    Code:
    // 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!!!
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

    Code:
    // 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!

    Code:
    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);
    }

  • #4
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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);

    Code:
    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);
    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •