Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum- scale=1,width=device-width">
- <meta name="mobile-web-app-capable" content="yes">
- <meta name="apple-mobile-web-app-capable" content="yes">
- <meta name="theme-color" content="#000000">
- <meta name="description" content="">
- <meta name="author" content="">
- <title>Imagining Ancient Cornith</title>
- <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
- <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
- <script src="assets/js/ver.js"></script>
- <!-- Load Leaflet - map application -->
- <link rel="stylesheet" href="leaflet/leaflet.css"/>
- <script src="leaflet/leaflet.js"></script>
- <script src="leaflet/shp.js"></script>
- <script src="leaflet/catiline.js"></script>
- <script src="leaflet/leaflet.shpfile.js"></script>
- </head>
- <body>
- <div class="navbar navbar-inverse navbar-static-top" role="navigation">
- <div class="container-fluid">
- <div class="navbar-header">
- <div class="navbar-icon-container">
- <a href="#" class="navbar-icon pull-right visible-xs" id="nav-btn"><i class="fa fa-bars fa-lg white"></i></a>
- <a href="#" class="navbar-icon pull-right visible-xs" id="sidebar-toggle-btn"><i class="fa fa-search fa-lg white"></i></a>
- </div>
- <a class="navbar-brand" href="#">IAC</a>
- </div>
- <div class="navbar-collapse collapse">
- <form class="navbar-form navbar-right" role="search">
- <div class="form-group has-feedback">
- <input id="searchbox" type="text" placeholder="Search" class="form-control">
- <span id="searchicon" class="fa fa-search form-control-feedback"></span>
- </div>
- </form>
- <ul class="nav navbar-nav">
- <li class="dropdown">
- <a id="toolsDrop" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-globe white"></i> Resources <b class="caret"></b></a>
- <ul class="dropdown-menu">
- <li><a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="full-extent-btn"><i class="fa fa-arrows-alt"></i> About</a></li>
- <li><a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="legend-btn"><i class="fa fa-picture-o"></i> Home</a></li>
- <li><a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="legend-btn"><i class="fa fa-picture-o"></i> Culture Essays</a></li>
- <li><a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="legend-btn"><i class="fa fa-picture-o"></i> Vocab</a></li>
- <li><a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="legend-btn"><i class="fa fa-picture-o"></i> Grammar</a></li>
- <li><a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="legend-btn"><i class="fa fa-picture-o"></i> Media</a></li>
- <li><a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="legend-btn"><i class="fa fa-picture-o"></i> Activities</a></li>
- <li class="divider hidden-xs"></li>
- <li><a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="login-btn"><i class="fa fa-user"></i> Login</a></li>
- </ul>
- </li>
- <li class="dropdown">
- <a class="dropdown-toggle" id="downloadDrop" href="#" role="button" data-toggle="dropdown"><i class="fa fa-cloud-download white"></i> Table Of Contents <b class="caret"></b></a>
- <ul class="dropdown-menu">
- <li><a href="#" target="_blank" data-toggle="collapse" data-target=".navbar-collapse.in"><i class="fa fa-download"></i> Book 1</a></li>
- <li><a href="#" target="_blank" data-toggle="collapse" data-target=".navbar-collapse.in"><i class="fa fa-download"></i> Book 2</a></li>
- <li><a href="#" target="_blank" data-toggle="collapse" data-target=".navbar-collapse.in"><i class="fa fa-download"></i> Book 3</a></li>
- <li><a href="#" target="_blank" data-toggle="collapse" data-target=".navbar-collapse.in"><i class="fa fa-download"></i> Book 4</a></li>
- </ul>
- </li>
- <li class="hidden-xs"><a id="readings-btn" href="#" data-toggle="collapse" data-target=".navbar-collapse.in"><i class="fa fa-list white"></i> Readings</a></li>
- </ul>
- </div><!--/.navbar-collapse -->
- </div>
- </div>
- <div class="container-fluid">
- <div id="sidebar" class="col-xs-2 bg-warning">
- <h4>Options</h4>
- <ul>
- <li>Pre Readings</li>
- <li>Passage</li>
- <li>Post Readings</li>
- <li>Media</li>
- <li>Questions</li>
- </ul>
- </div>
- <div id="map" class="col-xs-5 bg-info">
- </div>
- <div id="text-container" class="col-xs-5 bg-success">
- <div id="text-title"> I am a title </div>
- <div id="text-content"> Hey, I guess this is where our readings are going to be located.</div>
- </div>
- $("#readings-btn").on("click", function(e){
- if($("#sidebar").is(":hidden")){
- $("#sidebar").show();
- $("#map").removeClass("col-xs-6").addClass("col-xs-5");
- $("#text-container").removeClass("col-xs-6").addClass("col-xs-5");
- } else {
- $("#sidebar").hide();
- $("#map").removeClass("col-xs-5").addClass("col-xs-6");
- $("#text-container").removeClass("col-xs-5").addClass("col-xs-6");
- }
- });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement