"sliding" a div with buttons

**solmartin** · 08-05-2009, 07:26 AM

Hi,

I am attempting to have a little xhtml fun on my website and do something outside the realm of flash (that i tend to live in). I hope someone can help in assisting, or pointing me, in the right direction!

My goal:
- have a div with x number of images in it, with only a few visible (css overflow: auto?)
- when a button is clicked, "slide" the div so that more will show.

The effect I am looking to achieve would be the same concept as when you finish watching a youtube video, and the little previews appear at the bottom for more videos.

I do have this code which can help in easing the transition, but I don't think it'll do much more than that.

Code:

var animateSpeed = 8;
var object = null;
var fX = null;
var fY = null;
var cX = null;
var cY = null;
var dX = null;
var dY = null;
var stepX = null;
var stepY = null;
var slope = null;

function initAnimate(objectID, x,y) {
     object = document.getElementById(objectID);
     fX = x;
     fY = y;
     cX = object.offsetLeft;
     cY = object.offsetTop;
     dX = Math.abs(fX-cX);
     dY = Math.abs(fY-cY);
     if ((dX == 0) || (dY == 0))
        slope = 0;
     else slope = dY/dX;
        if (dX >= dY) {
           if (cX < fX)
              stepX = animateSpeed;
           else if (cX > fX)
              stepX = -animateSpeed;
           if (cY < fY)
              stepY = animateSpeed*slope;
           else if (cY > fY)
              stepY = -animateSpeed*slope;
        }
        else if (dX < dY) {
           if (cY < fY)
              stepY = animateSpeed;
           else if (cY > fY)
              stepY = -animateSpeed;
           if (cX < fX)
              stepX = animateSpeed/slope;
           else if (cX > fX)
              stepX = -animateSpeed/slope;
        }
     animateObject();
} 
function animateObject() {
     if ((dX > 0) || (dY > 0)) {
        object.style.left = Math.round(cX) + 'px';
        object.style.top = Math.round(cY) + 'px';
        cX = cX + stepX;
        cY = cY + stepY;
        dX = dX - Math.abs(stepX);
        dY = dY - Math.abs(stepY);
        setTimeout('animateObject()',0);
     } else {
        object.style.left = fX + 'px';
        object.style.top = fY + 'px';
     }
     return;
}
function moveObject(objectToMove, objectTop, objectLeft) {
	var object = document.getElementById(objectToMove);
	object.style.top = objectTop + 'px';
	object.style.left = objectLeft + 'px';
}

Thanks!