(SO - 22664772) Reverse inline flow

by Jessel John

HTML

<div id="first">
    <div class="inp">aaaa</div>
    <div class="inp">b</div>
    <div class="inp">cc</div>
    <div class="inp">ddddddddd</div>
    <div class="inp">eee</div>
    <div class="inp">f</div>
    <div class="inp">gggggg</div>
    <div class="inp">h</div>
    <div class="inp">i</div>
    <div class="inp">j</div>
    <div class="inp">kkkkk</div>
    <div class="inp">ll</div>
    <div class="inp">mmmmmmmmm</div>
    <div class="inp">nn</div>
</div>

<!-- Below part to generate mirror code of the above -->
<div id="wrap">
    <div id="second">
    </div>
</div>

CSS

html,body,#first,#second{
    width:100%;
    height:auto;
}
#first{
    visibility:hidden;
}
#wrap{
    position:absolute;
}
#second{
    position:relative;
}
.inp{
    display:inline-block;
    border:1px solid black;
    margin-right:3px;
}

JavaScript

var actual = $('#first');
var mirror = $('#second');

$('#wrap').css({'top':''+actual.offset().top+'px'});
$(window).resize(function(){
    var frag = document.createDocumentFragment();
    var ele='div';
    var wrp = actual.height()+actual.offset().top;
    $('#first .inp').each(function(){
        var creEle = document.createElement(ele);
        creEle.className="inp";
        creEle.innerHTML = $(this).html();
        creEle.style.position = "absolute";
        var diff = wrp - ($(this).height()+$(this).offset().top);
        creEle.style.top = diff+"px";
        creEle.style.left = $(this).offset().left-actual.offset().left+"px";
        frag.appendChild(creEle);
    });
    mirror.html(frag);
});

$(window).trigger('resize');