Difference between revisions of "Template:Example2"

m (Changed protection level for "Template:Example2" ([Edit=Allow only administrators] (indefinite) [Move=Allow only administrators] (indefinite)) [cascading])
 
(65 intermediate revisions by 6 users not shown)
Line 3: Line 3:
 
<script>
 
<script>
  
−
// This is the jquery part of your template.  Try not modify any of this code since it makes your menu work.
+
// This is the jquery part of your template.   
−
 
+
// Try not modify any of this code too much since it makes your menu work.
  
 
$(document).ready(function() {
 
$(document).ready(function() {
−
 
  
 
$("#HQ_page").attr('id','');
 
$("#HQ_page").attr('id','');
  
 +
// call the functions that control the menu
 +
menu_functionality();
 
hide_show_menu();
 
hide_show_menu();
−
menu_functionality();
 
  
  
  
−
 
+
//this function controls the expand and collapse buttons of the menu and changes the +/- symbols
−
//menu functionality
+
 
function menu_functionality() {
 
function menu_functionality() {
  
 +
//when clicking on a "menu_button", it will change the "+/-" accordingly and it will show/hide the corresponding submenu
 
$(".menu_button").click(function(){
 
$(".menu_button").click(function(){
 +
 +
// 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);
 
$(this).next('.submenu_wrapper').fadeToggle(400);
−
$( this ).children( '.expand_collapse_icon').toggleClass("open");
 
 
});
 
});
  
 +
// 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(){
 
$("#display_menu_control").click(function(){
 
$('#menu_content').fadeToggle(400);
 
$('#menu_content').fadeToggle(400);
 
});
 
});
  
 +
// call the current page highlight function
 
highlight_current_page();
 
highlight_current_page();
 
}
 
}
  
  
 +
// call the highlight current page function to show it on the menu with a different background color
 
function highlight_current_page() {
 
function highlight_current_page() {
  
−
$("#"+  wgPageName.substring(wgPageName.indexOf("/")+1, wgPageName.length ) + "_page").addClass("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
−
$(".current_page").parents().fadeIn(400);
+
$("#"+  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");
 
 
 
}
 
}
Line 42: Line 53:
  
  
−
// allow button on the black menu bar to show/hide the side menu
+
// allow button on the black menu bar to show/hide the side menu
 
function hide_show_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')) {
 
   if (document.getElementById('bars_item')) {
 +
 +
// when the "bars_item" has been clicked
 
$("#bars_item").click(function() {
 
$("#bars_item").click(function() {
 
$("#sideMenu").hide();
 
$("#sideMenu").hide();
 +
 +
// show/hide the menu wrapper
 
$(".igem_2017_menu_wrapper").fadeToggle("100");
 
$(".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 {
 
else {
 
     setTimeout(hide_show_menu, 15);
 
     setTimeout(hide_show_menu, 15);
Line 61: Line 84:
  
 
</script>
 
</script>
 +
 +
 +
  
  
Line 73: Line 99:
 
#home_logo, #sideMenu { display:none; }
 
#home_logo, #sideMenu { display:none; }
 
#sideMenu, #top_title, .patrollink  {display:none;}
 
#sideMenu, #top_title, .patrollink  {display:none;}
−
#content { padding:0px; width:100%; margin-top:-7px; margin-left:0px;}
+
#content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px;}
 
body {background-color:white; }
 
body {background-color:white; }
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
Line 85: Line 111:
 
width: 15%;  
 
width: 15%;  
 
height:100vh;  
 
height:100vh;  
−
position:fixed;  
+
position:fixed;
 +
right:0%;
 
padding:0px;
 
padding:0px;
 
float:right;  
 
float:right;  
 +
border-left: 1px solid #d3d3d3;
 
background-color:#dddddd;  
 
background-color:#dddddd;  
 
text-align:left;
 
text-align:left;
−
right:0%;
+
font-family:Tahoma, Geneva, sans-serif;  
 
overflow-y: auto;
 
overflow-y: auto;
 
overflow-x: hidden;
 
overflow-x: hidden;
−
border-left: 1px solid #d3d3d3;
 
−
font-family:Tahoma, Geneva, sans-serif;
 
 
}
 
}
  
 +
/* this hides the scrollbar to keep view consistency */
 +
.igem_2017_menu_wrappe::-webkit-scrollbar {
 +
display: none;
 +
}
 
 
 
 
Line 113: Line 143:
 
.igem_2017_menu_wrapper .menu_button {  
 
.igem_2017_menu_wrapper .menu_button {  
 
width: 100%;  
 
width: 100%;  
 +
padding: 10px 0px 10px 15px;
 +
float:left;
 
border-bottom: 1px solid #d3d3d3;  
 
border-bottom: 1px solid #d3d3d3;  
−
padding: 10px 0px 10px 25px;
 
−
font-weight: bold;
 
 
font-size: 12px;  
 
font-size: 12px;  
 +
font-weight: bold;
 
color: #5e5f5f;  
 
color: #5e5f5f;  
−
float:left;
 
 
cursor: pointer;
 
cursor: pointer;
 
}
 
}
  
 +
 +
.igem_2017_menu_wrapper .menu_bottom_padding {
 +
width: 100%;
 +
height: 30px;
 +
float:left;
 +
}
  
 
.menu_button.direct_to_page {  
 
.menu_button.direct_to_page {  
−
padding-left: 23%;
+
padding-left: 36px;
 
}
 
}
  
Line 137: Line 173:
 
}
 
}
 
 
−
.igem_2017_menu_wrapper .menu_button .expand_collpase_icon.open::before {
+
.open::before {
−
content: "-";   
+
content: "-" !important;   
 
}
 
}
 
 
Line 145: Line 181:
 
/* styling for the menu buttons on hover */
 
/* styling for the menu buttons on hover */
 
.igem_2017_menu_wrapper .menu_button:hover, .igem_2017_menu_wrapper .submenu_button:hover ,  .submenu_button.current_page:hover {  
 
.igem_2017_menu_wrapper .menu_button:hover, .igem_2017_menu_wrapper .submenu_button:hover ,  .submenu_button.current_page:hover {  
−
color:#ffffff;
 
 
background-color: #3399ff;  
 
background-color: #3399ff;  
 
text-decoration: none;
 
text-decoration: none;
 +
color:#ffffff;
 
}
 
}
  
Line 160: Line 196:
 
.igem_2017_menu_wrapper .submenu_button {  
 
.igem_2017_menu_wrapper .submenu_button {  
 
width: 100%;  
 
width: 100%;  
 +
padding: 10px 0px 10px 34px;
 +
float:left;
 +
background-color:#f2f2f2;
 
border-bottom: 1px solid #d3d3d3;  
 
border-bottom: 1px solid #d3d3d3;  
−
padding: 10px 0px 10px 25px;
 
 
font-size: 12px;  
 
font-size: 12px;  
 
color: #5e5f5f;  
 
color: #5e5f5f;  
−
float:left;
 
−
background-color:#f2f2f2;
 
 
cursor: pointer;
 
cursor: pointer;
 
}
 
}
Line 186: Line 222:
 
.igem_2017_content_wrapper {
 
.igem_2017_content_wrapper {
 
width: 81%;
 
width: 81%;
 +
margin: 2%;
 +
display:block;
 
float:left;  
 
float:left;  
 
background-color:white;  
 
background-color:white;  
−
margin: 2%;
 
−
display:block;
 
 
font-family:Tahoma, Geneva, sans-serif;  
 
font-family:Tahoma, Geneva, sans-serif;  
 
}
 
}
Line 199: Line 235:
 
.igem_2017_content_wrapper h1, .igem_2017_content_wrapper h2 {
 
.igem_2017_content_wrapper h1, .igem_2017_content_wrapper h2 {
 
padding:5px 15px;  
 
padding:5px 15px;  
−
border-bottom:0px;  
+
border-bottom: 0px;  
−
color: #3399ff;
+
color: #3399ff;
 
}
 
}
  
Line 234: Line 270:
 
.igem_2017_content_wrapper a:hover {  
 
.igem_2017_content_wrapper a:hover {  
 
text-decoration:none;
 
text-decoration:none;
−
color:#000000;
+
color:#000000;
 
}
 
}
  
Line 292: Line 328:
 
/* styling for images in a full width column*/
 
/* styling for images in a full width column*/
 
.column.full_size img {  
 
.column.full_size img {  
−
padding: 10px 15px;
 
 
width:97%;  
 
width:97%;  
 +
padding: 10px 15px;
 
}
 
}
  
Line 302: Line 338:
 
/* styling for images in a half width column*/
 
/* styling for images in a half width column*/
 
.column.half_size img {  
 
.column.half_size img {  
−
padding: 10px 15px;
 
 
width: 94.5%;
 
width: 94.5%;
 +
padding: 10px 15px;
 
}
 
}
  
Line 325: Line 361:
 
/* highlight class, makes content slightly smaller */
 
/* highlight class, makes content slightly smaller */
 
.igem_2017_content_wrapper .highlight {  
 
.igem_2017_content_wrapper .highlight {  
−
padding: 15px 0px;
 
 
margin: 0px 15px;
 
margin: 0px 15px;
 +
padding: 15px 0px;
 
}
 
}
  
Line 337: Line 373:
 
/* highlight with decoration blue line on top */
 
/* highlight with decoration blue line on top */
 
.igem_2017_content_wrapper .highlight.blue_top {
 
.igem_2017_content_wrapper .highlight.blue_top {
−
    border-top: 4px solid #3399ff;
+
    border-top: 4px solid #3399ff;
 
}
 
}
  
 
/* highlight with a full blue border decoration */
 
/* highlight with a full blue border decoration */
 
.igem_2017_content_wrapper .highlight.blue_border {
 
.igem_2017_content_wrapper .highlight.blue_border {
−
    border: 4px solid  #3399ff;
+
    border: 4px solid  #3399ff;
 
}
 
}
  
Line 349: Line 385:
 
.igem_2017_content_wrapper .button{
 
.igem_2017_content_wrapper .button{
 
max-width: 35%;
 
max-width: 35%;
 +
margin: 30px auto;
 +
padding: 12px 10px;
 
     background-color: #3399ff;
 
     background-color: #3399ff;
−
    padding: 12px 10px;
 
 
     text-align: center;
 
     text-align: center;
−
  margin: 30px auto;
 
 
   color: #ffffff;
 
   color: #ffffff;
 
-webkit-transition: all 0.4s ease;  
 
-webkit-transition: all 0.4s ease;  
Line 362: Line 398:
 
/* styling for button on hover */
 
/* styling for button on hover */
 
.igem_2017_content_wrapper .button:hover{
 
.igem_2017_content_wrapper .button:hover{
 +
background-color: #3399ff;
 
     color: #000000;
 
     color: #000000;
−
    background-color: #3399ff;
 
 
}
 
}
  
Line 377: Line 413:
 
.igem_2017_menu_wrapper {width:15%; right:0;}
 
.igem_2017_menu_wrapper {width:15%; right:0;}
 
.highlight {padding:10px 0px;}
 
.highlight {padding:10px 0px;}
−
#display_menu_control { display:none; }
+
.igem_2017_menu_wrapper #display_menu_control { display:none; }
 
#menu_content { display:block;}
 
#menu_content { display:block;}
 +
.menu_button.direct_to_page {padding-left: 17px;}
 
 
 
}
 
}
Line 388: Line 425:
 
.igem_2017_content_wrapper {width:100%; margin-left:0px;}
 
.igem_2017_content_wrapper {width:100%; margin-left:0px;}
 
.column.half_size  {width:100%; }
 
.column.half_size  {width:100%; }
−
.column.full_size img, .column.half_size img { padding: 10px 0px; width: 100%;}  
+
.column.full_size img, .column.half_size img { width: 100%; padding: 10px 0px;}  
 
.highlight {padding:15px 5px;}
 
.highlight {padding:15px 5px;}
−
#display_menu_control { display:block; }
+
.igem_2017_menu_wrapper #display_menu_control { display:block; }
 
#menu_content { display:none;}
 
#menu_content { display:none;}
 +
.igem_2017_menu_wrapper .menu_button .expand_collapse_icon { width: 5%; }
 +
.menu_bottom_padding {display:none;}
 +
.menu_button.direct_to_page { padding-left: 36px; }
 
}
 
}
  
Line 399: Line 439:
 
/* special class that the system uses to make sure the team wants a page to be evaluated */
 
/* special class that the system uses to make sure the team wants a page to be evaluated */
 
.judges-will-not-evaluate {
 
.judges-will-not-evaluate {
−
  border: 4px solid #3399ff;
+
    width: 96.6%;
−
  display: block;
+
 
   margin: 5px 15px;
 
   margin: 5px 15px;
−
  width: 96.6%;
+
  display: block;
 +
border: 4px solid #3399ff;
 
     font-weight: bold;
 
     font-weight: bold;
 
}
 
}
Line 438: Line 478:
 
<div id="menu_content">
 
<div id="menu_content">
 
 
 +
 +
 +
 +
<a href="https://2017.igem.org/Team:Example2">
 +
<div class="menu_button direct_to_page">
 +
HOME
 +
</div>
 +
</a>
 +
 +
 +
 
<div class="menu_button">
 
<div class="menu_button">
 
<div class="expand_collapse_icon">  </div> TEAM  
 
<div class="expand_collapse_icon">  </div> TEAM  
Line 534: Line 585:
 
<a href="https://2017.igem.org/Team:Example2/Attributions">
 
<a href="https://2017.igem.org/Team:Example2/Attributions">
 
<div class="submenu_button"  id="Attributions_page">
 
<div class="submenu_button"  id="Attributions_page">
−
Attribution
+
Attributions
 
</div>
 
</div>
 
</a>
 
</a>
Line 587: Line 638:
 
</div>  
 
</div>  
 
</a>
 
</a>
 +
  
  
Line 601: Line 653:
  
 
<a href="https://2017.igem.org/Team:Example2/HP/Silver">
 
<a href="https://2017.igem.org/Team:Example2/HP/Silver">
−
<div class="submenu_button" >
+
<div class="submenu_button"  id="Silver_page">
 
Silver HP
 
Silver HP
 
</div>
 
</div>
Line 607: Line 659:
  
 
<a href="https://2017.igem.org/Team:Example2/HP/Gold_Integrated">
 
<a href="https://2017.igem.org/Team:Example2/HP/Gold_Integrated">
−
<div class="submenu_button">
+
<div class="submenu_button" id="Gold_Integrated_page">
 
Integrated and Gold
 
Integrated and Gold
 
</div>
 
</div>
Line 673: Line 725:
  
 
</div>  
 
</div>  
 +
 +
<a href="https://igem.org/2017_Judging_Form?team=Example2">
 +
<div class="menu_button direct_to_page">
 +
JUDGING FORM
 +
</div>
 +
</a>
 +
 +
 
 
−
<div class="menu_button" >
+
<div class="menu_bottom_padding" >
 
</div>  
 
</div>  
 
 
 
</div>
 
</div>
 +
 +
 +
 +
 
</div>
 
</div>
  
Line 684: Line 748:
 
<!-- start of content -->
 
<!-- start of content -->
 
<div class="igem_2017_content_wrapper">
 
<div class="igem_2017_content_wrapper">
 +
<h1>Example2</h1>

Latest revision as of 14:03, 15 September 2017

HOME
TEAM
PROJECT
Description
Design
Experiments
Notebook
InterLab
Contribution
Model
Results
Demonstrate
Improve
Attributions
PARTS
Parts
Basic Parts
Composite Parts
Part Collection
SAFETY
HUMAN PRACTICES
Silver HP
Integrated and Gold
Public Engagement
AWARDS
Applied Design
Entrepreneurship
Hardware
Measurement
Model
Plant
Software
JUDGING FORM

Example2