Difference between revisions of "Team:NYMU-Taipei"

Line 8: Line 8:
 
heght: 500px;
 
heght: 500px;
 
}
 
}
−
 
−
 
−
body{
 
−
 
−
background-color:#fff
 
−
}
 
−
/* Slider Styles */
 
−
#Slider {
 
−
position: relative;
 
−
width: 100%;
 
−
display: none;
 
−
        margin-top:0;
 
−
-webkit-touch-callout: none;
 
−
-webkit-user-select: none;
 
−
-khtml-user-select: none;
 
−
-moz-user-select: none;
 
−
-ms-user-select: none;
 
−
user-select: none;
 
−
background-image: url(https://static.igem.org/mediawiki/2015/9/99/Nymu-Background.png);
 
−
background-size: 100%, auto;
 
−
     
 
−
}
 
−
 
−
#Slider .Slides {
 
−
width: 100%;
 
−
height: 100%;
 
−
background-size: 100%, auto;
 
−
 
−
}
 
−
 
−
#Slider #Slide0 {
 
−
position:absolute;
 
−
}
 
−
 
−
#Slider #Slide1 {
 
−
 
−
position:absolute;
 
−
}
 
−
 
−
#Slider #Slide2 {
 
−
position:absolute;
 
−
 
−
}
 
−
 
−
#Slider #Slide3 {
 
−
position:absolute;
 
−
 
−
}
 
−
 
−
#Slider #Slide4 {
 
−
position:absolute;
 
−
 
−
}
 
−
 
−
#Slider #Slide5 {
 
−
position:absolute;
 
−
 
−
}
 
−
 
−
#Slider #Slide6 {
 
−
position:absolute;
 
−
 
−
}
 
−
 
−
 
−
 
−
#imgslider  {
 
−
 
−
        height: 50%;
 
−
width: 68%;
 
−
        z-index: 1;
 
−
        left: 18%;
 
−
        top:15%;
 
−
        position: absolute;
 
−
        background-color:#fff;
 
−
        opacity: 0;
 
−
filter: alpha(opacity=0);
 
−
        position:absolute;
 
−
}
 
−
 
−
 
−
 
−
#Slider .SideBar {
 
−
position: absolute;
 
−
top: 0;
 
−
width: 90px;
 
−
z-index: 1;
 
−
}
 
−
 
−
#Slider #LeftBar {
 
−
left: 0;
 
−
}
 
−
 
−
#Slider #RightBar {
 
−
right: 0;
 
−
}
 
−
 
−
#Slider #LeftArrow {
 
−
position: absolute;
 
−
width: 60px;
 
−
height: 60px;
 
−
margin-left: 30px;
 
−
background: url(https://static.igem.org/mediawiki/2015/9/91/Nymu_left.gif) top no-repeat;
 
−
}
 
−
 
−
#Slider #RightArrow {
 
−
position: absolute;
 
−
width: 60px;
 
−
height: 60px;
 
−
margin-right: 30px;
 
−
background: url(https://static.igem.org/mediawiki/2015/9/95/Nymu_right.gif) top no-repeat;
 
−
}
 
−
 
−
#Slider #LeftArrow:hover, #Slider #RightArrow:hover {
 
−
background-position: bottom;
 
−
cursor: pointer;
 
−
}
 
−
 
−
#container {
 
−
border-top-style: solid;
 
−
border-right-style: solid;
 
−
border-bottom-style: solid;
 
−
border-left-style: solid;
 
−
margin-right: auto;
 
−
margin-left: auto;
 
−
border-top-width: 0px;
 
−
border-right-width: 0px;
 
−
border-bottom-width: 0px;
 
−
border-left-width: 0px;
 
−
}
 
−
 
−
 
−
#container2 {
 
−
border-top-style: solid;
 
−
border-right-style: solid;
 
−
border-bottom-style: solid;
 
−
border-left-style: solid;
 
−
margin-right: auto;
 
−
margin-left: auto;
 
−
border-top-width: 0px;
 
−
border-right-width: 0px;
 
−
border-bottom-width: 0px;
 
−
border-left-width: 0px;
 
−
box-shadow:inset 0px 0px 10px 5px rgba(20%,20%,40%,0.5);
 
−
}
 
−
 
−
.maincontext {
 
−
font-family: Tahoma, Geneva, sans-serif;
 
−
font-style: normal;
 
−
font-size: 55px;
 
−
        padding-top:50px;
 
−
}
 
−
 
−
.subcontext {
 
−
font-family:  Segoe UI, Calibri, Helvetica, sans-serif;
 
−
font-style: normal;
 
−
font-size: 20px;
 
−
        padding-top:30px;
 
−
padding-bottom:20px;
 
−
padding-left:10%;
 
−
padding-right:10%;
 
−
line-height: 30px;
 
−
    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: 30px;
 
−
    text-align: justify;
 
−
 
−
 
−
}
 
−
 
−
.threelane {
 
−
height: 100%;
 
−
width: 80%;
 
−
margin-top: 0px;
 
−
margin-right: auto;
 
−
margin-bottom: 0px;
 
−
margin-left: auto;
 
−
padding: 0px;
 
−
position: relative;
 
−
        background-color: #FFF
 
−
        z-index: -1;
 
−
padding-bottom:10%;
 
−
}
 
−
 
−
 
−
 
−
 
  
 
#left2 {
 
#left2 {
Line 253: Line 58:
 
</style>
 
</style>
  
−
 
−
 
−
<script>
 
−
$(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);
 
−
 
−
//Repeats for window resize
 
−
$(window).resize(function() {
 
−
$('#Slider').css('height', ($('body').width() / 2.5));
 
−
 
−
var BarHeight = $('#Slider').height() -  $('#BottomLinks').height();
 
−
$('#LeftBar, #RightBar').css('height', BarHeight);
 
−
$('#LeftArrow, #RightArrow').css('top', (BarHeight-60)/2);
 
−
});
 
−
 
−
var TotalSlides = $('.Slides').length;
 
−
var CurrentSlide = 0;
 
−
 
−
$('#RightArrow').click(function() {
 
−
CurrentSlide = ++CurrentSlide % TotalSlides;
 
−
changeSlide(CurrentSlide);
 
−
                                        if (timer) { clearInterval(timer) }
 
−
});
 
−
 
−
$('#LeftArrow').click(function() {
 
−
CurrentSlide = (CurrentSlide + TotalSlides - 1) % TotalSlides;
 
−
changeSlide(CurrentSlide);
 
−
                                        if (timer) { clearInterval(timer) }
 
−
});
 
−
 
−
$('.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);}, 4000);})
 
−
      // trigger mouseleave for initial slideshow starting
 
−
                                              .mouseleave();
 
−
                                                                   
 
−
 
−
                               
 
−
 
−
                                function changeSlide(num){
 
−
var SlideID = '#Slide' + num;
 
−
 
−
$('.Slides').css('transition', 'opacity 0.5s ease-out');
 
−
$('.Slides').css('opacity', '0');
 
−
$('.Slides').css(' height', '0');
 
−
$('.Slides').css('overflow', 'hidden');
 
−
 
−
 
−
$(SlideID).css('opacity', '1');
 
−
//Set height of slider (16/5 ratio)
 
−
$('#Slider').css('height', ($('body').width() / 2.5));
 
−
 
−
 
−
 
−
}
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
});
 
−
</script>
 
  
  
Line 353: Line 64:
 
<div id="title"></div>
 
<div id="title"></div>
  
−
    <div id="right2"><a href="https://2015.igem.org/Template:NYMU-2015project-safety"><img src="https://static.igem.org/mediawiki/2016/5/50/OVERVIEW%28%E9%A0%90%E5%82%99%E5%9C%96%E7%89%87%29.jpg" width="100%" ></div>
+
<div id="right2"><a href="https://2015.igem.org/Template:NYMU-2015project-safety"><img src="https://static.igem.org/mediawiki/2016/5/50/OVERVIEW%28%E9%A0%90%E5%82%99%E5%9C%96%E7%89%87%29.jpg" width="100%" ></div>
  
−
    <div id="right1"><a href="https://2015.igem.org/Template:NYMU-2015project-Achievement"><img src="https://static.igem.org/mediawiki/2016/7/7f/PART%28%E9%A0%90%E5%82%99%E5%9C%96%E7%89%87%29.jpg" width="100%" ></div>
+
<div id="right1"><a href="https://2015.igem.org/Template:NYMU-2015project-Achievement"><img src="https://static.igem.org/mediawiki/2016/7/7f/PART%28%E9%A0%90%E5%82%99%E5%9C%96%E7%89%87%29.jpg" width="100%" ></div>
  
−
  <div id="left1"><a href="https://2015.igem.org/Template:NYMU-2015project-wetlab#experiment"><img src="https://static.igem.org/mediawiki/2016/a/aa/PROTOTYPE%28%E9%A0%90%E5%82%99%E5%9C%96%E7%89%87%29.jpg" width="100%"  ></a> </div>
+
<div id="left1"><a href="https://2015.igem.org/Template:NYMU-2015project-wetlab#experiment"><img src="https://static.igem.org/mediawiki/2016/a/aa/PROTOTYPE%28%E9%A0%90%E5%82%99%E5%9C%96%E7%89%87%29.jpg" width="100%"  ></a> </div>
 
      
 
      
−
  <div id="left2"><a href="https://2015.igem.org/Template:NYMU-2015project-wetlab#modeling"><img src="https://static.igem.org/mediawiki/2016/7/73/PRACTICE%28%E9%A0%90%E5%82%99%E5%9C%96%E7%89%87%29.png" width="100%"  ></a></div>
+
<div id="left2"><a href="https://2015.igem.org/Template:NYMU-2015project-wetlab#modeling"><img src="https://static.igem.org/mediawiki/2016/7/73/PRACTICE%28%E9%A0%90%E5%82%99%E5%9C%96%E7%89%87%29.png" width="100%"  ></a></div>
  
 
 
 
 
−
 
−
 
  
 
</html>
 
</html>
−
{{Template:Nymu-Footer}}
 

Revision as of 13:42, 18 July 2016