<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project name</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Settings</a></li> <li><a href="#">Help</a></li> </ul> </div> </div> </nav> <div class="container-fluid"> <div class="row"> <div id="sidebar" class="hidden-xs col-sm-3 col-lg-2 sidebar"> </div> <div class="col-xs-12 col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main" id="map"> </div> </div> <div class="row"> <div class="col-xs-12 timebar"> <div> <div class="btn-group hidden-sm hidden-md hidden-lg"> <a href="#" role="button" class="btn btn-sm btn-default" id="runners_show_button"><i class="fa fa-users"></i></a> </div> <div class="btn-group" id="view_mods_buttons"> <a href="#" role="button" class="btn btn-sm btn-default" id="live_button">Live</a> <a href="#" role="button" class="btn btn-sm btn-default active" id="replay_button">Replay</a> </div> <div class="btn-group" id="replay_mode_buttons"> <a href="#" role="button" class="btn btn-sm btn-default active" id="real_time_button">Real Time</a> <a href="#" role="button" class="btn btn-sm btn-default" id="mass_start_button">Mass start</a> </div> <div class="btn-group" id="replay_control_buttons"> <a href="#" role="button" class="btn btn-sm btn-default" id="prev_button"><i class="fa fa-backward"></i></a> <a href="#" role="button" class="btn btn-sm btn-default" id="play_pause_button"><i class="fa fa-play"></i></a> <a href="#" role="button" class="btn btn-sm btn-default" id="next_button"><i class="fa fa-forward"></i></a> </div> </div> <div style="padding-top:5px;"> <div id="full_progress_bar" class="progress" style="cursor: pointer"> <div id="progress_bar" class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"> <span id="progress_bar_text" style="color:#666;padding:5px">00:00/00:00</span> </div> </div> </div> </div> </div> </div> <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

/* * Base structure */ /* Move down content because we have a fixed navbar that is 50px tall */ body { padding-top: 50px; } /* * Global add-ons */ .sub-header { padding-bottom: 10px; border-bottom: 1px solid #eee; } /* * Top navigation * Hide default border to remove 1px line. */ .navbar-fixed-top { border: 0; } /* * Sidebar */ .sidebar { position: fixed; top: 51px; bottom: 90px; left: 0; z-index: 1000; display: block; padding: 20px; overflow-x: hidden; overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ background-color: #f5f5f5; border-right: 1px solid #eee; } .timebar{ position: absolute; padding-top:15px; bottom:0px; height:90px; background-color: #e5e5e5; } /* Sidebar navigation */ .nav-sidebar { margin-right: -21px; /* 20px padding + 1px border */ margin-bottom: 20px; margin-left: -20px; } .nav-sidebar > li > a { padding-right: 20px; padding-left: 20px; } .nav-sidebar > .active > a, .nav-sidebar > .active > a:hover, .nav-sidebar > .active > a:focus { color: #fff; background-color: #428bca; } /* * Main content */ .main { position: fixed; top: 51px; bottom: 90px; right: 0px; left: 0px; } .main .page-header { margin-top: 0; }

$(function(){ var map = L.map('map').setView([51.505, -0.09], 13); L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>', maxZoom: 18 }).addTo(map); $("#runners_show_button").on('click', function(e){ e.preventDefault(); if($('#sidebar').hasClass('hidden-xs')){ $('#sidebar').removeClass('hidden-xs'); $('#sidebar').addClass('col-xs-12'); $('#map').addClass('hidden-xs'); }else{ $('#sidebar').addClass('hidden-xs'); $('#sidebar').removeClass('col-xs-12'); $('#map').removeClass('hidden-xs'); } }) })