Sidebar Panel Slider with KEEPALIVE

by bizamajig

HTML

<div id='rightbar-min'>S<br/>h<br/>o<br/>w<br/><br/>S<br/>c<br/>h<br/>e<br/>d<br/>u<br/>l<br/>e</div>
<div id='rightbar-full'>
    <div class='hd'>
        <div class='minimize'></div>
        NA vs EU schedule
    </div>
    <div class='bd'>
        <iframe src='#.html'></iframe>
        <table width='100%'>
            <tr>
                <td colspan='2'>Day 1</td>
            </tr>
            <tr>
                <td style='width: 15%;'></td>
                <td>Player 1 (3) vs Player 2 (2)</td>
            </tr>
            <tr>
                <td colspan='2'>Day 2</td>
            </tr>
            <tr>
                <td></td>
                <td>Player 1 (3) vs Player 2 (2)</td>
            </tr>
            <tr>
                <td colspan='2'>Day 3</td>
            </tr>
            <tr>
                <td></td>
                <td>Player 1 (3) vs Player 2 (2)</td>
            </tr>
            <tr>
                <td colspan='2'>Day 4</td>
            </tr>
            <tr>
                <td></td>
                <td>Player 1 (3) vs Player 2 (2)</td>
            </tr>
        </table>
    </div>
    <div class='ft'>
        Last updated: 4 minutes ago
    </div>
</div>

CSS

#rightbar-full,
#rightbar-min {
    position: fixed;
    top: 25%;
    right: 0;
    height: 400px;
    width: 250px;
    
    background-color: #333;
    border: 1px solid #454542;
    border-width: 1px 0 1px 1px;
    
    -moz-box-shadow: 2px 2px 3px #000;
    -webkit-box-shadow: 2px 2px 3px #000;
    box-shadow: 2px 2px 3px #000;
    
    -webkit-border-top-left-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
#rightbar-full {
    background: -webkit-gradient(linear, left top, left bottom, from(#3a3933), to(#151615));
    background: -moz-linear-gradient(top,  #3a3933,  #151615);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3a3933', endColorstr='#151615');    
}
    #rightbar-full .hd {
        padding: 4px;
    
        color: #c0beae;
        font-weight: bold;
        text-align: center;
        
        border-bottom: 1px solid #585854;
    }
        #rightbar-full .hd .minimize {
            float: left;
            width: 16px;
            height: 16px;
            cursor: pointer;
            
            border: 1px solid #ccc;
        }
    #rightbar-full .bd {
        height: 345px;
    }
    #rightbar-full .ft {
        padding: 2px;
    
        color: #6f6f69;
        font-size: 12px;
        text-align: right;
        
        border-top: 1px solid #454542;
    }
#rightbar-min {
    background-color: #151615;
    width: 35px;
    height: 330px;
    cursor: pointer;
    
    color: #c0beae;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    word-wrap: break-word;
    
    padding-top: 70px;
}

JavaScript

$(document).ready(function () {
    $('#rightbar-full .minimize').bind('click', function () {
        $('#rightbar-full').hide();
    });
    
    $('#rightbar-min').bind('click', function () {
        $('#rightbar-full').show();
    });

    function updateSchedule () {
        var iframe = $('')
        jQuery.ajax({
            url: iKeyLess.internal.url+'/ajax/keepalive.php',
            error: function (error, t, msg) {
                console.log({
                    error: error,
                    t: t,
                    msg: msg
                });
            }
        });
        
        setTimeout(function () {
            keepAlive();
        }, 30000);
    }
    
    //set keepalive to keep staff from being logged out
    setTimeout(function () {
        keepAlive();
    }, 30000);
});