|
|
Line 10: |
Line 10: |
| <head> | | <head> |
| <link href="https://2015.igem.org/Template:UNC-Chapel_Hill/CSS?action=raw&ctype=text/css" rel="stylesheet"> | | <link href="https://2015.igem.org/Template:UNC-Chapel_Hill/CSS?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">Inspiration</li>
| + | |
− | <li id="Link3" class="SlideLink">Solution</li>
| + | |
− | <li id="Link4" class="SlideLink">Impact</li>
| + | |
− | <li id="Link5" class="SlideLink">Team</li>
| + | |
− | </ul>
| + | |
− | </div>
| + | |
− | | + | |
| | | |
| + | </head> |
| <!-- Block of content 1 --> | | <!-- Block of content 1 --> |
| <table width="100%" cellspacing="0" height="500px"> | | <table width="100%" cellspacing="0" height="500px"> |