jsrpncalc2 - AUTO SIZE 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">

<div id="debug_area" style="display:none">
    <p>One col mode: <span id="one_col_mode" class="col_mode"></span>
    Two col mode: <span id="two_col_mode" class="col_mode"></span>
    Three col mode: <span id="three_col_mode" class="col_mode"></span></p>
    
    <a href="#" class="do" data-target="one-col-full">do 1col</a>
    <a href="#" class="do" data-target="two-col-full">do 2col</a>
    <a href="#" class="do" data-target="three-col-full">do 3col</a>
    <a href="#" id="undo">undo</a>
    <a href="#" id="tape_toggle">tape toggle</a>
    <br>
    <br>
    <a href="#" id="one_col_full_layout">1col-full</a>
    <a href="#" id="two_col_full_layout">2col-full</a>
    <a href="#" id="three_col_full_layout">3col-full</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> <!-- debug area -->

<form>
    <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
        <input type="radio" name="A" id="radio-choice-full" value="on" checked="checked">
        <label for="radio-choice-full">full</label>
            
        <input type="radio" name="A" id="radio-choice-stack_only" value="off">
        <label for="radio-choice-stack_only">stack_only</label>
            
        <input type="radio" name="A" id="radio-choice-canvas_only" value="off">
        <label for="radio-choice-canvas_only">canvas_only</label>
            
        <input type="checkbox" id="checkbox-printout_tape" class="customzz" data-mini="true">
        <label...

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%; }

.col_mode { background: orange }

/*
#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:...

JavaScript

init();
update_modes();
$('.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_full_layout').on('click', function(e) { go_one_col_full(); });
$('#two_col_full_layout').on('click', function(e) { go_two_col_full(); });
$('#three_col_full_layout').on('click', function(e) { go_three_col_full(); });

$('#one_col_stack_only').on('click', function(e) { go_one_col_stack_only(); });
$('#two_col_stack_only').on('click', function(e) { go_two_col_stack_only(); });
$('#three_col_stack_only').on('click', function(e) { go_three_col_stack_only(); });

$('#one_col_canvas_only').on('click', function(e) { go_one_col_canvas_only(); });
$('#two_col_canvas_only').on('click', function(e) { go_two_col_canvas_only(); });
$('#three_col_canvas_only').on('click', function(e) { go_three_col_canvas_only(); });

var outer_mode = undefined;  // 1col or 2col or 3col

var one_col_mode = 'full';
var two_col_mode = 'full';
var three_col_mode = 'full';

function _update_mode($outer) {
    var stack_visible = $outer.find('.stack').is(":visible");
    var canvas_visible = $outer.find('.canvas').is(":visible");
    if (stack_visible && canvas_visible)
        return 'full';
    else if (stack_visible && !canvas_visible)
        return 'stack_only';
    else if (!stack_visible && canvas_visible)
        return 'canvas_only';
    else
        alert('unknown mode');
}
function update_modes() {
    one_col_mode = _update_mode($('#one-col-full'));
    two_col_mode = _update_mode($('#two-col-full'));
    three_col_mode = _update_mode($('#three-col-full'));
    $('#one_col_mode').text(one_col_mode);
    $('#two_col_mode').text(two_col_mode);
    $('#three_col_mode').text(three_col_mode);
}

function show_one() {
    if (outer_mode == "1col") return;
    $('#one-col-full').show();
 ...