|
|
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>
| |
| | | |
| | | |