|
|
| Line 6: |
Line 6: |
| | | | |
| | <!--SLIDER--> | | <!--SLIDER--> |
| - | <head>
| |
| - | <link href="https://2014.igem.org/Team:UCLA/anuved_verma_ucla2014_workspace/jscore?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>
| |
| - | </section>
| |
| - | </body>
| |
| | | | |
| | | | |
"
