|
|
| Line 197: |
Line 197: |
| | position: relative; | | position: relative; |
| | } | | } |
| − |
| |
| − | /* Slider Styles */
| |
| − | #Slider {
| |
| − | position: relative;
| |
| − | width: 100%;
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | #Slider .Slides {
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | background-size: 100%, auto;
| |
| − | }
| |
| − |
| |
| − | #Slider #Slide0 {
| |
| − | background-image: url(https://static.igem.org/mediawiki/2013/d/d1/2013UCalgarySlider1.png);
| |
| − | }
| |
| − |
| |
| − | #Slider #Slide1 {
| |
| − | background-image: url(https://static.igem.org/mediawiki/2013/a/ac/2013UCalgarySlider2.png);
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | #Slider #Slide2 {
| |
| − | background-image: url(https://static.igem.org/mediawiki/2013/6/62/2013UCalgarySlider3.png);
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | #Slider #Slide3 {
| |
| − | background-image: url(https://static.igem.org/mediawiki/2013/7/72/2013UCalgarySlider4.png);
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | #Slider #Slide4 {
| |
| − | background-image: url(https://static.igem.org/mediawiki/2013/a/a2/2013UCalgarySlider5.png);
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | #Slider #Slide5 {
| |
| − | background-image: url(https://static.igem.org/mediawiki/2013/d/de/2013UCalgarySlider6.png);
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | #Slider #BottomLinks {
| |
| − | position: absolute;
| |
| − | width: 100%;
| |
| − | padding: 0;
| |
| − | bottom: 0;
| |
| − | background: #353132;
| |
| − | text-align: center;
| |
| − | opacity: 0.61;
| |
| − | filter: alpha(opacity=61);
| |
| − | }
| |
| − |
| |
| − | #Slider #BottomLinks li {
| |
| − | display: inline-table;
| |
| − | list-style: none;
| |
| − | height: 100%;
| |
| − | color: #FFFFFF;
| |
| − | font: 24px Raleway, Arial, san-serif;
| |
| − | text-align: center;
| |
| − | padding: 15px 20px;
| |
| − | }
| |
| − |
| |
| − | #Slider #BottomLinks li:hover {
| |
| − | cursor: pointer;
| |
| − | text-decoration: underline;
| |
| − | }
| |
| − |
| |
| − | #Slider .SideBar {
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | width: 90px;
| |
| − | z-index: 1;
| |
| − | }
| |
| − |
| |
| − | #Slider #LeftBar {
| |
| − | left: 0;
| |
| − | }
| |
| − |
| |
| − | #Slider #RightBar {
| |
| − | right: 0;
| |
| − | }
| |
| − |
| |
| − | #Slider #LeftArrow {
| |
| − | position: absolute;
| |
| − | width: 60px;
| |
| − | height: 60px;
| |
| − | margin-left: 30px;
| |
| − | background: url(https://static.igem.org/mediawiki/2013/5/53/2013UCalgaryArrowLeft.png) top no-repeat;
| |
| − | }
| |
| − |
| |
| − | #Slider #RightArrow {
| |
| − | position: absolute;
| |
| − | width: 60px;
| |
| − | height: 60px;
| |
| − | margin-right: 30px;
| |
| − | background: url(https://static.igem.org/mediawiki/2013/5/56/2013UCalgaryArrowRight.png) top no-repeat;
| |
| − | }
| |
| − |
| |
| − | #Slider #LeftArrow:hover, #Slider #RightArrow:hover {
| |
| − | background-position: bottom;
| |
| − | cursor: pointer;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| | | | |
| | | | |
| | </style> | | </style> |
| | | | |
| − |
| |
| − | $(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 type="text/javascript"> | | <script type="text/javascript"> |
| Line 466: |
Line 305: |
| | </div> | | </div> |
| | </div> | | </div> |
| − |
| |
| − |
| |
| − |
| |
| − | <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>
| |
| | | | |
| | <div id="footer"> | | <div id="footer"> |
