Difference between revisions of "Template:2016Demo bottom"

 
(41 intermediate revisions by the same user not shown)
Line 8: Line 8:
  
  
−
var currentMenu; // STRING HOLDS WHAT PAGE NAMESPACE YOU ARE IN
+
// ONCE THE PAGE LOADS, DECIDES WHICH MENU TO CALL/SHOW
−
var whichMenu; // STRING USED TO LOAD A SUBMENU
+
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
−
var subMenu_Open = false; // DECLARES ALL SUBMENUS AS COLLAPSED (function subMenus_ShowHide)
+
−
var switch_whichMenu = false; // DECLARES THAT YOU ARE IN HUB
+
  
 +
var hub_list = new Array(); //Array with the list of hub menus
  
−
var hub_list = new Array(); //Test array
+
hub_list[0]= "Safety";
−
hub_list[0]= "Demo_mainpage";
+
hub_list[1]= "Judging";
−
hub_list[1]= "Safety";
+
hub_list[2]= "informationpage";
−
hub_list[2]= "Judging";
+
hub_list[3]= "Code";
−
hub_list[3]= "informationpage";
+
−
hub_list[4]= "Code";
+
  
  
−
var menu_found = false;
+
      var currentHubMenu; // Save the current menu that needs to be displayed
  
−
// READS URL AND DECIDES WHAT MENU TO CALL/SHOW
 
−
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
  
 
$(document).ready(function() {
 
$(document).ready(function() {
  
−
+
        currentHubMenu = findCurrentHubMenu();
−
//Check if it is the main page and displays main menu if so
+
 
−
+
if (currentHubMenu) { // if the function returns a positive value - there is a hub menu display it
−
if ( wgPageName.indexOf( hub_list[0] ) > -1 ) {
+
 
 +
whichPageMenu( "https://2015.igem.org/Menu/DemoSafety" + " " + "#" + currentHubMenu );
 +
                }
 +
 
 +
else { // if the value is negative, show the main menu
 
showMainMenu();
 
showMainMenu();
−
menu_found= true;
+
              }
−
}
+
  
−
// if it is not the main page check if there is a hub menu for it
+
});
−
else if (menu_found == false) {
+
−
for ( var i=1; i< hub_list.length; i++ ) {
+
  
−
if ( wgPageName.indexOf( hub_list[i] ) > -1 ) {
+
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
−
whichPageMenu( "https://2015.igem.org/Menu/DemoSafety" + " " + "#" +  hub_list[i] );
+
−
menu_found= true;
+
−
}
+
−
}
+
−
}
+
  
  
−
// finally - if it doesn't have a hub menu, displays the main menu as default
 
−
if (menu_found == false ) {
 
−
showMainMenu();
 
−
}
 
  
−
});
 
  
  
 +
//LOOK FOR A MENU BASED ON THE HUB LIST ARRAY
 
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  
  
 +
      var findCurrentHubMenu = function() {  // Look for the hub menu
  
 +
for ( var i=0; i< hub_list.length; i++ ) {
  
 +
if ( wgPageName.indexOf( hub_list[i] ) > -1 ) {
 +
return hub_list[i];            //return that it has been found
 +
}
 +
      }     
 +
      }
  
 +
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  
−
// THIS DECIDES WHAT HUB MENU TO SHOW
+
 
 +
 
 +
 
 +
 
 +
// THIS CALLS THE HUB MENU THAT IS SPECIFIED
 
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  
 
function whichPageMenu( div_to_Load ) {
 
function whichPageMenu( div_to_Load ) {
  
−
+
$( "#menuDisplay" ).load( div_to_Load, function() {
−
//whichMenu = "https://2015.igem.org/Menu/DemoSafety" + " " + "#" +  div_to_Load;
+
−
 
+
−
$( "#menuDisplay" ).load( whichMenu, function() {
+
 
activateLoadedMenu();  
 
activateLoadedMenu();  
 
} );
 
} );
Line 80: Line 76:
 
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
 
 +
 +
  
  
−
// SHOW MAIN MENU
+
// SHOW MAIN MENU - hide navigation between hub menus since it is not needed
 
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  
 
function showMainMenu() {
 
function showMainMenu() {
  
−
$( "#menuDisplay" ).load( "https://2015.igem.org/Menu/DemoSafety #Demo_mainpage", function() { // ALL OTHER CASES SHOWS MAIN MENU
+
$( "#menuDisplay" ).load( "https://2015.igem.org/Menu/DemoSafety #MainPage_menu", function() {
−
activateLoadedMenu();
+
 
−
// MODIFIES THE CSS TO HIDE THE NAVIGATE BETWEEN MENUS BUTTON
+
activateLoadedMenu();
 +
 
 +
// MODIFIES THE CSS TO HIDE THE NAVIGATE BETWEEN MENUS BUTTON
 
$(".sideMenu").css( "padding-bottom", "0px" );
 
$(".sideMenu").css( "padding-bottom", "0px" );
 
$(".switch_Menus").css( "display", "none" );
 
$(".switch_Menus").css( "display", "none" );
 
$(".sideMenuTitle").css( "width", "170" );
 
$(".sideMenuTitle").css( "width", "170" );
 
$(".sideMenuTitle").css( "margin-left", "-15px" );
 
$(".sideMenuTitle").css( "margin-left", "-15px" );
−
 
−
if ( currentMenu== "MainPage" ) { // EXPANDS THE MENU IN THE MAIN PAGE
 
−
$(".expand_subMenus").html(" -  ");
 
−
$(".subMenu").show();
 
−
subMenu_Open = true;
 
−
}
 
−
 
  
 
} );
 
} );
Line 116: Line 109:
 
// ACTIVATE CERTAIN FUNCTIONS ONCE THE MENU IS LOADED  
 
// ACTIVATE CERTAIN FUNCTIONS ONCE THE MENU IS LOADED  
 
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
−
 
  
 
function activateLoadedMenu() {
 
function activateLoadedMenu() {
Line 137: Line 129:
  
 
$( ".switch_Menus").click( function() {
 
$( ".switch_Menus").click( function() {
−
if (switch_whichMenu == false) {
 
  
−
$(".switch_Menus").html(" ► ");
 
  
−
$( "#menuDisplay" ).load( "https://2015.igem.org/Menu/DemoSafety #Demo_mainpage", function() {
+
if($('#MainPage_menu').is(':visible')) {                            // if the main menu is displayed, call the hub menu that is needed
−
activateLoadedMenu();
+
                                        whichPageMenu( "https://2015.igem.org/Menu/DemoSafety" + " " + "#" +  currentHubMenu );
−
} );
+
}
  
−
switch_whichMenu = true ;
+
else  { //else display the main menu
−
}
+
$(".switch_Menus").html(" &#9654; "); 
 +
                                        whichPageMenu( "https://2015.igem.org/Menu/DemoSafety #MainPage_menu" );
  
−
else {
 
−
whichPageMenu( hub_list[i] );
 
−
switch_whichMenu = false ;
 
 
}
 
}
 +
 +
 
} );
 
} );
  
Line 169: Line 159:
 
function subMenus_ShowHide() {
 
function subMenus_ShowHide() {
  
−
// this expands
+
if ( $('.subMenu:visible').length == 0) {
−
if (subMenu_Open == false) {
+
 
$(".expand_subMenus").html(" -  ");
 
$(".expand_subMenus").html(" -  ");
 
$(".subMenu").show();
 
$(".subMenu").show();
−
subMenu_Open = true ;
 
 
}
 
}
  
Line 180: Line 168:
 
$(".expand_subMenus").html("+ ");
 
$(".expand_subMenus").html("+ ");
 
$(".subMenu").hide();
 
$(".subMenu").hide();
−
subMenu_Open = false ;
 
 
}
 
}
 
}
 
}
Line 186: Line 173:
 
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
 
−
 
−
 
  
  
 
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
// END MENU FUNCTIONALITY
 
// END MENU FUNCTIONALITY
 +
 +
 +
 +
 +
  
  
Line 202: Line 192:
 
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  
−
var which_why= "default"; //STORES WHAT WHY IS BEING CALLED
+
var which_why= "why_default"; //STORES WHAT WHY IS BEING CALLED, has a default assigned
  
  
Line 210: Line 200:
  
 
$( ".pop_why_content" ).load( which_why , function() {
 
$( ".pop_why_content" ).load( which_why , function() {
−
remove_popwhy();
+
 
 +
$(".pop_close").click(function() {
 +
remove_popwhy();
 +
});
 +
 
 +
$(".pop_why_cover").click(function() {
 +
remove_popwhy();
 +
});
 +
 
 
} );
 
} );
  
  
−
//MODIFY SIZE AND POSITION OF THE POP DIV AND THE BACKGROUND
+
 
−
$(".pop_why_content").css( "top", event.pageY);
+
//MODIFY SIZE AND POSITION OF THE POP DIV AND THE BACKGROUND
 +
$(".pop_why_box").css( "top", event.pageY);
 
$(".pop_why_cover").css ("height" , $(document).height() );
 
$(".pop_why_cover").css ("height" , $(document).height() );
 
$(".pop_why_cover").css ("width" , $(document).width() );
 
$(".pop_why_cover").css ("width" , $(document).width() );
  
−
// CALL BOTH ELEMENTS
+
// CALL BOTH ELEMENTS
−
$(".pop_why_content").show();
+
$(".pop_why_box").show();
 
$(".pop_why_cover").show();
 
$(".pop_why_cover").show();
 
});
 
});
  
  
−
+
 
// IF THE CLOSE BUTTON IS CLICKED OR ANYTHING OUTSIDE THE POP WHY DIV
 
// IF THE CLOSE BUTTON IS CLICKED OR ANYTHING OUTSIDE THE POP WHY DIV
 
function remove_popwhy () {
 
function remove_popwhy () {
  
−
$(".pop_close").click(function() {
+
$(".pop_why_box").hide();
−
$(".pop_why_content").hide();
+
$(".pop_why_cover").hide();
−
$(".pop_why_cover").hide();
+
$( ".pop_why_content" ).empty();
−
$( ".pop_why_content" ).empty();
+
−
});
+
−
 
+
−
$(".pop_why_cover").click(function() {
+
−
$(".pop_why_content").hide();
+
−
$(".pop_why_cover").hide();
+
−
$( ".pop_why_content" ).empty();
+
−
});
+
  
 
}
 
}
Line 249: Line 240:
  
  
 +
// CLICK_OPEN =  EXPAND OR COLLAPSE CONTENT
 +
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  
−
// THIS IS A TEST
+
$(".click_open").click(function() {
−
// HIDE OR SHOW MENU
+
−
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
−
+
  
−
$(".hide_button").click(function() {
+
//if the content is hidden, show it
−
testing();
+
if ( $('.click_content:visible').length == 0) {
−
});
+
$(".click_content").show();
 +
$(".click_icon").html("▶");
 +
$(".click_open").css("background-color", "#ffffff");
 +
}
  
−
var testing_ifopen = false;
+
else {
 +
$(".click_content").hide();
 +
$(".click_icon").html("▼");
 +
$(".click_open").css("background-color", "#f2f2f2");
 +
}
  
−
function testing() {
+
});
  
−
if (testing_ifopen == false) {
+
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
−
$(".sideMenu").hide();
+
−
testing_ifopen  = true ;
+
−
}
+
  
−
// to close
 
−
else {
 
−
$(".sideMenu").show();
 
−
testing_ifopen = false ;
 
−
}
 
−
}
 
−
 
−
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
// IMAGE SLIDER
 
−
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
−
 
−
 
−
$(function () {
 
−
   
 
−
    /* SET PARAMETERS */
 
−
    var change_img_time = 6000;
 
−
    var transition_speed = 500;
 
−
   
 
−
    var simple_slideshow = $("#slider"),
 
−
        listItems = simple_slideshow.children('li'),
 
−
        listLen = listItems.length,
 
−
        i = 0,
 
−
 
−
        changeList = function () {
 
−
 
−
listItems.eq(i).fadeOut(transition_speed, function () {
 
−
i += 1;
 
−
if (i === listLen) {
 
−
i = 0;
 
−
}
 
−
listItems.eq(i).fadeIn(transition_speed);
 
−
});
 
−
 
−
        };
 
−
 
−
    listItems.not(':first').hide();
 
−
    setInterval(changeList, change_img_time);
 
−
 
−
});
 
−
 
−
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
−
 
−
jQuery(".click_expand").css("cursor", "pointer").click(function(event) {
 
−
event.preventDefault();
 
−
jQuery(this).next("div").slideToggle();
 
−
}).next("div").hide();
 
−
 
−
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
  
 
</script>
 
</script>
  
 
</html>
 
</html>

Latest revision as of 17:40, 30 November 2015