www.webdeveloper.com
Results 1 to 3 of 3

Thread: "sliding" a div with buttons

  1. #1
    Join Date
    May 2009
    Posts
    18

    "sliding" a div with buttons

    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!

  2. #2
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    FYI
    * My screen resolution is set at 1680x1050
    * I'm accessing your site through a T1 line
    * I'm probably viewing it using Firefox (unless browser is specified)

  3. #3
    Join Date
    May 2009
    Posts
    18
    now that is a powerful little script!!!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles