Difference between revisions of "Template:NYMU-Taipei2"

Line 197: Line 197:
 
position: relative;
 
position: relative;
 
}
 
}
 +
 +
/* Slider Styles */
 +
#Slider {
 +
position: relative;
 +
width: 100%;
 +
display: none;
 +
}
 +
 +
#Slider .Slides {
 +
width: 100%;
 +
height: 100%;
 +
background-size: 100%, auto;
 +
}
 +
 +
#Slider #Slide0 {
 +
background-image: url(https://static.igem.org/mediawiki/2013/d/d1/2013UCalgarySlider1.png);
 +
}
 +
 +
#Slider #Slide1 {
 +
background-image: url(https://static.igem.org/mediawiki/2013/a/ac/2013UCalgarySlider2.png);
 +
display: none;
 +
}
 +
 +
#Slider #Slide2 {
 +
background-image: url(https://static.igem.org/mediawiki/2013/6/62/2013UCalgarySlider3.png);
 +
display: none;
 +
}
 +
 +
#Slider #Slide3 {
 +
background-image: url(https://static.igem.org/mediawiki/2013/7/72/2013UCalgarySlider4.png);
 +
display: none;
 +
}
 +
 +
#Slider #Slide4 {
 +
background-image: url(https://static.igem.org/mediawiki/2013/a/a2/2013UCalgarySlider5.png);
 +
display: none;
 +
}
 +
 +
#Slider #Slide5 {
 +
background-image: url(https://static.igem.org/mediawiki/2013/d/de/2013UCalgarySlider6.png);
 +
display: none;
 +
}
 +
 +
#Slider #BottomLinks {
 +
position: absolute;
 +
width: 100%;
 +
padding: 0;
 +
bottom: 0;
 +
background: #353132;
 +
text-align: center;
 +
opacity: 0.61;
 +
filter: alpha(opacity=61);
 +
}
 +
 +
#Slider #BottomLinks li {
 +
display: inline-table;
 +
list-style: none;
 +
height: 100%;
 +
color: #FFFFFF;
 +
font: 24px Raleway, Arial, san-serif;
 +
text-align: center;
 +
padding: 15px 20px;
 +
}
 +
 +
#Slider #BottomLinks li:hover {
 +
cursor: pointer;
 +
text-decoration: underline;
 +
}
 +
 +
#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/2013/5/53/2013UCalgaryArrowLeft.png) top no-repeat;
 +
}
 +
 +
#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;
 +
}
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
  
  
 
</style>
 
</style>
  
 +
 +
$(document).ready(function() {
 +
//Display slider for Javascript users
 +
$('#Slider').css('display', 'block');
 +
 +
//Set height of slider (16/5 ratio)
 +
$('#Slider').css('height', ($('body').width() / 3.2));
 +
 +
//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() / 3.2));
 +
 +
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);
 +
});
 +
 +
$('#LeftArrow').click(function() {
 +
CurrentSlide = (CurrentSlide + TotalSlides - 1) % TotalSlides;
 +
changeSlide(CurrentSlide);
 +
});
 +
 +
$('.SlideLink').click(function() {
 +
var ClickedSlide = $(this).attr('id');
 +
CurrentSlide = parseInt(ClickedSlide.replace('Link', ''));
 +
changeSlide(CurrentSlide);
 +
});
 +
 +
function changeSlide(num){
 +
var SlideID = '#Slide' + num;
 +
$('.Slides').css('display', 'none');
 +
$(SlideID).css('display', 'block');
 +
}
 +
});
  
 
<script type="text/javascript">
 
<script type="text/javascript">
Line 305: Line 466:
 
   </div>
 
   </div>
 
</div>
 
</div>
 +
 +
 +
 +
<div id="Slider">
 +
<div id="Slide0" class="Slides current"></div>
 +
<div id="Slide1" class="Slides"></div>
 +
<div id="Slide2" class="Slides"></div>
 +
<div id="Slide3" class="Slides"></div>
 +
<div id="Slide4" class="Slides"></div>
 +
<div id="Slide5" class="Slides"></div>
 +
<div id="LeftBar" class="SideBar"><div id="LeftArrow"></div></div>
 +
<div id="RightBar" class="SideBar"><div id="RightArrow"></div></div>
 +
<ul id="BottomLinks">
 +
<li id="Link0" class="SlideLink">Intro</li><li id="Link1" class="SlideLink">Problem</li><li id="Link2" class="SlideLink">Situation</li><li id="Link3" class="SlideLink">Idea</li><li id="Link4" class="SlideLink">Solution</li><li id="Link5" class="SlideLink">Platform</li>
 +
</ul>
 +
</div>
  
 
<div id="footer">
 
<div id="footer">

Revision as of 07:18, 1 August 2015

$(document).ready(function() { //Display slider for Javascript users $('#Slider').css('display', 'block'); //Set height of slider (16/5 ratio) $('#Slider').css('height', ($('body').width() / 3.2)); //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() / 3.2)); 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); }); $('#LeftArrow').click(function() { CurrentSlide = (CurrentSlide + TotalSlides - 1) % TotalSlides; changeSlide(CurrentSlide); }); $('.SlideLink').click(function() { var ClickedSlide = $(this).attr('id'); CurrentSlide = parseInt(ClickedSlide.replace('Link', '')); changeSlide(CurrentSlide); }); function changeSlide(num){ var SlideID = '#Slide' + num; $('.Slides').css('display', 'none'); $(SlideID).css('display', 'block'); } });

Fight the Blight

About Our Project

Judging Form

Experiment

Policy & Practice