Difference between revisions of "Template:Main2018"

Line 1: Line 1:
 
<html>
 
<html>
−
 
+
// This is the jquery part of your template.  Try not modify any of this code since it makes your menu work.
 
<script>
 
<script>
  
Line 9: Line 9:
 
$("#HQ_page").attr('id','');
 
$("#HQ_page").attr('id','');
 
 
−
hide_HQ_info();
+
//if HQ_info exists, display the content only for HQ
 +
if ($("#HQ_info").length){
 +
hide_HQ_info();
 +
}
 +
 +
//if image_slider exists, activate the automatic rotation slider and functionality
 +
if ($("#image_slider").length){
 +
image_slider_rotation();
 +
}
  
 
$( "#load_menu_here" ).load( "https://2018.igem.org/HQ:Menu #load_menu_content" , function() {
 
$( "#load_menu_here" ).load( "https://2018.igem.org/HQ:Menu #load_menu_content" , function() {
−
 
 
menu_functionality();  
 
menu_functionality();  
 
highlight_current_page_menu();  
 
highlight_current_page_menu();  
Line 20: Line 27:
 
 
 
 
−
+
// if HQ_info exists, hide unless the user is an admin
−
+
function hide_HQ_info() {
−
// if HQ_info exists, hide unless the user is an admin
+
−
function hide_HQ_info() {
+
  
−
if ($("#HQ_info").length){
+
switch ( wgUserName) {
 +
case "Sifuentes anita": case "Vinoo": case "THaddock": case "Meagan": case "MariaB":
 +
$("#HQ_info").show();
 +
break;
  
−
switch ( wgUserName) {
+
default:  
−
case "Sifuentes anita": case "Vinoo": case "THaddock": case "Meagan": case "MariaB":
+
$("#HQ_info").hide();  
−
$("#HQ_info").show();
+
break;  
−
break;
+
}  
−
 
+
   
−
default:  
+
}
−
$("#HQ_info").hide();  
+
−
break;  
+
−
}  
+
−
    }
+
−
}
+
 
 
  
−
 
+
function menu_functionality() {
−
function menu_functionality() {
+
 
 
−
//accessing submenus and subsubmenus
+
//accessing submenus and subsubmenus
−
$(".submenu_access").click(function(){
+
$(".submenu_access").click(function(){
−
$(this).toggleClass("showing");
+
$(this).toggleClass("showing");
−
$(this).next().fadeToggle(400);
+
$(this).next().fadeToggle(400);
−
});
+
});
  
 
//mobile menu access  
 
//mobile menu access  
−
$(".igem_mobile_menu_bar").click(function(){
+
$(".igem_mobile_menu_bar").click(function(){
−
$(this).next().fadeToggle(400);
+
$(this).next().fadeToggle(400);
−
});
+
});
 
 
−
}
+
}
  
  
  
−
function highlight_current_page_menu() {
+
function highlight_current_page_menu() {
 
 
−
+
var page_url="https://2018.igem.org/";
−
var page_url="https://2018.igem.org/";
+
  
−
switch ( (wgPageName.match( /\//g ) || []).length  ) {
+
switch ( (wgPageName.match( /\//g ) || []).length  ) {
  
−
//this is a hub
+
//this is a hub
−
case 0:
+
case 0:
−
page_url = page_url +wgPageName;
+
page_url = page_url + wgPageName;
−
$("a[href$='"+ page_url +"']").parent().addClass("current_hub");
+
$("a[href$='"+ page_url +"']").parent().addClass("current_hub");
−
$(".current_hub .igem_submenu").fadeToggle(400);
+
$(".current_hub .igem_submenu").fadeToggle(400);
−
$(".current_hub .igem_submenu").prev().toggleClass("showing");
+
$(".current_hub .igem_submenu").prev().toggleClass("showing");
−
break;
+
break;
 +
 +
case 1:
 +
//open the hub
 +
page_url = page_url +wgPageName.substring(0, wgPageName.indexOf('/'));
 +
$("a[href$='"+ page_url +"']").parent().addClass("current_hub");
 +
$(".current_hub .igem_submenu").fadeToggle(400);
 +
$(".current_hub .igem_submenu").prev().toggleClass("showing");
  
 +
// select sub menu page
 +
page_url ="https://2018.igem.org/"+wgPageName;
 +
$("a[href$='"+page_url+"'] > .submenu_item").addClass("current_page");
  
−
+
// if sub menu has a sub sub menu - open it
−
case 1:
+
$(".with_subsub_menu.current_page").parent().next().toggleClass("showing");
 +
$(".with_subsub_menu.current_page").parent().next().next().fadeToggle(400);
  
−
//open the hub
+
break;
−
page_url = page_url +wgPageName.substring(0, wgPageName.indexOf('/'));
+
−
$("a[href$='"+ page_url +"']").parent().addClass("current_hub");
+
−
$(".current_hub .igem_submenu").fadeToggle(400);
+
−
$(".current_hub .igem_submenu").prev().toggleClass("showing");
+
  
−
// select sub menu page
 
−
page_url ="https://2018.igem.org/"+wgPageName;
 
−
$("a[href$='"+page_url+"'] > .submenu_item").addClass("current_page");
 
  
−
// if sub menu has a sub sub menu - open it
 
−
$(".with_subsub_menu.current_page").parent().next().toggleClass("showing");
 
−
$(".with_subsub_menu.current_page").parent().next().next().fadeToggle(400);
 
  
−
break;
+
case 2:
  
 +
//open the hub
 +
page_url = page_url +wgPageName.substring(0, wgPageName.indexOf('/'));
 +
$("a[href$='"+ page_url +"']").parent().addClass("current_hub");
 +
$(".current_hub .igem_submenu").fadeToggle(400);
 +
$(".current_hub .igem_submenu").prev().toggleClass("showing");
  
  
−
case 2:
+
page_url ="https://2018.igem.org/";
 +
page_url = page_url +wgPageName.substring(0, wgPageName.lastIndexOf('/'));
 +
$("a[href$='"+page_url+"'] > .submenu_item").addClass("current_page");
  
−
//open the hub
+
$(".current_page").parent().next().toggleClass("showing");
−
page_url = page_url +wgPageName.substring(0, wgPageName.indexOf('/'));
+
$(".current_page").parent().next().next().fadeToggle(400);
−
$("a[href$='"+ page_url +"']").parent().addClass("current_hub");
+
−
$(".current_hub .igem_submenu").fadeToggle(400);
+
−
$(".current_hub .igem_submenu").prev().toggleClass("showing");
+
  
 +
page_url ="https://2018.igem.org/";
 +
page_url = page_url+wgPageName;
 +
$("a[href$='"+page_url+"'] > .subsubmenu_item").addClass("current_subpage");
  
−
page_url ="https://2018.igem.org/";
+
// if sub menu has a sub sub menu - open it
−
page_url = page_url +wgPageName.substring(0, wgPageName.lastIndexOf('/'));
+
break;
−
$("a[href$='"+page_url+"'] > .submenu_item").addClass("current_page");
+
  
−
$(".current_page").parent().next().toggleClass("showing");
 
−
$(".current_page").parent().next().next().fadeToggle(400);
 
  
−
page_url ="https://2018.igem.org/";
+
}
−
page_url = page_url+wgPageName;
+
−
$("a[href$='"+page_url+"'] > .subsubmenu_item").addClass("current_subpage");
+
  
−
// if sub menu has a sub sub menu - open it
+
}
−
break;
+
  
  
 +
 +
function image_slider_rotation() {
 +
 +
var slider_counter;
 +
var clicked_image_number = 0;
 +
var controller_number = 0;
 +
 +
 +
//constant rotation
 +
setInterval(function(){
 +
 +
slider_counter = $("ul.image_slider li.current_image").index()+1;
 +
 +
$("ul.image_slider li.current_image").removeClass("current_image");
 +
$("ul.image_number li.current_image_number").removeClass("current_image_number");
 +
 +
if( slider_counter  >= $('ul.image_slider li').length ){
 +
slider_counter = 1;
 +
} 
 +
else{
 +
slider_counter+=1;
 
}
 
}
  
−
}
+
$("ul.image_slider li:nth-child("+slider_counter+")").addClass("current_image");
 +
$("ul.image_number li:nth-child("+slider_counter+")").addClass("current_image_number");
  
 +
}, 5000);
  
  
  
 +
//if a number is clicked
 +
$("ul.image_number li").click(function(){
 +
clicked_image_number = $(this).index() + 1;
 +
 +
$("ul.image_slider li.current_image").removeClass("current_image");
 +
$("ul.image_number li.current_image_number").removeClass("current_image_number");
  
−
</script>
+
$("ul.image_slider li:nth-child("+clicked_image_number+")").addClass("current_image");
 +
$("ul.image_number li:nth-child("+clicked_image_number+")").addClass("current_image_number");
 +
});
  
  
 +
 +
//if a controller next/prev is clicked
 +
$(".image_controller").click(function(){
 +
controller_number = $("ul.image_slider li.current_image").index() + 1;
 +
 +
$("ul.image_slider li.current_image").removeClass("current_image");
 +
$("ul.image_number li.current_image_number").removeClass("current_image_number");
 +
 +
 +
if( $(this).hasClass( "next" )) {
 +
if( controller_number >= $('ul.image_slider li').length ){
 +
controller_number = 1;
 +
} 
 +
else{
 +
controller_number+=1;
 +
}
 +
}
 +
else if( $(this).hasClass( "prev" )) {
 +
if( controller_number <=1  ){
 +
controller_number = $('ul.image_slider li').length;
 +
} 
 +
else{
 +
controller_number-=1;
 +
}
 +
}
 +
 +
$("ul.image_slider li:nth-child("+controller_number+")").addClass("current_image");
 +
$("ul.image_number li:nth-child("+controller_number+")").addClass("current_image_number");
 +
 +
});
 +
}
 +
 +
 +
 +
</script>
  
  
Line 751: Line 820:
 
/*Image slider/
 
/*Image slider/
 
/************************************************/
 
/************************************************/
 +
.image_slider img {  width:100%; }
 +
 
ul.image_slider {
 
ul.image_slider {
−
list-style: none;
+
    list-style: none;
−
margin: 0px -19px;
+
    margin: 0px;
−
padding:0px;
+
    padding: 0px;
 
}
 
}
  
−
.image_slider ul {
+
/* image list hidden by default*/
−
padding: 0px;
+
ul.image_slider li{
 +
display:none;
 
}
 
}
 +
 +
/*if the image is the current one, display it*/
 +
ul.image_slider li.current_image {
 +
display:block;
 +
}
 +
 +
/*list of numbers for marking which number of image is displayed*/
 +
ul.image_number{
 +
    list-style: none;
 +
margin: auto;
 +
    padding: 0;
 +
    text-align: center;
 +
}
 +
 +
/*decoration for the numbers*/
 +
ul.image_number li{
 +
border: 1px solid #989898;
 +
    border-radius: 15%;
 +
color: #989898;
 +
cursor:pointer;
 +
    display: block;
 +
float: left;
 +
height: 25px;
 +
    margin-right: 15px;
 +
padding-top:5px;
 +
    width: 30px;
 +
}
 +
 +
/*styling change when hovering or active*/
 +
ul.image_number li.current_image_number, ul.image_number li:hover{
 +
background-color:#542160;
 +
border: 1px solid #542160;
 +
color:#fff;
 +
}
 +
 +
/*buttons for moving forward and backward between the images*/
 +
.image_controller{
 +
border-radius: 15%;
 +
cursor:pointer;
 +
color: #989898;
 +
float:left;
 +
height: 25px;
 +
text-align:center;
 +
margin-right: 15px;
 +
padding-top:7px;
 +
width:30px;
 +
}
 +
 +
/*status change when hovering on the button*/
 +
.image_controller:hover{
 +
background-color:#542160;
 +
color:#fff;
 +
}
 +
 +
 +
/*text content for next button*/
 +
.image_controller.next::before{
 +
content:"▶";
 +
}
 +
 +
 +
/*text content for previous button*/
 +
.image_controller.prev::before{
 +
content:"◀ ";
 +
}
 +
  
  
Line 911: Line 1,049:
  
  
−
 
+
/*mobile*/
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
/*support classes*/
+
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
  

Revision as of 17:43, 30 January 2018

// This is the jquery part of your template. Try not modify any of this code since it makes your menu work.

Loading...