Team:UNC-Chapel Hill
From 2014.igem.org
Megaboy837 (Talk | contribs) |
Megaboy837 (Talk | contribs) |
||
Line 53: | Line 53: | ||
<!-- end of menu --> | <!-- end of menu --> | ||
+ | <head> | ||
+ | <link href="https://2013.igem.org/Team:Calgary/StyleSheets/HomePage?action=raw&ctype=text/css" rel="stylesheet"> | ||
+ | <script> | ||
+ | $(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> | ||
+ | </head> | ||
+ | |||
+ | <body> | ||
+ | <section id="HomePageContent"> | ||
+ | <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> | ||
<!-- First block of content --> | <!-- First block of content --> |
Revision as of 14:28, 2 August 2014
|
- Intro
- Problem
- Situation
- Idea
- Solution
- Platform
Welcome
|
|
|
|
|
Here you can place the logos of your sponsors or other links! |