Broken Border

Demonstrate a javascript-enabled broken border

by thudfactor

HTML

<div class="container" data-brokenborder>
    <div class="label top">Lorem ipsum dolor sit</div>
    <div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</div>
    <div class="label bottom">Lorem ipsum</div>
</div>
<hr>
<div class="container" data-brokenborder style="width: 60%">
    <div class="label top">Lorem ipsum</div>
    <div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</div>
    <div class="label bottom">Lorem ipsum dolor sit</div>
</div>

CSS

body {
    background: transparent url("http://www.thudfactor.com/img/sativa.png");
}
.label {
    margin: 0 auto;
    display: inline-block;
    font-family: arial, helvetica, sans-serif;
    padding: 16px;
}
.label.top {
    font-weight: bold;
    font-size: 24px;
}
.label.bottom {
    font-size: 14px;
    color: #333;
    text-transform: uppercase;
}
.content {
    border: 4px #fff solid;
    border-width: 0 4px;
    padding: 4px;
}
.bb-wrapper {
    overflow: visible;
    vertical-align: top;
    position: relative;
}
.bb, .label {
    position: absolute;
}
.bb {
    z-index: 999;
}
.bb-top .bb-before {
    border: 4px #060 solid;
    border-width: 4px 0 0 4px;
}
.bb-top .bb-after {
    border: 4px #060 solid;
    border-width: 4px 4px 0 0;
}
.bb-bottom .bb-before {
    border: 4px #f00 solid;
    border-width: 0 0 4px 4px;
}
.bb-bottom .bb-after {
    border: 4px #f00 solid;
    border-width: 0 4px 4px 0;
}

JavaScript

var brokenContainer = $("[data-brokenborder]");
var brokenLabels = $("[data-brokenborder] .label");

brokenContainer.each(function (idx, item) {
    var $item = $(item);
    $item.addClass("brokenborder");
    var $item_width = $item.width();
    var $labels = $item.children(".label");
    $labels.each(function (labelidx, label) {
        var $label = $(label);
        var modifier = "";
        if ($label.is(":first-child")) {
            modifier = "bb-top";
        } else if ($label.is(":last-child")) {
            modifier = "bb-bottom";
        }
        $label.wrap("<div class='bb-wrapper " + modifier + "'></div>");
        $wrapper = $label.parent(".bb-wrapper");
        $wrapper.css({
            height: $label.outerHeight()
        });
        var border_width = ($item_width - $label.outerWidth()) / 2;
        var border_height = ($label.outerHeight()) / 2;

        $label.before("<div class='bb bb-before'></div>");
        $label.after("<div class='bb bb-after'></div>");

        $label.css({
            left: border_width,
            top: 0
        });

        var $border_fragments = $label.siblings(".bb");
        var $border_left = $label.siblings(".bb-before");
        var $border_right = $label.siblings(".bb-after");

        $border_fragments.css({
            height: border_height + "px",
            width: border_width + "px"
        });
        if (modifier === "bb-top") {
            $border_fragments.css({
                bottom: -2
            });
        } else if (modifier === "bb-bottom") {
            $border_fragments.css({
                top: -2
            });
        }
        $border_left.css({
            left: 0
        });
        $border_right.css({
            right: 0
        });
    });
});