Difference between revisions of "Template:UCLouvain"

 
(11 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<html>
−
<script>
+
 
−
$(document).ready(function() {
+
<script>
−
$("#HQ_page").attr('id','');
+
 
−
// call the functions that control the menu  
+
// This is the jquery part of your template. 
−
menu_functionality();  
+
// Try not modify any of this code too much since it makes your menu work.
−
hide_show_menu();
+
 
−
//this function controls the expand and collapse buttons of the menu and changes the +/- symbols
+
$(document).ready(function() {
−
function menu_functionality() {
+
 
−
//when clicking on a "menu_button", it will change the "+/-" accordingly and it will show/hide the corresponding submenu
+
$("#HQ_page").attr('id','');
−
$(".menu_button").click(function(){
+
 
−
// add or remove the class "open" , this class holds the "-"  
+
// call the functions that control the menu  
−
$(this).children().toggleClass("open");
+
menu_functionality();  
−
// show or hide the submenu
+
hide_show_menu();
−
$(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(){
+
//this function controls the expand and collapse buttons of the menu and changes the +/- symbols
−
$('#menu_content').fadeToggle(400);
+
function menu_functionality() {
−
});
+
 
−
// call the current page highlight function
+
//when clicking on a "menu_button", it will change the "+/-" accordingly and it will show/hide the corresponding submenu
−
highlight_current_page();
+
$(".menu_button").click(function(){
−
}
+
 
−
// call the highlight current page function to show it on the menu with a different background color
+
// add or remove the class "open" , this class holds the "-"  
−
function highlight_current_page() {
+
$(this).children().toggleClass("open");
−
// 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
+
// show or hide the submenu
−
$("#"+  wgPageName.substring(wgPageName.lastIndexOf("/")+1, wgPageName.length ) + "_page").addClass("current_page");
+
$(this).next('.submenu_wrapper').fadeToggle(400);
−
+
−
// 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>
+
 
−
+
// 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);
−
+
});
−
+
 
−
<style>
+
// call the current page highlight function
−
+
highlight_current_page();
−
+
}
−
+
 
−
/***************************************************** DEFAULT WIKI SETTINGS ****************************************************/
+
 
 +
// 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");
 
 
−
/* Clear the default wiki settings */
+
}
−
+
 
−
#home_logo, #sideMenu { display:none; }
+
 
−
#sideMenu, #top_title, .patrollink  {display:none;}
+
 
−
#content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px;}
+
// allow button on the black menu bar to show/hide the side menu
−
body {background-color:white; }
+
function hide_show_menu() {
−
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
−
+
// 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();
−
+
−
/**************************************************************** MENU ***************************************************************/
+
−
/* Wrapper for the menu */
+
−
.igem_2017_menu_wrapper {  
+
−
display: none;
+
 
}
 
}
−
/***************************************************** CONTENT OF THE PAGE ****************************************************/
+
 
−
.igem_2017_content_wrapper {
+
// if the black menu bar has been loaded
−
width: 100%;
+
  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);
 
}
 
}
−
</style>
+
}
−
<head>  
+
 
−
<title>iGEM UCLouvain Team</title>
+
 
−
+
});
−
<meta charset="utf-8">
+
 
−
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
 
−
</head>
+
</script>
−
<!-- start of content -->
+
 
−
<div class="igem_2017_content_wrapper">
+
 
−
<h1>UCLouvain Team</h1>
+
 
 +
 
 +
 
 +
<style>
 +
 
 +
 
 +
 
 +
/***************************************************** DEFAULT WIKI SETTINGS  ****************************************************/
 +
 +
/* Clear the default wiki settings */
 +
 +
#home_logo, #sideMenu { display:none; }
 +
#sideMenu, #top_title, .patrollink  {display:none;}
 +
#content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px;}
 +
body {background-color:white; }
 +
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 +
     
 +
 +
 +
/**************************************************************** MENU ***************************************************************/
 +
/* Wrapper for the menu */
 +
.igem_2017_menu_wrapper {
 +
display: none;
 +
}
 +
 
 +
 
 +
/***************************************************** CONTENT OF THE PAGE ****************************************************/
 +
 
 +
/* Wrapper for the content */
 +
.igem_2017_content_wrapper {
 +
width: 100%;
 +
}
 +
 
 +
 
 +
 
 +
/***************************************************** RESPONSIVE STYLING ****************************************************/
 +
 
 +
/* IF THE SCREEN IS LESS THAN 1200PX */
 +
@media only screen and (max-width: 1200px) {
 +
 
 +
#content {width:100%; }
 +
.igem_2017_menu_wrapper {width:15%; right:0;}
 +
.highlight {padding:10px 0px;}
 +
.igem_2017_menu_wrapper #display_menu_control { display:none; }
 +
#menu_content { display:block;}
 +
.menu_button.direct_to_page {padding-left: 17px;}
 +
 +
}
 +
 
 +
 +
</style>
 +
 
 +
 
 +
<!--- THIS IS WHERE THE HTML BEGINS --->
 +
 
 +
 
 +
 
 +
<head>  
 +
<title>iGEM UCLouvain Team</title>
 +
 
 +
<meta charset="utf-8">
 +
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 +
 
 +
</head>

Latest revision as of 22:33, 30 October 2017

iGEM UCLouvain Team