Grow your CSS skills. Land your dream job.

Vertical Centering for Moving Boxes

  • # October 12, 2009 at 1:41 pm

    First, I want to say that Moving Boxes is a really slick Jquery carousel without a doubt. I was working on a project, and Moving Boxes looked like just what I needed if only for one small problem. The boxes expand or fish eye from the top, and not the center like the client wanted. After a little tweaking around I figured out how to do just that.

    Example:
    [img]http://i36.tinypic.com/300zhfp.jpg[/img]

    Hop into the slider.js file and and a add a couple of lines:

    Create a variable for the top margin

    Code:
    var regBoxClear = $(“.panel”).css(“margin-top”);

    Then create a variable for the updated location of the top margin

    Code:
    var curBoxClear = “-30px”;

    Place them like so

    Code:
    var regBoxClear = $(“.panel”).css(“margin-top”);
    var regWidth = $(“.panel”).css(“width”);
    var regImgWidth = $(“.panel img”).css(“width”);
    var regTitleSize = $(“.panel h2″).css(“font-size”);
    var regParSize = $(“.panel p”).css(“font-size”);

    var movingDistance = 300;

    var curBoxClear = “-30px”;
    var curWidth = 350;
    var curImgWidth = 326;
    var curTitleSize = “20px”;
    var curParSize = “15px”;

    Next, update the returnToNormal function by adding a reference to the new variable next to the regWidth

    Code:
    .animate({ width: regWidth, marginTop: regBoxClear })

    Likewise, update the growBigger function with a reference of the updated variable next to curWidth

    Code:
    .animate({ width: curWidth, marginTop: curBoxClear })

    Finally update your css for the .inside class to accommodate the new top margin

    Code:
    .inside {
    margin-top: 30px;
    padding: 10px;
    border: 1px solid #999;
    }

    And there we have it. Of course there is probably a much more elegant way to accomplish this, but for now this seems to the do the trick. I would say the only thing Moving Boxes would need now is the ability to loop, but that might be a little beyond me at the moment. Thanks again Chris for the great slider-thingy.

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".