Responsive Multicol - margins

Auto size calculation on window resize

by Ben Clayton

HTML

<script src="http://flowcms-bc.infxsys.com/script/auto-set-picture-height.js"></script>
<div id="content-container">
<div id='ww'></div>
<div class='frame'>XXXX<div class='column cstart' data-gc='50%' data-colspan='2'></div><div class='column cend' data-gc='50%' data-colspan='2'></div></div>

<div class='frame'>
    <div class='column cstart' data-gc='25%'></div>
    <div class='column cmid' data-gc='25%'></div>
    <div class='column cmid' data-gc='25%'></div>
    <div class='column cend' data-gc='25%'></div>
</div>

<div class='frame'>
    <div class='column cstart' data-gc='25%'></div>
    <div class='column cend' data-gc='75%' data-colspan='3'></div>
</div>

<div class='frame'>
    <div class='column cstart' data-gc='25%'></div>
    <div class='column cmid' data-gc='25%'></div>
    <div class='column cmid' data-gc='25%'></div>
    <div class='column cend' data-gc='25%'></div>
</div>

<div class='frame'>
    <div class='column cstart' data-gc='75%' data-colspan='3'>
        <div class='frame' data-fudge='1.0097'>
            <div class='column cstart' data-gc='33.33%'></div>
            <div class='column cmid' data-gc='33.33%'></div>
            <div class='column cend' data-gc='33.33%'></div>
        </div>
    </div>
    <div class='column cend' data-gc='25%'></div>
</div>
    
<div id='debug'></div>
</div>

CSS

* {margin:0;padding:0;border:0;}

kkdiv {transition:all 0.5s ease;}

.frame  {margin:0 auto;overflow:hidden;}

.column {
            background-color:#F0F0F0;
            display:inline-block;
            /* text-align:center; */
            vertical-align:top;
            padding:0px;
            margin:0;
        }
.column .column {
            background-color:#D0FFD0;/* highlight the nested multicol */
}

.cstart { margin-right:10px;}
.cmid { margin-left:10px;margin-right:10px;}
.cend { margin-left:10px;}


#debug {margin-top:20px;}
#ww {margin=bottom:20px;}

/******** InFX Gen 2 'newpicture' support CSS **********/

#content-container img * 		{
			box-sizing: border-box;
			-webkit-box-sizing: border-box;
			}

#content-container .-sys-dbnewpicture
			{
			overflow:hidden;
			}

#content-container .-sys-dbnewpicture .-sys-dbnewpicture-img  	
			{
  			/* height - This is generated by jQuery */
   			width:100%;
    			background-size: cover;
    			background-repeat: no-repeat;
  			background-position: center center;
   			overflow:hidden;
   			display:block;
			}
/*#content-container .-sys-dbnewpicture img.-sys-dbnewpicture-img  
			{
    			width:20px;
  			height:20px;
			} */
#content-container	 img.-sys-dbnewpicture-img	{
			transition: all 0.2s ease 0.2s;
			-webkit-transition: all 0.2s ease 0.2s;
			}		

#content-container .-sys-dbnewpicture .-sys-dbnewpicture-caption  	{
				}
#content-container .wrapped-html .-sys-dbnewpicture.left	{
				}
#content-container .wrapped-html .-sys-dbnewpicture.right	{
				}
#content-container .landscape-picture-block img		{ 
				background-size: cover; 
				background-repeat: no-repeat;
				background-position: center center;
				transition: all 0.2s ease 0.2s;
				-webkit-transition: all 0.2s ease 0.2s;
				display:block;
				}

JavaScript

var tid;

$(window).on('resize',function(){
    if(tid) clearTimeout(tid);
    tid=setTimeout(process_frames,1000);
});

function process_cols($frame){
    var m=10;
    $frame.css('min-width','auto');
    var ww = $frame.width();
    var cols=0;
    var fudge=$frame.data('fudge') || 0;
    $frame.children().each(function(idx){
        cols += $(this).data('colspan') || 1;
    });
    var n=cols;
    if(cols>2)n+=(cols-2);
    var ct = (ww-(n*m));
    $frame.children().each(function(idx){
        var cw=parseInt( $(this).data('gc') );
        var c = (ct*cw)/100;//px
        var sp = $(this).data('colspan') || 1;
        var w = c + (2*m*(sp-1));
        w+=fudge;
        var pw = (w/ww*100) + '%';
        $(this).find('.-sys-dbnewpicture-caption').html(w+'px ('+sp+')('+((w/ww*100).toFixed(2))+'%)');
        $(this).css('width',pw);
    });
    $frame.css('min-width',ww);
}

function process_frames(){
    $('.frame').each(function(idx){
        process_cols($(this));
    });
}

function clean_frames(){
    $('.frame').each(function(idx){
        var $childs = $(this).children();
        $(this).empty().append($childs);
    });
}


function setup(){
    $('.column').each(function(){
        var h='<div style="width:100%" class="-sys-dbnewpicture">';
        h+='<img src="http://flowcms-bc.infxsys.com/images/spacer.gif" style="width: 100%; height: 613.037313432836px; background-image: url(http://flowcms-bc.infxsys.com/dyn/_pictures/test-folder/benc/popup-centering-test/Alhambra_Seats.jpg);" class="-sys-dbnewpicture-img" alt="Alhambra Seats" title="Alhambra Seats" data-aspectratio="0.664179104477612">';
        h+='<div class="-sys-dbnewpicture-caption"><span class="-sys-dbnewpicture-caption">Alhambra Seats</span></div>';
        h+='</div>';
        if($(this).html()==''){
            $(this).html(h);
        }
    });
    
}

setup();
clean_frames();
process_frames(); // first time
$(window).trigger('resize');