jsrpncalc2 - 1 col 2 col 3 col layout responsive

hp-js1 javascript rpn programmable calculator 1 col 2 col 3 col layout responsive

by Andy Bulka

HTML

<title>hp-js1 col layouts</title> 
<body>
    <div data-role="page"> 
        <div data-role="header" class="hdr">hp-js1 col layouts</div> 
        <div data-role="content">

<a href="#" class="do" data-target="one-col-full">1col-full</a>
<a href="#" class="do" data-target="two-col-full">2col-full</a>
<a href="#" class="do" data-target="three-col-full">3col-full</a>
<a href="#" id="undo">undo</a>
<a href="#" id="tape_toggle">tape toggle</a>
<br>
<a href="#" id="one_col_stack_only">1col-stack_only</a>
<a href="#" id="two_col_stack_only">2col-stack_only</a>
<a href="#" id="three_col_stack_only">3col-stack_only</a>
<br>
<a href="#" id="one_col_canvas_only">1col-canvas_only</a>
<a href="#" id="two_col_canvas_only">2col-canvas_only</a>
<a href="#" id="three_col_canvas_only">3col-canvas_only</a>

<div class="spacer"></div>

<div id="one-col-full" class="container">
  <table>
    <tr>
      <td class="tape">_tape</td>
      <td class="calc">
        <div class="row1 col">
            <div class="stack"></div>
            <div class="cmd"></div>
            <div class="keypad"></div>
        </div>
        <div class="row2 col">
            <div class="canvas"></div>
            <div class="custom"></div>
        </div>
      </td>
    </tr>
  </table>
</div>

<div class="spacer"></div>

<div id="two-col-full" class="container">
  <table>
    <tr>
      <td class="tape">_tape</td>
      <td class="calc">
        <div class="col1 col float50">
            <div class="stack"></div>
            <div class="cmd"></div>
            <div class="keypad"></div>
        </div>
        <div class="col2 col float50">
            <div class="canvas"></div>
            <div class="custom"></div>
        </div>
      </td>
    </tr>
  </table>
</div>

<div class="spacer"></div>
            
<div id="three-col-full" class="container">
  <table>
    <tr>
      <td class="tape">_tape</td>
      <td class="calc">
          <div class="col1 col float33">
              <div...

CSS

div.widget { height: 100%; }
.spacer {clear:both; height: 10px; margin:10px; width:100%; }
a { padding-right:25px; margin-bottom:100px; background-color:yellow; }
    
.yellow { background: yellow; }
.orange { background: orange; }
.chartreuse { background: Chartreuse; }
.cyan { background: cyan; }
.lightgreen { background: lightgreen; }
.pink { background: pink; }

.container { background: HoneyDew; height:auto;}
.tape { display:none; width:20%; background: white; }
.stack  { height: 45%; background: #F6FFF6;}
.cmd    { height: 15%; background: #909990;}
.keypad { height: 40%; background: #D8E6D8;}
.custom { height: auto; background: #A8B2A8;}
.canvas { background: #C0CCC0;}

.stack100  { height: 100%; }
.cmd100    { height: 15%; }
.keypad100 { height: 85%; }
.canvas100  { height: 100%; }

.col { height:150px; }
.float50 { float:left; width:50%; }
.float33 { float:left; width:33.3%; }
.float66 { float:left; width:66.6%; }

#one-col-full .row2 .canvas { height: 66%; }
#two-col-full .col2 .canvas { height: 40%; }
#three-col-full .col2 .canvas { height: 100%; }

/*
#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%; }

.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...

JavaScript

init();
$('.do').on('click', function(e) {
    undo();
    init();

    var target = $(e.target).attr('data-target');
    target = $('#'+target);
    build(target); 
});
$('#undo').on('click', function(e) { undo(); });
$('#tape_toggle').on('click', function(e) { tape_toggle(); });
$('#one_col_stack_only').on('click', function(e) { one_col_stack_only(); });
$('#two_col_stack_only').on('click', function(e) { two_col_stack_only(); });
$('#three_col_stack_only').on('click', function(e) { three_col_stack_only(); });
$('#one_col_canvas_only').on('click', function(e) { one_col_canvas_only(); });
$('#two_col_canvas_only').on('click', function(e) { two_col_canvas_only(); });
$('#three_col_canvas_only').on('click', function(e) { three_col_canvas_only(); });

function one_col_stack_only() {
    $('#one-col-full .canvas').toggle();
    $('#one-col-full .row2').toggleClass('col');
}
function two_col_stack_only() {
    $('#two-col-full .canvas').toggle();
}
function three_col_stack_only() {
    var $stack = $('#three-col-full .stack');
    var $canvas = $('#three-col-full .canvas');
    var $cmd = $('#three-col-full .cmd');
    var $keypad = $('#three-col-full .keypad');
    
    $canvas.toggle();
    if ($stack.hasClass('stack100')) {
        $stack.after($keypad);
        $stack.after($cmd);
    }
    else {
        $canvas.after($keypad);
        $canvas.after($cmd);
    }
    $stack.toggleClass('stack100');
    $cmd.toggleClass('cmd100');
    $keypad.toggleClass('keypad100');
}

function one_col_canvas_only() {
    if ($('#one-col-full .stack').is(":visible")) {
        $('#one-col-full .canvas').after($('#one-col-full .cmd'));
    }
    else {
        $('#one-col-full .stack').after($('#one-col-full .cmd'));
    }
    $('#one-col-full .stack').toggle();
    $('#one-col-full .keypad').toggle();
    $('#one-col-full .row1').toggle();
}

function two_col_canvas_only() {
    $('#two-col-full .stack').toggle();
    $('#two-col-full .keypad').toggle();
    if ($('#two-col-full...