Difference between revisions of "Template:NYMU-Taipei2"

 
(122 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
{{Nymu-menu2}}
 +
{{Nymu-menu}}
 +
 
<html>
 
<html>
  
 
<style type="text/css">
 
<style type="text/css">
−
#cssmenu,
+
 
−
#cssmenu ul,
+
 
−
#cssmenu ul li,
+
 
−
#cssmenu ul li a,
+
/* Slider Styles */
−
#cssmenu #menu-button {
+
#Slider {
−
  margin: 0;
+
position: relative;
−
  padding: 0;
+
width: 100%;
−
  border: 0;
+
display: none;
−
  list-style: none;
+
        margin-top:0;
−
  line-height: 1;
+
-webkit-touch-callout: none;
−
  display: block;
+
-webkit-user-select: none;
−
  position: relative;
+
-khtml-user-select: none;
−
  -webkit-box-sizing: border-box;
+
-moz-user-select: none;
−
  -moz-box-sizing: border-box;
+
-ms-user-select: none;
−
  box-sizing: border-box;
+
user-select: none;
 +
background-image: url(https://static.igem.org/mediawiki/2015/9/99/Nymu-Background.png);
 +
background-size: 100%, auto;
 +
     
 
}
 
}
−
#cssmenu:after,
+
 
−
#cssmenu > ul:after {
+
#Slider .Slides {
−
  content: ".";
+
width: 100%;
−
  display: block;
+
height: 100%;
−
  clear: both;
+
background-size: 100%, auto;
−
  visibility: hidden;
+
 
−
  line-height: 0;
+
−
  height: 0;
+
 
}
 
}
−
#cssmenu #menu-button {
+
 
−
  display: none;
+
#Slider #Slide0 {
 +
position:absolute;
 
}
 
}
−
#cssmenu {
+
 
−
font-family: Montserrat, sans-serif;
+
#Slider #Slide1 {
−
background-color: #339933;
+
−
background-position: 60%;
+
position:absolute;
−
border-top-width: 0px;
+
−
border-right-width: 0px;
+
−
border-bottom-width: 0px;
+
−
border-left-width: 0px;
+
−
border-top-style: none;
+
−
border-right-style: none;
+
−
border-bottom-style: none;
+
−
border-left-style: none;
+
−
padding: 0px;
+
−
margin: 0px;
+
 
}
 
}
−
#cssmenu > ul > li {
+
 
−
  float: left;
+
#Slider #Slide2 {
 +
position:absolute;
 +
 
}
 
}
−
#cssmenu.align-center > ul {
+
 
−
  font-size: 0;
+
#Slider #Slide3 {
−
  text-align: center;
+
position:absolute;
 +
 
}
 
}
−
#cssmenu.align-center > ul > li {
+
 
−
  display: inline-block;
+
#Slider #Slide4 {
−
  float: none;
+
position:absolute;
 +
 
}
 
}
−
#cssmenu.align-center ul ul {
+
 
−
  text-align: left;
+
#Slider #Slide5 {
 +
position:absolute;
 +
 
}
 
}
−
#cssmenu.align-right > ul > li {
+
 
−
  float: right;
+
#Slider #Slide6 {
 +
position:absolute;
 +
 
}
 
}
−
#cssmenu > ul > li > a {
+
 
−
  padding: 17px;
+
 
−
  font-size: 12px;
+
 
−
  letter-spacing: 1px;
+
#imgslider  {
−
  text-decoration: none;
+
−
  color: #dddddd;
+
        height: 50%;
−
  font-weight: 700;
+
width: 68%;
−
  text-transform: uppercase;
+
        z-index: 3;
−
}
+
        left: 18%;
−
#cssmenu > ul > li:hover > a {
+
        top:15%;
−
  color: #ffffff;
+
        position: absolute;
−
}
+
        background-color:#fff;
−
#cssmenu > ul > li.has-sub > a {
+
        opacity: 0;
−
  padding-right: 30px;
+
filter: alpha(opacity=0);
−
}
+
        position:absolute;
−
#cssmenu > ul > li.has-sub > a:after {
+
−
  position: absolute;
+
−
  top: 22px;
+
−
  right: 11px;
+
−
  width: 8px;
+
−
  height: 2px;
+
−
  display: block;
+
−
  background: #dddddd;
+
−
  content: '';
+
−
}
+
−
#cssmenu > ul > li.has-sub > a:before {
+
−
  position: absolute;
+
−
  top: 19px;
+
−
  right: 14px;
+
−
  display: block;
+
−
  width: 2px;
+
−
  height: 8px;
+
−
  background: #dddddd;
+
−
  content: '';
+
−
  -webkit-transition: all .25s ease;
+
−
  -moz-transition: all .25s ease;
+
−
  -ms-transition: all .25s ease;
+
−
  -o-transition: all .25s ease;
+
−
  transition: all .25s ease;
+
−
}
+
−
#cssmenu > ul > li.has-sub:hover > a:before {
+
−
  top: 23px;
+
−
  height: 0;
+
−
}
+
−
#cssmenu ul ul {
+
−
  position: absolute;
+
−
  left: -9999px;
+
−
}
+
−
#cssmenu.align-right ul ul {
+
−
  text-align: right;
+
−
}
+
−
#cssmenu ul ul li {
+
−
  height: 0;
+
−
  -webkit-transition: all .25s ease;
+
−
  -moz-transition: all .25s ease;
+
−
  -ms-transition: all .25s ease;
+
−
  -o-transition: all .25s ease;
+
−
  transition: all .25s ease;
+
−
}
+
−
#cssmenu li:hover > ul {
+
−
  left: auto;
+
−
}
+
−
#cssmenu.align-right li:hover > ul {
+
−
  left: auto;
+
−
  right: 0;
+
−
}
+
−
#cssmenu li:hover > ul > li {
+
−
  height: 35px;
+
−
}
+
−
#cssmenu ul ul ul {
+
−
  margin-left: 100%;
+
−
  top: 0;
+
−
}
+
−
#cssmenu.align-right ul ul ul {
+
−
  margin-left: 0;
+
−
  margin-right: 100%;
+
−
}
+
−
#cssmenu ul ul li a {
+
−
  border-bottom: 1px solid rgba(150, 150, 150, 0.15);
+
−
  padding: 11px 15px;
+
−
  width: 170px;
+
−
  font-size: 12px;
+
−
  text-decoration: none;
+
−
  color: #dddddd;
+
−
  font-weight: 400;
+
−
  background: #333333;
+
−
}
+
−
#cssmenu ul ul li:last-child > a,
+
−
#cssmenu ul ul li.last-item > a {
+
−
  border-bottom: 0;
+
−
}
+
−
#cssmenu ul ul li:hover > a,
+
−
#cssmenu ul ul li a:hover {
+
−
  color: #ffffff;
+
−
}
+
−
#cssmenu ul ul li.has-sub > a:after {
+
−
  position: absolute;
+
−
  top: 16px;
+
−
  right: 11px;
+
−
  width: 8px;
+
−
  height: 2px;
+
−
  display: block;
+
−
  background: #dddddd;
+
−
  content: '';
+
−
}
+
−
#cssmenu.align-right ul ul li.has-sub > a:after {
+
−
  right: auto;
+
−
  left: 11px;
+
−
}
+
−
#cssmenu ul ul li.has-sub > a:before {
+
−
  position: absolute;
+
−
  top: 13px;
+
−
  right: 14px;
+
−
  display: block;
+
−
  width: 2px;
+
−
  height: 8px;
+
−
  background: #dddddd;
+
−
  content: '';
+
−
  -webkit-transition: all .25s ease;
+
−
  -moz-transition: all .25s ease;
+
−
  -ms-transition: all .25s ease;
+
−
  -o-transition: all .25s ease;
+
−
  transition: all .25s ease;
+
−
}
+
−
#cssmenu.align-right ul ul li.has-sub > a:before {
+
−
  right: auto;
+
−
  left: 14px;
+
 
}
 
}
  
  
  
−
#cssmenu ul ul > li.has-sub:hover > a:before {
+
#Slider .SideBar {
−
  top: 17px;
+
position: absolute;
−
  height: 0;
+
top: 0;
 +
width: 90px;
 +
z-index: 1;
 
}
 
}
−
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
+
 
−
  #cssmenu {
+
#Slider #LeftBar {
−
    width: 100%;
+
left: 0;
−
  }
+
−
  #cssmenu ul {
+
−
    width: 100%;
+
−
    display: none;
+
−
  }
+
−
  #cssmenu.align-center > ul {
+
−
    text-align: left;
+
−
  }
+
−
  #cssmenu ul li {
+
−
    width: 100%;
+
−
    border-top: 1px solid rgba(120, 120, 120, 0.2);
+
−
  }
+
−
  #cssmenu ul ul li,
+
−
  #cssmenu li:hover > ul > li {
+
−
    height: auto;
+
−
  }
+
−
  #cssmenu ul li a,
+
−
  #cssmenu ul ul li a {
+
−
    width: 100%;
+
−
    border-bottom: 0;
+
−
  }
+
−
  #cssmenu > ul > li {
+
−
    float: none;
+
−
  }
+
−
  #cssmenu ul ul li a {
+
−
    padding-left: 25px;
+
−
  }
+
−
  #cssmenu ul ul ul li a {
+
−
    padding-left: 35px;
+
−
  }
+
−
  #cssmenu ul ul li a {
+
−
    color: #dddddd;
+
−
    background: none;
+
−
  }
+
−
  #cssmenu ul ul li:hover > a,
+
−
  #cssmenu ul ul li.active > a {
+
−
    color: #ffffff;
+
−
  }
+
−
  #cssmenu ul ul,
+
−
  #cssmenu ul ul ul,
+
−
  #cssmenu.align-right ul ul {
+
−
    position: relative;
+
−
    left: 0;
+
−
    width: 100%;
+
−
    margin: 0;
+
−
    text-align: left;
+
−
  }
+
−
  #cssmenu > ul > li.has-sub > a:after,
+
−
  #cssmenu > ul > li.has-sub > a:before,
+
−
  #cssmenu ul ul > li.has-sub > a:after,
+
−
  #cssmenu ul ul > li.has-sub > a:before {
+
−
    display: none;
+
−
  }
+
−
  #cssmenu #menu-button {
+
−
    display: block;
+
−
    padding: 17px;
+
−
    color: #dddddd;
+
−
    cursor: pointer;
+
−
    font-size: 12px;
+
−
    text-transform: uppercase;
+
−
    font-weight: 700;
+
−
  }
+
−
  #cssmenu #menu-button:after {
+
−
    position: absolute;
+
−
    top: 22px;
+
−
    right: 17px;
+
−
    display: block;
+
−
    height: 4px;
+
−
    width: 20px;
+
−
    border-top: 2px solid #dddddd;
+
−
    border-bottom: 2px solid #dddddd;
+
−
    content: '';
+
−
  }
+
−
  #cssmenu #menu-button:before {
+
−
    position: absolute;
+
−
    top: 16px;
+
−
    right: 17px;
+
−
    display: block;
+
−
    height: 2px;
+
−
    width: 20px;
+
−
    background: #dddddd;
+
−
    content: '';
+
−
  }
+
−
  #cssmenu #menu-button.menu-opened:after {
+
−
    top: 23px;
+
−
    border: 0;
+
−
    height: 2px;
+
−
    width: 15px;
+
−
    background: #ffffff;
+
−
    -webkit-transform: rotate(45deg);
+
−
    -moz-transform: rotate(45deg);
+
−
    -ms-transform: rotate(45deg);
+
−
    -o-transform: rotate(45deg);
+
−
    transform: rotate(45deg);
+
−
  }
+
−
  #cssmenu #menu-button.menu-opened:before {
+
−
    top: 23px;
+
−
    background: #ffffff;
+
−
    width: 15px;
+
−
    -webkit-transform: rotate(-45deg);
+
−
    -moz-transform: rotate(-45deg);
+
−
    -ms-transform: rotate(-45deg);
+
−
    -o-transform: rotate(-45deg);
+
−
    transform: rotate(-45deg);
+
−
  }
+
−
  #cssmenu .submenu-button {
+
−
    position: absolute;
+
−
    z-index: 99;
+
−
    right: 0;
+
−
    top: 0;
+
−
    display: block;
+
−
    border-left: 1px solid rgba(120, 120, 120, 0.2);
+
−
    height: 46px;
+
−
    width: 46px;
+
−
    cursor: pointer;
+
−
  }
+
−
  #cssmenu .submenu-button.submenu-opened {
+
−
    background: #262626;
+
−
  }
+
−
  #cssmenu ul ul .submenu-button {
+
−
    height: 34px;
+
−
    width: 34px;
+
−
  }
+
−
  #cssmenu .submenu-button:after {
+
−
    position: absolute;
+
−
    top: 22px;
+
−
    right: 19px;
+
−
    width: 8px;
+
−
    height: 2px;
+
−
    display: block;
+
−
    background: #dddddd;
+
−
    content: '';
+
−
  }
+
−
  #cssmenu ul ul .submenu-button:after {
+
−
    top: 15px;
+
−
    right: 13px;
+
−
  }
+
−
  #cssmenu .submenu-button.submenu-opened:after {
+
−
    background: #ffffff;
+
−
  }
+
−
  #cssmenu .submenu-button:before {
+
−
    position: absolute;
+
−
    top: 19px;
+
−
    right: 22px;
+
−
    display: block;
+
−
    width: 2px;
+
−
    height: 8px;
+
−
    background: #dddddd;
+
−
    content: '';
+
−
  }
+
−
  #cssmenu ul ul .submenu-button:before {
+
−
    top: 12px;
+
−
    right: 16px;
+
−
  }
+
−
  #cssmenu .submenu-button.submenu-opened:before {
+
−
    display: none;
+
−
  }
+
−
}
+
−
.ym {
+
−
left: 20px;
+
−
top: 20px;
+
−
position: relative;
+
 
}
 
}
  
−
#st {
+
#Slider #RightBar {
−
position: relative;
+
right: 0;
−
height: 600px;
+
−
width: auto;
+
−
background-image: url(jkk.jpg);
+
−
z-index: -1;
+
−
background-color: #FCC;
+
−
border-top-style: solid;
+
−
border-right-style: solid;
+
−
border-bottom-style: solid;
+
−
border-left-style: solid;
+
−
border-top-width: 1pt;
+
−
border-right-width: 1pt;
+
−
border-bottom-width: 1pt;
+
−
border-left-width: 1pt;
+
−
}
+
−
#stc {
+
−
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
+
−
font-size: 100px;
+
−
font-style: normal;
+
−
text-align: center;
+
−
position: relative;
+
−
color: #000;
+
−
width: 50%;
+
−
margin-top: 0%;
+
−
margin-right: auto;
+
−
margin-bottom: 0px;
+
−
margin-left: auto;
+
−
height: 10%;
+
−
padding-bottom: 0%;
+
−
padding-top: 0%;
+
−
border-top-style: none;
+
−
border-right-style: none;
+
−
border-bottom-style: none;
+
−
border-left-style: none;
+
 
}
 
}
  
 +
#Slider #LeftArrow {
 +
position: absolute;
 +
width: 60px;
 +
height: 60px;
 +
margin-left: 30px;
 +
background: url(https://static.igem.org/mediawiki/2013/5/53/2013UCalgaryArrowLeft.png) top no-repeat;
 +
}f
  
 +
#Slider #RightArrow {
 +
position: absolute;
 +
width: 60px;
 +
height: 60px;
 +
margin-right: 30px;
 +
background: url(https://static.igem.org/mediawiki/2013/5/56/2013UCalgaryArrowRight.png) top no-repeat;
 +
}
  
−
 
+
#Slider #LeftArrow:hover, #Slider #RightArrow:hover {
 +
background-position: bottom;
 +
cursor: pointer;
 +
}
  
 
#container {
 
#container {
Line 417: Line 132:
 
border-left-width: 0px;
 
border-left-width: 0px;
 
}
 
}
−
#header {
+
 
−
height: 100px;
+
 
−
width: 800px;
+
#container2 {
−
margin-right: auto;
+
−
margin-left: auto;
+
−
border-top-width: 0px;
+
−
border-right-width: 0px;
+
−
border-bottom-width: 0px;
+
−
border-left-width: 0px;
+
 
border-top-style: solid;
 
border-top-style: solid;
 
border-right-style: solid;
 
border-right-style: solid;
 
border-bottom-style: solid;
 
border-bottom-style: solid;
 
border-left-style: solid;
 
border-left-style: solid;
−
}
 
−
#footer {
 
−
height: 170px;
 
−
width: auto;
 
 
margin-right: auto;
 
margin-right: auto;
 
margin-left: auto;
 
margin-left: auto;
Line 440: Line 145:
 
border-bottom-width: 0px;
 
border-bottom-width: 0px;
 
border-left-width: 0px;
 
border-left-width: 0px;
−
border-top-style: solid;
+
box-shadow:inset 0px 0px 10px 5px rgba(20%,20%,40%,0.5);
−
border-right-style: solid;
+
−
border-bottom-style: solid;
+
−
border-left-style: solid;
+
−
background-color: #339933;
+
−
clear: both;
+
−
}
+
−
#main {
+
−
height: 300px;
+
−
width: 800px;
+
−
margin-right: auto;
+
−
margin-left: auto;
+
−
border-top-width: 0px;
+
−
border-right-width: 0px;
+
−
border-bottom-width: 0px;
+
−
border-left-width: 0px;
+
−
border-top-style: solid;
+
−
border-right-style: solid;
+
−
border-bottom-style: solid;
+
−
border-left-style: solid;
+
−
clear: none;
+
 
}
 
}
  
−
#left {
+
.maincontext {
−
height: 300px;
+
−
width: 400px;
+
−
border-top-width: 0px;
+
−
border-right-width: 0px;
+
−
border-bottom-width: 0px;
+
−
border-left-width: 0px;
+
−
border-top-style: solid;
+
−
border-right-style: solid;
+
−
border-bottom-style: solid;
+
−
border-left-style: solid;
+
−
float: left;
+
−
background-image: url(%E6%9C%AA%E5%91%BD%E5%90%8D-1.gif);
+
−
font-family: Georgia, "Times New Roman", Times, serif;
+
−
}
+
−
#right {
+
−
float: right;
+
−
height: 300px;
+
−
width: 400px;
+
−
font-family: "Arial Black", Gadget, sans-serif;
+
−
font-size: 24px;
+
−
border-top-width: 0px;
+
−
border-right-width: 0px;
+
−
border-bottom-width: 0px;
+
−
border-left-width: 0px;
+
−
border-top-style: none;
+
−
border-right-style: none;
+
−
border-bottom-style: none;
+
−
border-left-style: none;
+
−
}
+
−
.mainnewcontext {
+
 
font-family: Tahoma, Geneva, sans-serif;
 
font-family: Tahoma, Geneva, sans-serif;
 
font-style: normal;
 
font-style: normal;
−
padding: 50px;
 
 
font-size: 50px;
 
font-size: 50px;
 +
        padding:50px;
 +
}
 +
 +
.subcontext {
 +
font-family:  Segoe UI, Calibri, Helvetica, sans-serif;
 +
font-style: normal;
 +
font-size: 20px;
 +
        padding-top:30px;
 +
padding-bottom:30px;
 +
padding-left:10%;
 +
padding-right:10%;
 +
line-height: 25px;
 +
    text-align: justify;
 
}
 
}
 +
 +
.subcontext2 {
 +
font-family: Segoe UI, Calibri, Helvetica, sans-serif;
 +
font-style: normal;
 +
font-size: 20px;
 +
padding-bottom:50px;
 +
padding-left:10%;
 +
padding-right:10%;
 +
line-height: 25px;
 +
    text-align: justify;
 +
 +
 +
}
 +
 
.threelane {
 
.threelane {
−
height: 600px;
+
height: 100%;
−
width: 1200px;
+
width: 80%;
−
border-top-style: none;
+
−
border-right-style: none;
+
−
border-bottom-style: none;
+
−
border-left-style: none;
+
 
margin-top: 0px;
 
margin-top: 0px;
 
margin-right: auto;
 
margin-right: auto;
Line 512: Line 189:
 
padding: 0px;
 
padding: 0px;
 
position: relative;
 
position: relative;
 +
        background-color: #FFF
 +
        z-index: -1;
 +
padding-bottom:10%;
 
}
 
}
 +
 +
 +
 +
 +
 
#left2 {
 
#left2 {
−
float: left;
+
−
height: 600px;
+
width: 15%;
−
width: 350px;
+
        z-index: 0;
−
border-top-style: none;
+
        left: 21.75%;
−
border-right-style: none;
+
        position: absolute;
−
border-bottom-style: none;
+
box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5);
−
border-left-style: none;
+
−
font-size: 36px;
+
−
text-align: center;
+
 
}
 
}
 +
 
#mid2 {
 
#mid2 {
−
height: 600px;
+
height: 100%;
−
width: 350px;
+
width: 15%;
−
position: relative;
+
z-index: 0;
 
margin-right: auto;
 
margin-right: auto;
 
margin-left: auto;
 
margin-left: auto;
−
border-top-style: none;
+
        position: absoulte;
−
border-right-style: none;
+
box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5);
−
border-bottom-style: none;
+
−
border-left-style: none;
+
−
font-size: 36px;
+
−
text-align: center;
+
 
}
 
}
  
 
#right2 {
 
#right2 {
−
float: right;
+
−
height: 600px;
+
−
width: 350px;
+
width: 15%;
−
border-top-style: none;
+
        z-index: 0;
−
border-right-style: none;
+
        right: 21.75%;
−
border-bottom-style: none;
+
        position: absolute;
−
border-left-style: none;
+
box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5);
−
font-size: 36px;
+
}
−
text-align: center;
+
 
 +
#left1 {
 +
 +
width: 15%;
 +
        z-index: 0;
 +
        left: 1%;
 +
        position: absolute;
 +
box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5);
 +
}
 +
 
 +
#right1 {
 +
 +
width: 15%;
 +
        z-index: 0;
 +
        right: 1%;
 +
        position: absolute;
 +
box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5);
 +
}
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
#box {
 +
 
}
 
}
  
Line 554: Line 259:
  
  
−
<script type="text/javascript">
+
<script>
−
(function($) {
+
$(document).ready(function() {
 +
 +
                                $('.Slides').css('transition', 'opacity 1s ease-out');
 +
$('.Slides').css('opacity', '0');
 +
$('.Slides').css(' height', '0');
 +
$('.Slides').css('overflow', 'hidden');
 +
                                //Display slider for Javascript users
 +
$('#Slider').css('display', 'block');
 +
$('#Slider').css('opacity', '1');
 +
var TotalSlides = $('.Slides').length;
 +
var CurrentSlide = 0;
 +
CurrentSlide = CurrentSlide % TotalSlides;
 +
changeSlide(CurrentSlide);
 +
                             
 +
//Set height of slider (16/5 ratio)
 +
$('#Slider').css('height', ($('body').width() / 2.5));
 +
 +
//Position right/left arrows
 +
var BarHeight = $('#Slider').height() -  $('#BottomLinks').height();
 +
$('#LeftBar, #RightBar').css('height', BarHeight);
 +
$('#LeftArrow, #RightArrow').css('top', (BarHeight-60)/2);
  
−
  $.fn.menumaker = function(options) {
+
//Repeats for window resize
−
     
+
$(window).resize(function() {
−
      var cssmenu = $(this), settings = $.extend({
+
$('#Slider').css('height', ($('body').width() / 2.5));
−
        title: "Menu",
+
−
        format: "dropdown",
+
var BarHeight = $('#Slider').height() -  $('#BottomLinks').height();
−
        sticky: false
+
$('#LeftBar, #RightBar').css('height', BarHeight);
−
      }, options);
+
$('#LeftArrow, #RightArrow').css('top', (BarHeight-60)/2);
 +
});
 +
 +
var TotalSlides = $('.Slides').length;
 +
var CurrentSlide = 0;
  
−
      return this.each(function() {
+
$('#RightArrow').click(function() {
−
        cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
+
CurrentSlide = ++CurrentSlide % TotalSlides;
−
        $(this).find("#menu-button").on('click', function(){
+
changeSlide(CurrentSlide);
−
          $(this).toggleClass('menu-opened');
+
                                        if (timer) { clearInterval(timer) }
−
          var mainmenu = $(this).next('ul');
+
});
−
          if (mainmenu.hasClass('open')) {
+
−
            mainmenu.hide().removeClass('open');
+
$('#LeftArrow').click(function() {
−
          }
+
CurrentSlide = (CurrentSlide + TotalSlides - 1) % TotalSlides;
−
          else {
+
changeSlide(CurrentSlide);
−
            mainmenu.show().addClass('open');
+
                                        if (timer) { clearInterval(timer) }
−
            if (settings.format === "dropdown") {
+
});
−
              mainmenu.find('ul').show();
+
−
            }
+
$('.SlideLink').click(function() {
−
          }
+
var ClickedSlide = $(this).attr('id');
−
        });
+
CurrentSlide = parseInt(ClickedSlide.replace('Link', ''));
 +
changeSlide(CurrentSlide);
 +
});
 +
 +
 +
                                     
 +
 
 +
                                var timer;
 +
// when mouse enters, clear the timer if it has been set
 +
$("#imgslider").mouseenter(function(){if (timer) { clearInterval(timer) }})
 +
                    // when mouse goes out, start the slideshow
 +
                        .mouseleave(function() {timer = setInterval(function() {CurrentSlide = ++CurrentSlide % TotalSlides;changeSlide(CurrentSlide);}, 6000);})
 +
      // trigger mouseleave for initial slideshow starting
 +
                                              .mouseleave();
 +
                                                                   
  
−
        cssmenu.find('li ul').parent().addClass('has-sub');
+
                               
  
−
        multiTg = function() {
+
                                function changeSlide(num){
−
          cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
+
var SlideID = '#Slide' + num;
−
          cssmenu.find('.submenu-button').on('click', function() {
+
−
            $(this).toggleClass('submenu-opened');
+
$('.Slides').css('transition', 'opacity 1s ease-out');
−
            if ($(this).siblings('ul').hasClass('open')) {
+
$('.Slides').css('opacity', '0');
−
              $(this).siblings('ul').removeClass('open').hide();
+
$('.Slides').css(' height', '0');
−
            }
+
$('.Slides').css('overflow', 'hidden');
−
            else {
+
−
              $(this).siblings('ul').addClass('open').show();
+
−
            }
+
−
          });
+
−
        };
+
  
−
        if (settings.format === 'multitoggle') multiTg();
 
−
        else cssmenu.addClass('dropdown');
 
  
−
        if (settings.sticky === true) cssmenu.css('position', 'fixed');
+
$(SlideID).css('opacity', '1');
 +
//Set height of slider (16/5 ratio)
 +
$('#Slider').css('height', ($('body').width() / 2.5));
 +
  
−
        resizeFix = function() {
 
−
          if ($( window ).width() > 768) {
 
−
            cssmenu.find('ul').show();
 
−
          }
 
  
−
          if ($(window).width() <= 768) {
+
}
−
            cssmenu.find('ul').hide().removeClass('open');
+
−
          }
+
−
        };
+
−
        resizeFix();
+
−
        return $(window).on('resize', resizeFix);
+
  
−
      });
 
−
  };
 
−
})(jQuery);
 
  
−
(function($){
 
−
$(document).ready(function(){
 
  
−
$("#cssmenu").menumaker({
 
−
  title: "Menu",
 
−
  format: "multitoggle"
 
−
});
 
  
−
});
 
−
})(jQuery);
 
−
</script>
 
  
  
  
−
<div id="container">
+
});
−
<div id='cssmenu' class='align-center'>
+
</script>
−
 
+
−
    <ul>
+
−
   
+
−
      <li><a href='#'> HomE</a></li>
+
−
      <li class='active'><a href='#'>Products</a>
+
−
        <ul>
+
−
          <li><a href='#'>Product 1</a>
+
−
            <ul>
+
−
              <li><a href='#'>Sub Product</a></li>
+
−
              <li><a href='#'>Sub Product</a></li>
+
−
            </ul>
+
−
          </li>
+
−
          <li><a href='#'>Product 3</a>
+
−
            <ul>
+
−
              <li><a href='#'>Sub Product</a></li>
+
−
              <li><a href='#'>Sub Product</a></li>
+
−
            </ul>
+
−
          </li>
+
−
          <li><a href='#'>Product 2</a>
+
−
            <ul>
+
−
              <li><a href='#'>Sub Product</a></li>
+
−
              <li><a href='#'>Sub Product</a></li>
+
−
            </ul>
+
−
          </li>
+
−
        </ul>
+
−
      </li>
+
−
      <li><a href='#'>About</a></li>
+
−
      <li><a href='#' class="align-center">Contact</a></li>
+
−
    </ul>
+
−
</div>
+
  
  
  
 +
                <div id="container">
 +
                       
 +
                            <div id="Slider">
 +
                        <div id="imgslider"></div>
 +
<div id="Slide0" class="Slides current"><img src="https://static.igem.org/mediawiki/2015/4/49/Ymu-slide-intro.png" style="PADDING-LEFT: 15%;padding-top:5% ;"width="70%" ></div>
 +
<div id="Slide1" class="Slides"><img src="https://static.igem.org/mediawiki/2015/9/92/Nymu-slide-Problem.jpg" style="PADDING-LEFT: 15%;padding-top:5% ;"width="70%" ></div>
 +
<div id="Slide2" class="Slides"><img src="https://static.igem.org/mediawiki/2015/3/36/Nymu-slide-patho.png" style="PADDING-LEFT: 15%;padding-top:5% ;"width="70%" ></div>
 +
<div id="Slide3" class="Slides"><img src="https://static.igem.org/mediawiki/2015/0/01/Nymu-slide-FYVE.png" style="PADDING-LEFT: 15%;padding-top:5% ;"width="70%" ></div>
 +
<div id="Slide4" class="Slides"><img src="https://static.igem.org/mediawiki/2015/7/7f/Nymu-slide-Defensin.jpg" style="PADDING-LEFT: 15%;padding-top:5% ;"width="70%" ></div>
 +
                                <div id="Slide5" class="Slides"><img src="https://static.igem.org/mediawiki/2015/f/f6/Nymu-slide-Smfc.png" style="PADDING-LEFT: 15%;padding-top:5% ;"width="70%" ></div>
 +
<div id="Slide6" class="Slides"><img src="https://static.igem.org/mediawiki/2015/4/46/Nymu-slide-D_system.jpg" style="PADDING-LEFT: 15%;padding-top:5% ;"width="70%" ></div>
 +
 +
                                <div id="LeftBar" class="SideBar">
 +
                                <div id="LeftArrow"></div></div>
 +
<div id="RightBar" class="SideBar">
 +
                                <div id="RightArrow"></div></div>
 +
  </div>
 +
                  </div>
 +
  <div id="container2">
 +
                  <div align="center" class="maincontext">About Our Project</div>
 +
<div align="center" class="subcontext">&ensp;&ensp;&ensp;&ensp;The 2015 NYMU iGEM team presents a potato defense system, an effective system that can be easily implemented by potato farmers all over the world. This system is made up of three parts: protection, detection, and cure.</div>
  
  
 +
<div align="center" class="subcontext2">
  
 +
&ensp;&ensp;&ensp;&ensp;Our system consists of potatoes resistant to <i>Phytophthora infestans</i>, a fungus-like pathogen that causes potato late blight, by creating a competitive inhibitor that can prevent the effector protein secreted by <i>P. infestans</i> from entering the potato cell. In case that the potatoes we genetically modified cannot fend off the <i>P. infestans</i>, we designed a soil based microbial fuel cell (SMFC) with engineered bacteria on the anode of the SMFC that can detect whether the potato tuber is infected or not. If the potato is infected and detected by our SMFC, we will spread defensin, an antimicrobial peptide isolated from maca (<i>Lepidium meyenii</i>). The defensin can weaken and inhibit the growth of <i>P. infestans</i> without doing harm to the environment and human body since it does not contain heavy metals like most fungicides.
  
−
<div>
 
−
  <div id="st">
 
−
    <div id="stc">
 
−
      <p>Fight the Blight
 
−
    </p>
 
−
    </div>
 
−
  </div>
 
−
  <div align="center" class="mainnewcontext" id="mainc">SAVE THE POTATO FARM</div>
 
−
</div>
 
−
<div class="threelane" id="three lane">
 
−
 
 
−
  <div id="right2"><img src="../../Documents/websites/judge.jpg" width="350" height="400">
 
−
    <p>Judging Form</p></div>
 
−
  <div id="left2"><img src="../../Documents/websites/exp.jpg" width="350" height="400">
 
−
    <p>Experiment</p></div>
 
−
  <div id="mid2"><img src="../../Documents/websites/human.jpg" width="350" height="400">
 
−
  <p>Policy &amp; Practice</p></div>
 
−
</div>
 
−
<div id="footer">
 
−
<img src="../../Documents/websites/NYMU14_Sponsor_8.png" width="110" height="110" class="ym" longdesc="http://web.ym.edu.tw/front/bin/home.phtml"> </div>
 
  
 +
</div>
  
  
Line 696: Line 388:
  
  
 +
 +
 +
                 
 +
    <div class="threelane" id="three lane">
 +
 
 +
    <div id="right2"><img src="https://static.igem.org/mediawiki/2015/b/b3/Nymu-Safety.jpg" width="100%" ></div>
 +
 +
    <div id="right1"><img src="https://static.igem.org/mediawiki/2015/0/08/Nymu-Judging_form_logo.jpg" width="100%" ></div>
 +
 +
  <div id="left1"><a href="https://2015.igem.org/Template:NYMU-2015project-wetlab"><img src="https://static.igem.org/mediawiki/2015/0/07/Nymu-Experiment_logo.jpg" width="100%"  ></a> </div>
 +
   
 +
  <div id="left2"><a href="https://2015.igem.org/Template:NYMU-2015project-drylab"><img src="https://static.igem.org/mediawiki/2015/3/3c/Nymu-Modeling_logo.jpg" width="100%"  ></a></div>
 +
 +
<div id="mid2"><a href="https://2015.igem.org/Template:NYMU-2015project-hp"><img src="https://static.igem.org/mediawiki/2015/4/4f/Nymu-Hp_logo.jpg" width="100%"></a></div>
 +
  </div>
 +
 +
 
  
  
  
 
</html>
 
</html>
 +
{{Template:Nymu-Footer}}

Latest revision as of 13:37, 27 August 2015

About Our Project
    The 2015 NYMU iGEM team presents a potato defense system, an effective system that can be easily implemented by potato farmers all over the world. This system is made up of three parts: protection, detection, and cure.
    Our system consists of potatoes resistant to Phytophthora infestans, a fungus-like pathogen that causes potato late blight, by creating a competitive inhibitor that can prevent the effector protein secreted by P. infestans from entering the potato cell. In case that the potatoes we genetically modified cannot fend off the P. infestans, we designed a soil based microbial fuel cell (SMFC) with engineered bacteria on the anode of the SMFC that can detect whether the potato tuber is infected or not. If the potato is infected and detected by our SMFC, we will spread defensin, an antimicrobial peptide isolated from maca (Lepidium meyenii). The defensin can weaken and inhibit the growth of P. infestans without doing harm to the environment and human body since it does not contain heavy metals like most fungicides.