"
Template:Team:Calgary/Test
From 2013.igem.org
(Difference between revisions)
| Line 31: | Line 31: | ||
<link href="https://2013.igem.org/Team:Calgary/StyleSheets/Reset?action=raw&ctype=text/css" rel="stylesheet"> | <link href="https://2013.igem.org/Team:Calgary/StyleSheets/Reset?action=raw&ctype=text/css" rel="stylesheet"> | ||
<link href="https://2013.igem.org/Team:Calgary/TestPageNavCSS?action=raw&ctype=text/css" rel="stylesheet"> | <link href="https://2013.igem.org/Team:Calgary/TestPageNavCSS?action=raw&ctype=text/css" rel="stylesheet"> | ||
| + | <link href="https://2013.igem.org/Team:Calgary/TestPageSliderCSS?action=raw&ctype=text/css" rel="stylesheet"> | ||
<link href="https://2013.igem.org/Team:Calgary/TestPageCSS?action=raw&ctype=text/css" rel="stylesheet"> | <link href="https://2013.igem.org/Team:Calgary/TestPageCSS?action=raw&ctype=text/css" rel="stylesheet"> | ||
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> | <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> | ||
| - | |||
<script> | <script> | ||
$(document).ready(function() { | $(document).ready(function() { | ||
| Line 46: | Line 46: | ||
} | } | ||
} | } | ||
| - | |||
var ScreenWidth = $('body').width(); | var ScreenWidth = $('body').width(); | ||
if (ScreenWidth > 1007) { | if (ScreenWidth > 1007) { | ||
| Line 70: | Line 69: | ||
} | } | ||
} | } | ||
| - | + | ||
var ScreenWidth = $('body').width(); | var ScreenWidth = $('body').width(); | ||
if (ScreenWidth > 1007) { | if (ScreenWidth > 1007) { | ||
| Line 82: | Line 81: | ||
$('#SectionLinks .DescriptionLink').css('width', ElementWidth); | $('#SectionLinks .DescriptionLink').css('width', ElementWidth); | ||
} | } | ||
| - | }); | + | |
| + | }); | ||
| + | }); | ||
| + | </script> | ||
| + | <script> | ||
| + | $(document).ready(function() { | ||
| + | //Set height of slider (12/7 ratio) | ||
| + | $('#Slider').css('height', ($('body').width() / 2.4)); | ||
| + | |||
| + | //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.4)); | ||
| + | |||
| + | var BarHeight = $('#Slider').height() - $('#BottomLinks').height(); | ||
| + | $('#LeftBar, #RightBar').css('height', BarHeight); | ||
| + | $('#LeftArrow, #RightArrow').css('top', (BarHeight-60)/2); | ||
| + | }); | ||
| + | |||
| + | // var preloadImages = ['TestSlide0.jpg','TestSlide1.jpg','TestSlide2.jpg','TestSlide3.jpg','TestSlide4.jpg']; | ||
| + | // var images = []; | ||
| + | // for (var count = 0; count < preloadImages.length; count++) { | ||
| + | // images[count] = new Image(); | ||
| + | // images[count].src = preloadImages[count]; | ||
| + | // } | ||
| + | |||
| + | var TotalSlides = $('.Slides').length | ||
| + | var CurrentSlide = 0; | ||
| + | |||
| + | $('#RightArrow').click(function() { | ||
| + | CurrentSlide = ++CurrentSlide % TotalSlides; | ||
| + | $('.Slides').css('display', 'none'); | ||
| + | SlideID = '#Slide' + CurrentSlide; | ||
| + | $(SlideID).css('display', 'block'); | ||
| + | |||
| + | }); | ||
| + | |||
| + | $('#LeftArrow').click(function() { | ||
| + | CurrentSlide = (CurrentSlide + TotalSlides - 1) % TotalSlides; | ||
| + | $('.Slides').css('display', 'none'); | ||
| + | SlideID = '#Slide' + CurrentSlide; | ||
| + | $(SlideID).css('display', 'block'); | ||
| + | |||
| + | }); | ||
| + | |||
| + | $('.SlideLink').click(function() { | ||
| + | var ClickedSlide = $(this).attr('id'); | ||
| + | CurrentSlide = parseInt(ClickedSlide.replace('Link', '')); | ||
| + | $('.Slides').css('display', 'none'); | ||
| + | SlideID = '#Slide' + CurrentSlide; | ||
| + | $(SlideID).css('display', 'block'); | ||
| + | |||
| + | }); | ||
}); | }); | ||
</script> | </script> | ||
Revision as of 17:39, 16 August 2013
