Difference between revisions of "Template:Example2"

m (Changed protection level for "Template:Example2" ([Edit=Allow only administrators] (indefinite) [Move=Allow only administrators] (indefinite)) [cascading])
 
(48 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");
 
$(this).children().toggleClass("open");
 +
// show or hide the submenu
 
$(this).next('.submenu_wrapper').fadeToggle(400);
 
$(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(){
 
$("#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 43: 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 62: Line 84:
  
 
</script>
 
</script>
 +
 +
 +
  
  
Line 74: 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 86: 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 114: 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 15px;  
+
font-size: 12px;  
 
font-weight: bold;  
 
font-weight: bold;  
−
font-size: 12px;
 
 
color: #5e5f5f;  
 
color: #5e5f5f;  
−
float:left;
 
 
cursor: pointer;
 
cursor: pointer;
 
}
 
}
Line 131: Line 160:
  
 
.menu_button.direct_to_page {  
 
.menu_button.direct_to_page {  
−
padding-left: 36px;
+
padding-left: 36px;
 
}
 
}
  
Line 152: 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 167: Line 196:
 
.igem_2017_menu_wrapper .submenu_button {  
 
.igem_2017_menu_wrapper .submenu_button {  
 
width: 100%;  
 
width: 100%;  
−
border-bottom: 1px solid #d3d3d3;
 
 
padding: 10px 0px 10px 34px;  
 
padding: 10px 0px 10px 34px;  
 +
float:left;
 +
background-color:#f2f2f2;
 +
border-bottom: 1px solid #d3d3d3;
 
font-size: 12px;  
 
font-size: 12px;  
 
color: #5e5f5f;  
 
color: #5e5f5f;  
−
float:left;
 
−
background-color:#f2f2f2;
 
 
cursor: pointer;
 
cursor: pointer;
 
}
 
}
Line 193: 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 206: 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 241: 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 299: 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 309: 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 332: 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 344: 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 356: 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 369: 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 384: 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 395: 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 406: 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 445: 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 541: 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 594: Line 638:
 
</div>  
 
</div>  
 
</a>
 
</a>
 +
  
  
Line 608: 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 614: 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 680: 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_bottom_padding" >
 
<div class="menu_bottom_padding" >
Line 685: Line 738:
 
 
 
</div>
 
</div>
 +
 +
 +
 +
 
</div>
 
</div>
  
Line 691: 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