Iframe Tabs

Tabs that change the iframe to desired website

by ctwheels

HTML

<body onresize="myFunction()">
    <div class="header_bar" id="header_bar">
        <div class="tab_active" onclick="document.getElementById('main_iframe').src='http://www.w3schools.com'">HOME</div>
        <div class="tab_inactive" onclick="document.getElementById('main_iframe').src='http://www.w3schools.com/html/html_intro.asp'">HTML</div>
        <div class="tab_inactive" onclick="document.getElementById('main_iframe').src='http://www.w3schools.com/js/js_intro.asp'">JS</div>
        <div class="tab_inactive" onclick="document.getElementById('main_iframe').src='http://www.w3schools.com/sql/sql_intro.asp'">SQL</div>
        <div class="tab_inactive" onclick="document.getElementById('main_iframe').src='http://www.w3schools.com/php/php_intro.asp'">PHP</div>
        <div class="tab_inactive" onclick="document.getElementById('main_iframe').src='http://www.w3schools.com/xml/xml_whatis.asp'">XML</div>
    </div>
    <div id="iframe_and_div_container">
        <div class="iframe_container">
            <iframe id="main_iframe" class="main_iframe" frameborder="0" src="http://www.w3schools.com"></iframe>
        </div>
    </div>
</body>

CSS

body {
        overflow:hidden;
    }
    #iframe_and_div_container {
        position:relative;
        height:400px;
        width:800px;
    }
    .iframe_container {
        position:absolute;
        left:0px;
        right:0px;
        bottom:0px;
        top:0px;
    }
    .main_iframe {
        width: 100%;
        height: 100%;
    }
    .header_bar {
        position:fixed;
        width: 100%;
        height: 40px;
        background-color:grey;
        display:block;
        overflow:hidden;
        z-index:1000;
    }
    .tab_inactive, .tab_active {
        float: left;
        width:70px;
        padding:5px;
        margin:2px;
        border:2px solid grey;
        background-color:white;
        box-shadow:2px 2px #333333;
        text-align:center;
    }

JavaScript

var height = window.innerHeight;
var width = document.body.offsetWidth + 8;
var heightOfTabs = document.getElementById("header_bar").clientHeight;
var newHeight = height - heightOfTabs - 8;
document.getElementById("iframe_and_div_container").style.height = newHeight + "px";
document.getElementById("iframe_and_div_container").style.top = heightOfTabs + "px";
document.getElementById("iframe_and_div_container").style.width = width + "px";