Custom Positioning - Show/Hide

by Josh Carroll

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div id="clickMeCtnr"> <a class="mover" data-shift-direction="left" data-shift="-50" href="#"><<&nbsp;</a>
 <a id="clickMe" href="#">Click Me</a>
 <a class="mover" data-shift-direction="left" data-shift="50" href="#">&nbsp;>></a>

</div>
<div id="box" class="shadow box" style="display:none;">
    <div>
        <div class="clearfix">
            <div> <a id="showDetail" class="pull-right" href="#">Show Detail</a>

            </div>
        </div>
        <div class="clearfix">
            <div> <a class="pull-right" href="#">Show Detail</a>

            </div>
        </div>
        <div class="clearfix">
            <div class="content-pane pull-left" style="display:none;" id="details-left">Left Side content</div>
            <div class="content-pane pull-right">Right side content</div>
        </div>
        <div class="pull-right">
            <div> <a href="#">Show Detail</a>

            </div>
        </div>
    </div>
</div>
<div id="output"></div>

CSS

#clickMeCtnr {
    position:absolute;
    left:350px;
}
.box {
    width:370px;
    padding:20px;
    background-color:white;
    border: 1px solid #C4C4C4;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    /* future proofing */
    -khtml-border-radius: 5px;
    /* for old Konqueror browsers */
}
.content-pane {
    width:370px;
    height:390px;
    margin-top:10px;
    margin-bottom:10px;
    border:1px solid black;
}
.shadow {
    -moz-box-shadow: 0px 3px 10px #C4C4C4;
    -webkit-box-shadow: 0px 3px 10px #C4C4C4;
    box-shadow: 0px 3px 10px #C4C4C4;
}

JavaScript

(function () {

    function log(val) {
        if (console) {
            console.log(val);
        }
    }

    var target = $("#clickMe"),
        output = $("#output"),
        showDetail = $("#showDetail"),
        box = $("#box"),
        initialWidth = box.width();

    function getPadding(elem) {
        var padding = {
            total: elem.css("padding"),
            right: elem.css("padding-right"),
            left: elem.css("padding-left"),
            top: elem.css("padding-top"),
            bottom: elem.css("padding-bottom")
        };
        
        var val = parseInt(padding.total || padding.bottom);

        if (isNaN(val)) {
            val = 0;
        }

        return val;
    }

    function throttle(func, timeout) {
        var id = 0;
        return function () {
            var that = this,
                args = arguments;

            clearTimeout(id);

            id = setTimeout(function () {
                func.apply(that, args);
            }, timeout);
        };
    }

    function positionBox(width, duration, callback) {
        box.position({
            my: "right top",
            at: "bottom",
            of: "#clickMe",
            collision: "fit",
            using: function (css, calc) {
                if (width) {
                    css.width = width;
                    css.left = width - css.left;
                }

                log(css);
                log(calc);
                
                box.animate(css, duration || 0, "linear", callback);
            }
        });
    }

    positionBox();

    $(window).on("resize", throttle(positionBox, 100));

    $(".mover").on("click", function () {
        var target = $(this).parent(),
            direction = $(this).data("shift-direction"),
            options = {
                amount: $(this).data("shift"),
                direction: direction,
                existing: parseInt(target.css(direction))
            };

       ...