numeric keypad

by needlethread

HTML

<div id="tt_topbar" data-role="header" data-position="fixed"> <a href="#tt_leftpanel" data-icon="bars" class="ui-btn-left">Menu</a>

    <fieldset data-role="controlgroup" data-type="horizontal" class="ui-btn-right">
        <input name="tt_view_sel" id="tt_view_tool" value="tool" checked="checked" type="radio">
        <label for="tt_view_tool">Mode A</label>
        <input name="tt_view_sel" id="tt_view_data" value="data" type="radio">
        <label for="tt_view_data">Mode B</label>
    </fieldset>
     <h1>Header<span id="tt_titlesuffix"></span></h1>

    <div data-role="navbar" data-position="fixed" class="tt_toolhdr">
        <ul>
            <li><a class="ui-btn-active ui-state-persist" data-panel="main" href="#">Uno</a>

            </li>
            <li><a data-panel="due" href="#">Due</a>

            </li>
        </ul>
    </div>
</div>
<div>
    <p>Click on Mode B to remove the navbar</p>
    <p>Unfortunately the rest of the content does not move up, unless the window is resized.</p>
    <p>More stuff here</p>
    <div>
        <input type="num">
    </div>
    <div class="tt_kbd">
        <div class="tt_kbdrow">
            <div class="tt_key tenth">1</div>
            <div class="tt_key tenth">2</div>
            <div class="tt_key tenth">3</div>
            <div class="tt_key tenth">4</div>
            <div class="tt_key tenth">5</div>
            <div class="tt_key tenth">6</div>
            <div class="tt_key tenth">7</div>
            <div class="tt_key tenth">8</div>
            <div class="tt_key tenth">9</div>
            <div class="tt_key tenth">0</div>
            <div style="clear: both"></div>
        </div>
        <div class="tt_kbdrow">
            <div class="tt_key fifth">--</div>
            <div class="tt_key fifth">-</div>
            <div class="tt_key fifth">Clear</div>
            <div class="tt_key fifth">+</div>
            <div class="tt_key fifth">++</div>
            <div style="clear: both"></div>
        </div>
       ...

CSS

div.tt_kbdrow {
    display: table;
    width: 100%;
}
div.tt_key {
    border: 1px solid black;
    
    text-align: center;
    height: 3em;
    margin-top: 0px;
    margin-bottom: 2px;
    background-color: #f6f6f6;
    font-weight: 600;
    border-radius: 3px;
    cursor: pointer;
    display: table-cell;
    vertical-align: middle;
}
div.tt_kbd {
    width: 100%;
    padding: 1px;
    border: none;
    background-color: black;
}

JavaScript

$(document).ready(function () {
        $("input[name='tt_view_sel']").on('change', function () {
            view = $(this).val();
            if (view == "data") {
                $(".tt_toolhdr").hide();
            } else {
                $(".tt_toolhdr").show();
            }
        });
    });