Difference between revisions of "Template:NYMU-Taipei2"

Line 44: Line 44:
 
}
 
}
  
−
#Slider #Slide5 {
+
#slider #Slide5 {
 
background-image: url(https://static.igem.org/mediawiki/2015/7/7f/Nymu-slide-Defensin.jpg);
 
background-image: url(https://static.igem.org/mediawiki/2015/7/7f/Nymu-slide-Defensin.jpg);
 
display: none;
 
display: none;
 
}
 
}
  
−
#Slider #Slide6 {
+
#slider #Slide6 {
 
background-image: url(https://static.igem.org/mediawiki/2015/4/46/Nymu-slide-D_system.jpg);
 
background-image: url(https://static.igem.org/mediawiki/2015/4/46/Nymu-slide-D_system.jpg);
 
display: none;
 
display: none;
 
}
 
}
  
 +
#imgslider  {
 +
background-image: url(https://static.igem.org/mediawiki/2015/2/2a/Intro.gif);
 +
        height: 50%;
 +
width: 68%;
 +
        z-index: 3;
 +
        left: 18%;
 +
        top:15%;
 +
        position: absolute;
 +
        background-color:#fff;
 +
        opacity: 0.61;
 +
filter: alpha(opacity=61);
 +
        position:absolute;
 +
}
  
 +
#imgslider #Slide0 {
 +
background-image: url(https://static.igem.org/mediawiki/2015/2/2a/Intro.gif);
 +
}
  
  
 +
#imgslider #Slide1 {
 +
background-image: url(https://static.igem.org/mediawiki/2015/9/92/Nymu-slide-Problem.jpg);
 +
display: none;
 +
}
 +
 +
#imgslider #Slide2 {
 +
background-image: url(https://static.igem.org/mediawiki/2015/8/8c/Nymu-slide-Idea.jpg);
 +
display: none;
 +
}
 +
 +
#imgslider #Slide3 {
 +
background-image: url(https://static.igem.org/mediawiki/2015/f/f4/Nymu-slide-FYVE.jpg);
 +
display: none;
 +
}
 +
 +
#imgslider #Slide4 {
 +
background-image: url(https://static.igem.org/mediawiki/2015/e/e6/Nymu-slide-Smfc.jpg);
 +
display: none;
 +
}
 +
 +
#imgslider #Slide5 {
 +
background-image: url(https://static.igem.org/mediawiki/2015/7/7f/Nymu-slide-Defensin.jpg);
 +
display: none;
 +
}
 +
 +
#imgslider #Slide6 {
 +
background-image: url(https://static.igem.org/mediawiki/2015/4/46/Nymu-slide-D_system.jpg);
 +
display: none;
 +
}
  
 
#Slider .SideBar {
 
#Slider .SideBar {
Line 93: Line 138:
 
cursor: pointer;
 
cursor: pointer;
 
}
 
}
−
 
−
 
  
 
#container {
 
#container {
Line 108: Line 151:
 
border-left-width: 0px;
 
border-left-width: 0px;
 
}
 
}
−
 
−
 
  
 
.maincontext {
 
.maincontext {
Line 123: Line 164:
 
font-size: 30px;
 
font-size: 30px;
 
         padding-top:50px;
 
         padding-top:50px;
−
padding-bottom:50px;
+
padding-bottom:50px;
−
padding-left:10%;
+
padding-left:10%;
−
padding-right:10%;
+
padding-right:10%;
−
line-height: 40px
+
line-height: 40px
−
 
+
−
 
+
−
 
+
 
}
 
}
  
Line 144: Line 182:
 
         z-index: -1;
 
         z-index: -1;
 
}
 
}
−
 
  
 
#left2 {
 
#left2 {
Line 154: Line 191:
 
box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5);
 
box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5);
 
}
 
}
 +
 
#mid2 {
 
#mid2 {
 
height: 100%;
 
height: 100%;
 
width: 15%;
 
width: 15%;
−
z-index: 0;
+
z-index: 0;
 
margin-right: auto;
 
margin-right: auto;
 
margin-left: auto;
 
margin-left: auto;
 
         position: absoulte;
 
         position: absoulte;
−
box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5);
+
box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5);
 
}
 
}
  
Line 171: Line 209:
 
         right: 23.75%;
 
         right: 23.75%;
 
         position: absolute;
 
         position: absolute;
−
box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5);
+
box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5);
 
}
 
}
  
Line 180: Line 218:
 
         left: 5%;
 
         left: 5%;
 
         position: absolute;
 
         position: absolute;
−
box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5);
+
box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5);
 
}
 
}
  
 
#right1 {
 
#right1 {
−
 
 
height: 100%;
 
height: 100%;
 
width: 15%;
 
width: 15%;
Line 190: Line 227:
 
         right: 5%;
 
         right: 5%;
 
         position: absolute;
 
         position: absolute;
−
box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5);
+
box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5);
 
}
 
}
 
#jumpup{
 
#jumpup{
−
    display: inline-block;
+
        display: inline-block;
−
    position: fixed;
+
        position: fixed;
−
    z-index: 98;
+
        z-index: 98;
−
    bottom: 5%;
+
        bottom: 5%;
−
    right: 5%;
+
        right: 5%;
−
    cursor:pointer;
+
        cursor:pointer;
−
    width: 90px;
+
        width: 90px;
 +
}
  
−
}
 
 
#jumpup div.pic {
 
#jumpup div.pic {
 
     background: url(https://static.igem.org/mediawiki/2015/6/62/Nymu-Top.jpg) no-repeat;
 
     background: url(https://static.igem.org/mediawiki/2015/6/62/Nymu-Top.jpg) no-repeat;
Line 207: Line 244:
 
     height: 90px;
 
     height: 90px;
 
     width: 90px;
 
     width: 90px;
−
   
 
 
}
 
}
 +
 
#jumpup div.infotop {
 
#jumpup div.infotop {
 
     display: none;
 
     display: none;
Line 219: Line 256:
  
 
#box {
 
#box {
−
height: 50%;
+
−
width: 68%;
+
−
        z-index: 3;
+
−
        left: 18%;
+
−
        top:15%;
+
−
        position: absolute;
+
−
        background-color:#fff;
+
−
        opacity: 0.61;
+
−
filter: alpha(opacity=61);
+
−
        position:absolute;
+
 
}
 
}
  
Line 240: Line 268:
 
$('#Slider').css('display', 'block');
 
$('#Slider').css('display', 'block');
 
 
−
 
+
                                //totop
−
$('#jumpup').on('click',function(){
+
        $('#jumpup').on('click',function(){$('body, html').animate({scrollTop: 0},1);})
−
        $('body, html').animate({scrollTop: 0},1);
+
                      .on('mouseover',function(){$(this).find('div.infotop').css('display','block');})
−
  }).on('mouseover',function(){
+
                          .on('mouseout',function(){$(this).find('div.infotop').css('display','none'); }                   
−
    $(this).find('div.infotop').css('display','block');
+
        );  
−
  }).on('mouseout',function(){
+
−
    $(this).find('div.infotop').css('display','none');
+
−
  });
+
−
 
+
  
 
//Set height of slider (16/5 ratio)
 
//Set height of slider (16/5 ratio)
Line 267: Line 291:
 
});
 
});
 
 
−
 
−
 
−
 
−
 
−
 
 
var TotalSlides = $('.Slides').length;
 
var TotalSlides = $('.Slides').length;
 
var CurrentSlide = 0;
 
var CurrentSlide = 0;
Line 293: Line 312:
 
 
 
                                        
 
                                        
−
   var timer;
+
    
−
 
+
                                var timer;
−
$("#box")
+
// when mouse enters, clear the timer if it has been set
−
        // when mouse enters, clear the timer if it has been set
+
$("#imgslider").mouseenter(function(){if (timer) { clearInterval(timer) }})
−
        .mouseenter(function() {
+
                    // when mouse goes out, start the slideshow
−
            if (timer) { clearInterval(timer) }
+
                        .mouseleave(function() {timer = setInterval(function() {CurrentSlide = ++CurrentSlide % TotalSlides;changeSlide(CurrentSlide);}, 3000);})
−
        })
+
      // trigger mouseleave for initial slideshow starting
−
        // when mouse goes out, start the slideshow
+
                                              .mouseleave();
−
        .mouseleave(function() {
+
                                                                         
−
            timer = setInterval(function() {
+
−
                CurrentSlide = ++CurrentSlide % TotalSlides;
+
−
changeSlide(CurrentSlide);
+
−
            }, 3000);
+
−
        })
+
−
        // trigger mouseleave for initial slideshow starting
+
−
        .mouseleave();
+
−
 
+
−
 
+
−
                                    function changeSlide(num){
+
−
var SlideID = '#Slide' + num;
+
−
$('.Slides').css('display', 'none');
+
−
         
+
−
$(SlideID).css('display', 'block');
+
−
                                   
+
−
}
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
   
+
−
 
+
−
 
+
−
 
+
  
 +
                                function changeSlide(num){
 +
var SlideID = '#Slide' + num;
 +
$('.Slides').css('display', 'none');
 +
$(SlideID).css('display', 'block');
 +
}
 
});
 
});
−
 
−
 
−
 
−
 
−
 
 
</script>
 
</script>
  
  
  
−
<div id="container">
+
                <div id="container">
−
 
+
                          <div id="Slider">
−
 
+
                                <div id="imgslider"></div>
−
 
+
−
 
+
−
 
+
−
                        <div id="Slider">
+
−
<div id="box" ></div>
+
 
<div id="Slide0" class="Slides current"></div>
 
<div id="Slide0" class="Slides current"></div>
 
<div id="Slide1" class="Slides"></div>
 
<div id="Slide1" class="Slides"></div>
Line 357: Line 346:
 
                                 <div id="LeftArrow"></div></div>
 
                                 <div id="LeftArrow"></div></div>
 
<div id="RightBar" class="SideBar">
 
<div id="RightBar" class="SideBar">
−
                                 <div id="RightArrow"></div></div>
+
                                 <div id="RightArrow"></div></div>  
−
+
  </div>
−
                             
+
                  </div>
−
</div>
+
−
 
+
−
</div>
+
 
   
 
   
−
  <div align="center" class="maincontext">About Our Project</div>
+
                  <div align="center" class="maincontext">About Our Project</div>
  
  
−
  <div class="threelane" id="three lane">
+
                  <div class="threelane" id="three lane">
 
    
 
    
−
    <div id="right2"><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 id="right2"><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 id="right1"><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/b/b3/Nymu-Safety.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="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="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"><img src="https://static.igem.org/mediawiki/2015/0/08/Nymu-Judging_form_logo.jpg" width="100%" ></div>
+
<div id="mid2"><img src="https://static.igem.org/mediawiki/2015/0/08/Nymu-Judging_form_logo.jpg" width="100%" ></div>
 +
  </div>
  
−
  </div>
+
  <div align="center" class="subcontext">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="subcontext">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>
+
  
  
Line 396: Line 375:
 
<div class='pic'></div>
 
<div class='pic'></div>
 
</div>
 
</div>
−
 
−
 
−
 
−
 
−
 
−
 
−
 
  
 
</html>
 
</html>
 
{{Template:Nymu-Footer}}
 
{{Template:Nymu-Footer}}

Revision as of 17:37, 13 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.
Top