Template:Team:Calgary/Main
From 2013.igem.org
(Difference between revisions)
Line 33: | Line 33: | ||
<!-- JavaScript & JQuery --> | <!-- JavaScript & JQuery --> | ||
<script src="http://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript"></script> | <script src="http://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript"></script> | ||
+ | <script> | ||
+ | $(document).ready(function() { | ||
+ | if ($('body').width() > 868) { | ||
+ | $('#TopBar').css('padding-left', Math.floor(($('body').width() - 868) / 2)); | ||
+ | $('#LogoItem').css('display', 'block'); | ||
+ | } | ||
+ | else if ($('body').width() <= 868) { | ||
+ | if ($('body').width() > 744) { | ||
+ | $('#TopBar').css('padding-left', Math.floor(($('body').width() - 744) / 2)); | ||
+ | $('#LogoItem').css('display', 'none'); | ||
+ | } | ||
+ | } | ||
+ | var ScreenWidth = $('body').width(); | ||
+ | if (ScreenWidth > 1007) { | ||
+ | var Margins = Math.floor(ScreenWidth * .086666); | ||
+ | var ElementWidth = Math.floor(ScreenWidth * .37); | ||
+ | |||
+ | $('#SectionLinks').css('padding-left', Margins); | ||
+ | $('#SectionLinks').css('padding-top', Margins); | ||
+ | $('#SectionLinks .DescriptionLink').css('margin-right', Margins); | ||
+ | $('#SectionLinks .DescriptionLink').css('margin-bottom', Margins); | ||
+ | $('#SectionLinks .DescriptionLink').css('width', ElementWidth); | ||
+ | } | ||
+ | |||
+ | $(window).resize(function() { | ||
+ | if ($('body').width() > 868) { | ||
+ | $('#TopBar').css('padding-left', Math.floor(($('body').width() - 868) / 2)); | ||
+ | $('#LogoItem').css('display', 'block'); | ||
+ | } | ||
+ | else if ($('body').width() <= 868) { | ||
+ | if ($('body').width() > 744) { | ||
+ | $('#TopBar').css('padding-left', Math.floor(($('body').width() - 744) / 2)); | ||
+ | $('#LogoItem').css('display', 'none'); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | var ScreenWidth = $('body').width(); | ||
+ | if (ScreenWidth > 1007) { | ||
+ | var Margins = Math.floor(ScreenWidth * .086666); | ||
+ | var ElementWidth = Math.floor(ScreenWidth * .37); | ||
+ | |||
+ | $('#SectionLinks').css('padding-left', Margins); | ||
+ | $('#SectionLinks').css('padding-top', Margins); | ||
+ | $('#SectionLinks .DescriptionLink').css('margin-right', Margins); | ||
+ | $('#SectionLinks .DescriptionLink').css('margin-bottom', Margins); | ||
+ | $('#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> | ||
</head> | </head> | ||
Revision as of 22:17, 16 August 2013