Mobile Frame Hangar (Chat-enabled)

by XGundam05

HTML

<div id="hangar">
    <iframe src="http://mobileframehangar.com/index.php"></iframe>
</div>
<div id="chat">
    <div class="chat-header"><span>#mf0 IRC</span></div>
    <div class="iframe-wrapper">
        <iframe src="http://webchat.nightstar.net/?channels=mf0"></iframe>
    </div>
</div>

SCSS

html,body {
    font-family:arial, helvetica, sans-serif;
    font-size:10px;
    margin:0;
    overflow:hidden;
    padding:0;
}
iframe {
    border:none;
    height:100%;
    width:100%;
}
#hangar {
    left:0;
    height:100%;
    position:absolute;
    top:0;
    width:100%;
    z-index:1;
}
#chat {
    bottom:10px;
    border:3px solid #666;
    height:200px;
    opacity:0.5;
    position:absolute;
    right:10px;
    width:500px;
    z-index:10;
    /* CSS transition: animate opacity without using JS */
    /*-moz-transition: opacity .25s linear;
    -webkit-transition: opacity .25s linear;
    -o-transition: opacity .25s linear;
    transition: opacity .25s linear;*/
    &:hover {
        opacity:1;
    }
    .iframe-wrapper {
        height:100%;
    }
    .chat-header {
        background-color:#ccc;
        border:3px solid #666;
        border-bottom:none;
        bottom:100%;
        font-weight:bold;
        left:-3px;
        padding:5px;
        position:absolute;
        width:490px;
    }
}

JavaScript

$('#chat').draggable().resizable();