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"><span>1</span>
            </div>
            <div class="tt_key tenth"><span>2</span>
            </div>
            <div class="tt_key tenth"><span>3</span>
            </div>
            <div class="tt_key tenth"><span>4</span>
            </div>
            <div class="tt_key tenth"><span>5</span>
            </div>
            <div class="tt_key tenth"><span>6</span>
            </div>
            <div class="tt_key tenth"><span>7</span>
            </div>
            <div class="tt_key tenth"><span>8</span>
            </div>
            <div class="tt_key tenth"><span>9</span>
            </div>
            <div class="tt_key tenth"><span>0</span>
            </div>
            <div style="clear: both"></div>
        </div>
        <div class="tt_kbdrow">
            <div class="tt_key...

CSS

div.tt_key {
    float: left;
    
    border: 1px solid black;
    box-sizing: border-box;
    text-align: center;
    height: 3em;
    margin-left: 0.25%;
    margin-right: 0.25%;
    margin-top: 0px;
    margin-bottom: 2px;
    background-color: #f6f6f6;
    font-weight: 600;
    border-radius: 3px;
    cursor: pointer;
    display: table;
    
}
div.tt_key span {
        display: table-cell;
        vertical-align: middle;
    }

div.tt_key.tenth {
    width: 9%;
}
div.tt_key.fifth {
    width: 19%;
}
div.tt_key.threefifths {
    width: 58%;
}
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();
            }
        });
    });