Bootstrap 3 Template

This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.

by DIdac Montero

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div class="container" id="playerNavi">
    <div class="row">
        <div class="parent">
            <img class="img-responsive" src="http://cdn.homesthetics.net/wp-content/uploads/2013/10/17-Inspiring-Wonderful-Black-and-White-Contemporary-Interior-Designs-Homesthetics-151.jpg"></img>
            <div class="child top">
                <img class="img-responsive logo" src="http://clipnow.com/panorama/logo70.png"></img>
            </div>
            <!-- FLOORPLAN STARTS -->
            <div class="child floorPlan">
                <div class="active">
                     <h3>og</h3>

                </div>
                <div>
                     <h3>eg</h3>

                </div>
                <div>
                     <h3>ug</h3>

                </div>
            </div>
            <!-- FLOORPLAN END -->
            <!-- MAP STARTS -->
            <div class="child map">
                <img src="https://clipnow-assets.s3.amazonaws.com/plan2.jpg" />
            </div>
            <!-- MAP END -->
            <!-- NAVIGATION MENU START -->
            <div class="child playerNaviMenu">
                <div class="img-responsive logoHomeBlock"></div>
                <div class="arrow top"><i class="fa fa-chevron-up fa-lg"></i>

                </div>
                <ul>
                    <li class="activeNaviItem">
                        <img class="img-responsive circular" src="http://img1.sunset.timeinc.net/sites/default/files/image/2010/01/after-cottage-kitchen-0110-l.jpg"></img>
                         <h4>Entry</h4>

                    </li>
                    <li>
                        <img class="img-responsive circular"...

CSS

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
 @import url('//getbootstrap.com/dist/css/bootstrap.css');
 @import url(//fonts.googleapis.com/css?family=Droid+Sans);
 #playerNavi .parent {
    position:relative;
    overflow:hidden;
}
#playerNavi .child {
    z-index: 1000;
    position:absolute;
    top:0px;
    background: rgba(240, 240, 240, .6);
    height: 100%;
    overflow: hidden;
}
#playerNavi .child .logoHomeBlock {
    background:url(//live2.clipnow.com/assets/images/panorama/home.png) no-repeat center center;
    position: relative;
    background-color: #5eaf31;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    max-height: 70px;
    min-height: 45px;
    z-index: -1;
}
#playerNavi .child.top {
    width: 100%;
    height: 10%;
    padding-left: 4.5%;
    max-height: 70px;
    min-height: 45px;
}
#playerNavi .logo {
    position:absolute;
    right: 0;
    top: 0;
    height: 100%;
    max-height: 70px;
    min-height: 45px;
    z-index: 1001;
}
#playerNavi .child.map {
    background-color: #161616;
    opacity: 0.8;
    max-width: 50%;
    height: auto;
    top: 0;
    right: 0;
    z-index:;
}
#playerNavi .child.map img {
    max-width: 100%;
    height: auto;
}
#playerNavi .child.floorPlan {
    background-color: #161616;
    opacity: 0.8;
    width: auto;
    height: auto;
    top: 40%;
    right: 0;
    z-index:;
}
#playerNavi .floorPlan div {
    padding: 10px;
    border-bottom: 1px solid #eee;
}
#playerNavi .floorPlan div.active {
    border-right: thick solid #5eaf31;
    height: 100%;
}
#playerNavi .floorPlan h3 {
    text-transform: uppercase;
    margin: 0;
    text-align:center;
    z-index: 1001;
    color: white;
    font-size: 16px;
}
#playerNavi .child.playerNaviMenu {
    width: 15%;
    color: white;
    max-width: 110px;
    min-width: 60px;
    background-color: #161616;
    opacity: 0.8;
    height:100%;
    z-index:;
    display:...

JavaScript

var list = $("#playerNavi ul");
var isPressed = false;

$("#playerNavi .arrow.top").mousedown(function (e) {
    isPressed = true;
    runAnimation(false);
    e.preventDefault();
});
$("#playerNavi .arrow.bottom").mousedown(function (e) {
    isPressed = true;
    runAnimation(true);
    e.preventDefault();
});
// TODO: we don't get the mouse up event if it happens over the player
$(document).mouseup(function (e) {
    console.log("Mouse up");
    isPressed = false;
    list.stop();
    e.preventDefault();
});

function runAnimation(goesDown) {
    if (isPressed) {
        var scrollTo = goesDown ? (list.scrollTop() + 30) : (list.scrollTop() - 30);
        list.animate({
            scrollTop: scrollTo
        }, 200, function () {
            runAnimation(goesDown);
        });
    }
}