The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Vertical Centering for Moving Boxes

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #26424

    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.


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

    Create a variable for the top margin

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

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

    var curBoxClear = “-30px”;

    Place them like so

    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

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

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

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

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

    .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)
  • The forum ‘JavaScript’ is closed to new topics and replies.