Difference between revisions of "Team:ColumbiaNYC"

Line 1: Line 1:
−
{{ColumbiaNYC_navbar}}
 
−
 
 
<html>
 
<html>
 +
<head>
 +
<!-- Bootstrap Core CSS-->
 +
<link href="https://2017.igem.org/Team:ColumbiaNYC/Resources/CSS:bootstrap_min?action=raw&ctype=text/css" rel="stylesheet">
  
−
<style>
+
<!-- Custom CSS-->
−
</style>
+
<link href="https://2017.igem.org/Team:ColumbiaNYC/Resources/CSS:contentstyle?action=raw&ctype=text/css" rel="stylesheet">
  
−
<body id="page-top">
+
<!-- jQuery -->
 +
<script type="text/javascript" src="https://2017.igem.org/Team:ColumbiaNYC/Resources/JS:jquery?action=raw&ctype=text/javascript"></script>
 +
<!-- OR <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>-->
  
−
  <!-- Full Width Image Header -->
+
<!-- Bootstrap Core JavaScript -->
−
  <header class="header-image">
+
<script type="text/javascript" src="https://2017.igem.org/Team:ColumbiaNYC/Resources/JS:bootstrap_min?action=raw&ctype=text/javascript"></script>
−
      <div class="headline">
+
−
          <div class="container">
+
−
              <h1>Columbia iGEM</h1>
+
−
              <h2>Will Knock Your Socks Off</h2>
+
−
          </div>
+
−
      </div>
+
−
  </header>
+
  
−
  <!-- Page Content -->
+
<script>
−
  <div class="container">
+
  
−
      <hr class="featurette-divider">
+
// This is the jquery part of your template.
 +
// Try not modify any of this code too much since it makes your menu work.
  
−
      <!-- First Featurette -->
+
$(document).ready(function() {
−
      <div class="featurette" id="about">
+
−
          <img class="featurette-image img-circle img-responsive pull-right" src="http://placehold.it/500x500">
+
−
          <h2 class="featurette-heading">This First Heading
+
−
              <span class="text-muted">Will Catch Your Eye</span>
+
−
          </h2>
+
−
          <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
+
−
      </div>
+
  
−
      <hr class="featurette-divider">
+
$("#HQ_page").attr('id','');
  
−
      <!-- Second Featurette -->
+
// call the functions that control the menu
−
      <div class="featurette" id="services">
+
menu_functionality();
−
          <img class="featurette-image img-circle img-responsive pull-left" src="http://placehold.it/500x500">
+
hide_show_menu();
−
          <h2 class="featurette-heading">The Second Heading
+
−
              <span class="text-muted">Is Pretty Cool Too.</span>
+
−
          </h2>
+
−
          <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
+
−
      </div>
+
  
−
      <hr class="featurette-divider">
 
  
−
      <!-- Third Featurette -->
 
−
      <div class="featurette" id="contact">
 
−
          <img class="featurette-image img-circle img-responsive pull-right" src="http://placehold.it/500x500">
 
−
          <h2 class="featurette-heading">The Third Heading
 
−
              <span class="text-muted">Will Seal the Deal.</span>
 
−
          </h2>
 
−
          <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
 
−
      </div>
 
  
−
      <hr class="featurette-divider">
+
//this function controls the expand and collapse buttons of the menu and changes the +/- symbols
 +
function menu_functionality() {
  
−
  </div>
+
//when clicking on a "menu_button", it will change the "+/-" accordingly and it will show/hide the corresponding submenu
 +
$(".menu_button").click(function(){
  
−
</body>
+
// add or remove the class "open" , this class holds the "-"
 +
$(this).children().toggleClass("open");
 +
// show or hide the submenu
 +
$(this).next('.submenu_wrapper').fadeToggle(400);
 +
});
  
 +
// when the screen size is smaller than 800px, the display_menu_control button appears and will show/hide the whole menu
 +
$("#display_menu_control").click(function(){
 +
$('#menu_content').fadeToggle(400);
 +
});
  
−
</html>
+
// call the current page highlight function
 +
highlight_current_page();
 +
}
  
−
{{ColumbiaNYC_footer}}
+
 
 +
// call the highlight current page function to show it on the menu with a different background color
 +
function highlight_current_page() {
 +
 
 +
// select a page from the menu based on the id assigned to it and the current page name and add the class "current page" to make it change background color
 +
$("#"+  wgPageName.substring(wgPageName.lastIndexOf("/")+1, wgPageName.length ) + "_page").addClass("current_page");
 +
 
 +
// now that the current_page class has been added to a menu item, make the submenu fade in
 +
$(".current_page").parents(".submenu_wrapper").fadeIn(400);
 +
// change the +/- symbol of the corresponding menu button
 +
$(".current_page").parents(".submenu_wrapper").prev().children().toggleClass("open");
 +
 
 +
}
 +
 
 +
 
 +
 
 +
// allow button on the black menu bar to show/hide the side menu
 +
function hide_show_menu() {
 +
 
 +
// in case you preview mode is selected, the menu is hidden for better visibility
 +
if (window.location.href.indexOf("submit") >= 0) {
 +
$(".igem_2017_menu_wrapper").hide();
 +
}
 +
 
 +
// if the black menu bar has been loaded
 +
  if (document.getElementById('bars_item')) {
 +
 
 +
// when the "bars_item" has been clicked
 +
$("#bars_item").click(function() {
 +
$("#sideMenu").hide();
 +
 
 +
// show/hide the menu wrapper
 +
$(".igem_2017_menu_wrapper").fadeToggle("100");
 +
});
 +
  }
 +
 
 +
// because the black menu bars loads at a different time than the rest of the page, this function is set on a time out so it can run again in case it has not been loaded yet
 +
else {
 +
    setTimeout(hide_show_menu, 15);
 +
}
 +
}
 +
 
 +
 
 +
});
 +
 
 +
 
 +
</script>
 +
 
 +
 
 +
<style>
 +
 
 +
 
 +
 
 +
/***************************************************** DEFAULT WIKI SETTINGS  ****************************************************/
 +
 
 +
/* Clear the default wiki settings */
 +
 
 +
#sideMenu, #top_title, .patrollink  {display:none;}
 +
#content { width:100%; padding:0px;}
 +
body {background-color:white; width: 100%}
 +
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 +
#bodyContent {padding-right: 0px;}
 +
#globalWrapper {font-size: 100%; padding: 0px; margin: -10px -20px -20px -20px;}
 +
.navbar-collapse {padding-left: 0px;}
 +
#banner {margin-top: 50px;}
 +
#sideMenu {margin-top: 10px;}
 +
.dropdown-menu li:hover .sub-menu {visibility: visible;}
 +
.dropdown:hover .dropdown-menu {display: block;}
 +
.navbar-nav .dropdown-menu,
 +
.navbar .dropdown-menu {margin-top: 0;}
 +
 
 +
 
 +
/* special class that the system uses to make sure the team wants a page to be evaluated */
 +
.judges-will-not-evaluate {
 +
    width: 96.6%;
 +
  margin: 5px 15px;
 +
  display: block;
 +
border: 4px solid #3399ff;
 +
    font-weight: bold;
 +
}
 +
 
 +
#logo img {
 +
width: 68px;
 +
float: left;
 +
padding-top: 7px;
 +
background: white;
 +
margin-left:0px;
 +
margin-bottom:0px;
 +
}
 +
 
 +
</style>
 +
 
 +
</head>
 +
 
 +
 
 +
<!--- THIS IS WHERE THE HTML BEGINS --->
 +
 
 +
<body>
 +
 
 +
<!-- Navigation -->
 +
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="padding-top: 20px">
 +
<div class="container-fluid">
 +
<!-- Brand and toggle get grouped for better mobile display -->
 +
<div class="navbar-header">
 +
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
 +
<span class="sr-only">Toggle navigation</span>
 +
<span class="icon-bar"></span>
 +
<span class="icon-bar"></span>
 +
<span class="icon-bar"></span>
 +
</button>
 +
<div id="logo">
 +
<a href="https://2017.igem.org/Team:ColumbiaNYC">
 +
<img src="https://static.igem.org/mediawiki/2017/e/e4/T--ColumbiaNYC--columbiauniversity.jpg" alt="ColumbiaNYC logo" >
 +
</a>
 +
</div>
 +
<!--<a class="navbar-brand" href="https://2017.igem.org/Team:ColumbiaNYC">Columbia University</a>-->
 +
</div>
 +
<!-- Collect the nav links, forms, and other content for toggling -->
 +
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 +
<ul class="nav navbar-nav">
 +
<ul class="nav navbar-nav">
 +
<li class="dropdown">
 +
<a class="dropdown-toggle" data-toggle="dropdown">Achievements
 +
<span class="caret"></span>
 +
</a>
 +
<ul class="dropdown-menu">
 +
<li><a href="#">Page 1.1</a></li>
 +
<li><a href="#">Page 1.2</a></li>
 +
<li><a href="#">Page 1.3</a></li>
 +
<li><a href="#">Page 1.4</a></li>
 +
</ul>
 +
</li>
 +
<li>
 +
<a href="https://2017.igem.org/Team:ColumbiaNYC/Project">Project</a>
 +
</li>
 +
<li>
 +
<a href="https://2017.igem.org/Team:ColumbiaNYC/Team">Team</a>
 +
</li>
 +
<li>
 +
<a href="https://2017.igem.org/Team:ColumbiaNYC/Parts">Parts</a>
 +
</li>
 +
<li>
 +
<a href="https://2017.igem.org/Team:ColumbiaNYC/Sponsors">Sponsors</a>
 +
</li>
 +
<li>
 +
<a href="https://2017.igem.org/Team:ColumbiaNYC/Safety">Safety</a>
 +
</li>
 +
<li>
 +
<a href="https://2017.igem.org/Team:ColumbiaNYC/Human_Practices">Human Practices</a>
 +
</li>
 +
<li>
 +
<a href="https://2017.igem.org/Team:ColumbiaNYC/Awards">Awards</a>
 +
</li>
 +
</ul>
 +
</div>
 +
<!-- /.navbar-collapse -->
 +
</div>
 +
<!-- /.container -->
 +
</nav>
 +
 
 +
</body>
 +
 
 +
</html>

Revision as of 16:57, 22 June 2017