calc responsive tests

by Andy Bulka

HTML

<title>jsFiddle Demo</title> 
<body>
    <div data-role="page"> 
        <div data-role="header" class="hdr">jsFiddle Demo</div> 
        <div data-role="content">
         <div id="mygrid">
          <div id="col1">
              <div id="A">A</div>
              <div id="B">B</div>
          </div>
          <div id="col2">
              <div id="C">C</div>
          </div>

          <div class="spacer">SPACER</div>
            
            <div class="stack yellow widget">RPN Stack</div>
            <div class="canvas orange widget">Canvas</div>
            <div class="keypad cyan widget">Keypad</div>
            <div class="custom lightgreen widget">Custom Buttons this is full of custom buttons potentially quite a lot of custom buttons</div>

            <div class="silly pink widget">Silly</div>
        
         </div>  <!-- mygrid -->
        </div> <!-- content -->
      <div data-role="footer">The footer</div> 
    </div> 
</body>

CSS

div.widget { height: auto; }

.yellow { background: yellow; }
.orange { background: orange; }
.cyan { background: cyan; }
.lightgreen { background: lightgreen; }
.pink { background: pink; }

#mygrid { height: 250px; }
#col1 { height: 50%; float:left; width:50%; background: pink; border-style:solid; border-width:3px; box-sizing: border-box; padding:5px;}
#col2 { height: 50%; float:left; width:50%; background: cyan; border-style:dotted; border-width:3px; box-sizing: border-box; padding:5px;}
#A { background: red; height:50%; width:100%; float:left;}
#B { background: orange; height:50%; clear: both;}
#C { height:100%; }
.spacer {clear:both; height: 20px; width:100%; }

.stack { height:100%; }
.keypad { height:auto; }
.custom {height:100%;}

/* */
@media (min-width: 701px) and (max-width: 1360px) {
.comment_Xtra_Wide {}
.hdr {color:orange; }
.stack { float:left;  width:50%; }
.canvas { display: none; float:left;  width:50%;}
.keypad { clear:both; float:left;  width:50%; }
.custom { float:left;  width:50%; }
.silly { float:left; background: pink; width: 100px; }
}

@media (min-width: 601px) and (max-width: 700px) {
.comment_Wide {}
.hdr {color:olive; }
.stack { float:left;  width:50%; }
.canvas { display: none; float:left;  width:50%;}
.keypad { clear:both; float:left;  width:50%; }
.custom { float:left;  width:50%; }
.silly { float:left; background: pink; width: 100px; }
}

@media (min-width: 361px) and (max-width: 600px) {
.comment_iPad {}
.hdr {color:blue; }
.stack { float:left;  width:50%; }
.canvas { float:left;  width:50%;}
.keypad { clear:both; float:left;  width:50%; }
.custom { float:left;  width:50%; }
.silly { clear:both; width: 100px; }
}

@media (min-width: 268px) and (max-width: 360px) {
.comment_iPhone {}
.hdr {color:red; }
.stack { width:100%; }
.canvas { display: none; width:100%;}
.keypad { width:100%; }
.custom { width:100%; }
.silly { width: 100px; }
}
*/

JavaScript

function rpn1() {
  $('#A').html($('.stack'));    
  $('#B').html($('.keypad'));    
  $('#C').html($('.custom'));    
}
function rpn1_undo() {
  $('.spacer').after($('.stack'));    
  $('.stack').after($('.keypad'));    
  $('.keypad').after($('.custom'));    
}

$(window).resize(function(){	
    //console.log($('.hdr').first().width());
    var classes = $('.canvas').next().attr('class');
    //console.log('class after canvas is', classes);
	if ($(".canvas").css("display") == "none" ){
        if (classes.indexOf("silly") >= 0) {
          //$('.canvas').after($('.silly'));
            console.log('would add silly');
        }
	}
    else {
        //$('.custom').after($('.silly'));        
    }
	if ($(".hdr").css("color") == "rgb(255, 165, 0)" ){  // "orange"
        //console.log('a');
    }
<!--     console.log($(".hdr").css("color")); -->
});
$('.yellow').on('click', function(e) {
    console.log($('.hdr').first().width());
    if (screen.width >= 600) {
    }
});
$('#A').on('click', function(e) {
    rpn1();
});
$('#B').on('click', function(e) {
    rpn1_undo();
});