Responsive Multicol - margins

Grid count

by Ben Clayton

HTML

<script src="http://flowcms-bc.v11002.infxlocal/script/auto-set-picture-height.js"></script>
<base href="//flowcms-bc.v11002.infxlocal" />
<div id="content-container">
<div id='ww'></div>
<div class='frame'>
    <div class='column cstart' data-colwidth='2'></div>
    <div class='column cend' data-colwidth='2'></div>
</div>

<div class='frame'>
    <div class='column cstart'></div>
    <div class='column cmid'></div>
    <div class='column cmid'></div>
    <div class='column cend'></div>
</div>

<div class='frame'>
    <div class='column cstart'></div>
    <div class='column cend' data-colwidth='3'></div>
</div>

<div class='frame'>
    <div class='column cstart'></div>
    <div class='column cmid'></div>
    <div class='column cmid'></div>
    <div class='column cend'></div>
</div>

<div class='frame'>
    <div class='column cstart' data-colwidth='3'>
        <div class='frame'>
            <div class='column cstart'></div>
            <div class='column cmid'></div>
            <div class='column cend'></div>
        </div>
    </div>
    <div class='column cend'></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') || 1;
    $frame.children().each(function(idx){
        cols += $(this).data('colwidth') || 1;
    });
    var n=(cols>2)?cols+(cols-2):cols;
    var ct = (ww-(n*m));
    $frame.children().each(function(idx){
        var cw=$(this).data('colwidth') || 1;
        var c = (ct*cw)/cols;//px
        var w = c + (2*m*(cw-1));
        w*=fudge;
        var pw = (w/ww*100);
        $(this).find('.-sys-dbnewpicture-caption').html(w.toFixed(2)+'px ('+cw+')('+pw.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="/images/spacer.gif" style="width: 100%; height: 613.037313432836px; background-image: url(/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');