JSFiddle - React, Tailwind, and code Playground

http://stackoverflow.com/questions/17630591/fade-out-controls-when-theres-no-keyboard-mouse-input

by idleberg

HTML

<canvas id="my-canvas"></canvas>
<button id="btn-panel-toggle">Hide Panel</button>
<div id="panel">
    <div class="controls">
        <div class="song-controls">
            <label>
                <input placeholder="Soundcloud Track URL" id="sc-url" type="text" value="http://soundcloud.com/lone-1/lone-airglow-fires" />
            </label>
            <button id="btn-play">Play</button>
        </div>
        <div class="code-controls">
            <button id="btn-runpreset">Run Preset</button>
            <select id="dim-factor" title="Canvas Size Factor">
                <option value="1">1x</option>
                <option value="2">2x</option>
                <option value="4">4x</option>
                <option value="8">8x</option>
            </select>
        </div>
    </div>
    <div id="preset-code"></div>
</div>

CSS

body {
    overflow: scroll;
    background-color: grey;
}
button, select {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 5px;
    border: 1px solid transparent;
    padding: 5px;
    -webkit-appearance: none;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}
button:hover, input:hover, select:hover {
    border: 1px solid rgba(255, 255, 255, 0.6);
}
button:hover, select:hover {
    cursor: pointer;
}
button:active {
    background-color: rgba(255, 255, 255, 0.9);
}
input {
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 5px;
    border: 1px solid transparent;
    padding: 5px;
    color: rgba(255, 255, 255, 0.6);
    box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.9);
}
input:hover {
    cursor: text;
}
#my-canvas {
    position: absolute;
    top: 0px;
    left:0px;
    width:50px;
    height:50px;
    border:1px solid yellow;
}
#panel {
    position: absolute;
    top: 100px;
    left:100px;
    width: 650px;
    background-color: transparent;
    border-radius: 5px;
    padding: 15px;
    cursor: move;
    background-color: rgba(192, 192, 192, 0.6);
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
    border:1px solid red;
}
#panel .controls {
    padding: 5px 0px;
}
#panel .song-controls {
    float:right;
}
#btn-panel-toggle {
    position: absolute;
    top: 10px;
    right: 10px;
}
#preset-code .CodeMirror {
    /* Set height, width, borders, and global font properties here */
    font-family: monospace;
    height: 300px;
    background-color: transparent;
}

JavaScript

$(function () {
    
    var t = null; //timer
    var is_url_focused = false, is_panel_hovered = false;
    
    function hide_panel(){
        if (t) {
            clearTimeout(t);
        }
        t = setTimeout(function(){
            if (is_url_focused || is_panel_hovered) {
                return;
            }
            $('#panel').stop().animate({
                opacity:0
            },800);
        },2000);
    }
    
    function show_panel(){
        $('#panel').stop().animate({
            opacity:1
        },800);
    }
    
    $('#panel,#btn-panel-toggle,#my-canvas').mouseenter(function(){
        is_panel_hovered = true;
        show_panel();
    }).mouseleave(function(){
        is_panel_hovered = false;
        hide_panel();
    });
    $('#sc-url').focus(function(){
        is_url_focused = true;
        show_panel();
    }).blur(function(){
        is_url_focused = false;
        hide_panel();
    });
    $('#btn-panel-toggle').click(function(){
        $('#panel').toggle();
    });

});