Team:BYU Provo/Toronto/FixTest

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
{{TeamBYUProvoFix}}
{{TeamBYUProvoFix}}
-
<br>
+
<html>
 +
<head>
-
{| width="100%"
+
<title>Fancy Slideshow Navigation (example)</title>
-
| colspan="2" | <font color="#333399" size="6" font face="Calibri">
+
-
: '''Andrew's Play Page'''</font>
+
<style type="text/css">
-
<br>
+
#slideshow {
 +
    width: 900px;
 +
    height: 500px;
 +
    overflow: hidden;
 +
    position: relative;
 +
    margin: 20px auto;
 +
}
-
|- valign="top"
+
#slideshow-reel {
-
| style="width: 22%; background-color: transparent;"|
+
    width: 5400px;
 +
    height: 450px;
 +
    position: absolute;
 +
    top: 0;
 +
    left: 0;
 +
}
-
<font color="#333399" size="3" font face="Calibri">
+
#slideshow-reel .slide {
 +
    width: 900px;
 +
    height: 450px;
 +
    float: left;
 +
    background-color: gray;
 +
}
-
: Add links
+
#slideshow-reel .slide:nth-child(2n+1) {
 +
    background-color: #333;
 +
}
-
</font>
+
#slideshow-reel h1 {
 +
    margin: 25px 60px;
 +
    color: #FFF;
 +
    font-size: 3em;
 +
    text-shadow: 0 -1px 1px #333;
 +
}
-
| style="width: 78%; background-color: transparent;"|
+
/* arrow navigation */
-
<font face="Calibri" size="3">
+
.slideshow-arrow {
-
__NOTOC__==Accomplishments==
+
    display: block;
 +
    position: absolute;
 +
    top: 190px;
 +
    width: 0;
 +
    height: 0;
 +
    border-style: solid;
 +
    border-width: 28px 21px;
 +
    border-color: transparent;
 +
    outline: none;
 +
}
-
BYU 2013 iGEM Team is excited to announce that we won a gold medal during the North America Regional Jamboree and have advanced to the World Championships! We are especially proud because we are a team of undergraduate students, most of whom had limited research experience before iGEM, but we successfully competed in the over-graduate division.  
+
.slideshow-arrow:hover {
 +
    opacity: .5;
 +
    filter: alpha(opacity=50);
 +
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
 +
}
-
We really appreciate the marvelous work of iGEM headquarters and the University of Toronto for hosting us. We are also grateful for all the comments we received during our presentation and poster session. Your comments are invaluable to us and we will work hard to perfect Phage Pharming for the World Championships!
+
#slideshow-left {
 +
    left: 0;
 +
    border-right-color: #fff;
 +
}
 +
#slideshow-right {
 +
    right: 0;
 +
    border-left-color: #fff;
 +
}
-
</font>
+
/* bottom navigation */
-
<br>
+
#slideshow-nav {
-
<br>
+
    position: absolute;
 +
    left: 0;
 +
    bottom: 0;
 +
    width: 900px;
 +
}
 +
 
 +
#slideshow-nav .nav-item {
 +
    float: left;
 +
    width: 150px;
 +
    padding: 11px 0;
 +
    outline: none;
 +
}
 +
 
 +
#slideshow-nav .nav-item-line {
 +
    float: left;
 +
    width: 68px;
 +
    height: 1px;
 +
    line-height: 1px;
 +
    margin: 3px 0;
 +
    background-color: #bbb;
 +
}
 +
 
 +
#slideshow-nav .nav-item-line-hidden {
 +
    background-color: transparent;
 +
}
 +
 
 +
#slideshow-nav .nav-item-dot {
 +
    float: left;
 +
    width: 8px;
 +
    height: 8px;
 +
    margin: 0 3px;
 +
    -webkit-border-radius: 4px;
 +
    -moz-border-radius: 4px;
 +
    border-radius: 4px;
 +
    background-color: #5884b0;
 +
}
 +
 
 +
/* active nav dot */
 +
 
 +
#active-nav-item {
 +
    display: block;
 +
    position: absolute;
 +
    top: 0;
 +
    left: 0;
 +
    width: 30px;
 +
    height: 30px;
 +
    margin-left: 60px;
 +
    background-color: #8e8d8b;
 +
    background-color: rgba(28, 27, 23, .5);
 +
    -webkit-border-radius: 15px;
 +
    -moz-border-radius: 15px;
 +
    border-radius: 15px;
 +
}
 +
 
 +
#active-nav-item .active-nav-item-inner {
 +
    display: inline-block;
 +
    width: 8px;
 +
    height: 8px;
 +
    margin: 11px;
 +
    -webkit-border-radius: 4px;
 +
    -moz-border-radius: 4px;
 +
    border-radius: 4px;
 +
    background-color: #000;
 +
}
 +
 
 +
 
 +
 
 +
</style>
 +
 
 +
<!--[if lt IE 7]>
 +
<style type="text/css">
 +
.slideshow-arrow,
 +
#slideshow-nav .nav-item-line,
 +
#slideshow-nav .nav-item-dot {
 +
    overflow: hidden;
 +
}
 +
 
 +
.slideshow-arrow,
 +
.slideshow-arrow:hover {
 +
    border-top-color: pink;
 +
    border-bottom-color: pink;
 +
    filter: chroma(color=pink);
 +
}
 +
 
 +
#slideshow-left {
 +
    border-left-color: pink;
 +
}
 +
 
 +
#slideshow-right {
 +
    border-right-color: pink;
 +
}
 +
</style>
 +
<![endif]-->
 +
 
 +
</head>
 +
 
 +
<body>
 +
 
 +
<div id="slideshow">
 +
    <div id="slideshow-reel">
 +
        <div class="slide">
 +
            <h1>Slide 1</h1>
 +
        </div>
 +
       
 +
        <div class="slide">
 +
            <h1>Slide 2</h1>
 +
        </div>
 +
       
 +
        <div class="slide">
 +
            <h1>Slide 3</h1>
 +
        </div>
 +
       
 +
        <div class="slide">
 +
            <h1>Slide 4</h1>
 +
        </div>
 +
       
 +
        <div class="slide">
 +
            <h1>Slide 5</h1>
 +
        </div>
 +
       
 +
        <div class="slide">
 +
            <h1>Slide 6</h1>
 +
        </div>
 +
    </div>
 +
   
 +
    <a href="#" id="slideshow-left" class="slideshow-arrow"></a>
 +
    <a href="#" id="slideshow-right" class="slideshow-arrow"></a>
 +
   
 +
    <div id="slideshow-nav">
 +
        <a href="#" class="nav-item">
 +
            <span class="nav-item-line nav-item-line-hidden"></span>
 +
            <span class="nav-item-dot"></span>
 +
            <span class="nav-item-line"></span>
 +
        </a>
 +
       
 +
        <a href="#" class="nav-item">
 +
            <span class="nav-item-line"></span>
 +
            <span class="nav-item-dot"></span>
 +
            <span class="nav-item-line"></span>
 +
        </a>
 +
       
 +
        <a href="#" class="nav-item">
 +
            <span class="nav-item-line"></span>
 +
            <span class="nav-item-dot"></span>
 +
            <span class="nav-item-line"></span>
 +
        </a>
 +
       
 +
        <a href="#" class="nav-item">
 +
            <span class="nav-item-line"></span>
 +
            <span class="nav-item-dot"></span>
 +
            <span class="nav-item-line"></span>
 +
        </a>
 +
       
 +
        <a href="#" class="nav-item">
 +
            <span class="nav-item-line"></span>
 +
            <span class="nav-item-dot"></span>
 +
            <span class="nav-item-line"></span>
 +
        </a>
 +
       
 +
        <a href="#" class="nav-item">
 +
            <span class="nav-item-line"></span>
 +
            <span class="nav-item-dot"></span>
 +
            <span class="nav-item-line nav-item-line-hidden"></span>
 +
        </a>
 +
       
 +
        <span id="active-nav-item">
 +
            <span class="active-nav-item-inner"></span>
 +
        </span>
 +
    </div>
 +
</div>
 +
 
 +
 
 +
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
 +
"></script>
 +
<script type="text/javascript">
 +
 
 +
$(function() {
 +
    function changeSlide( newSlide ) {
 +
        // cancel any timeout
 +
        clearTimeout( slideTimeout );
 +
       
 +
        // change the currSlide value
 +
        currSlide = newSlide;
 +
       
 +
        // make sure the currSlide value is not too low or high
 +
        if ( currSlide > maxSlide ) currSlide = 0;
 +
        else if ( currSlide < 0 ) currSlide = maxSlide;
 +
       
 +
        // animate the slide reel
 +
        $slideReel.animate({
 +
            left : currSlide * -900
 +
        }, 400, 'swing', function() {
 +
            // hide / show the arrows depending on which frame it's on
 +
            if ( currSlide == 0 ) $slideLeftNav.hide();
 +
            else $slideLeftNav.show();
 +
           
 +
            if ( currSlide == maxSlide ) $slideRightNav.hide();
 +
            else $slideRightNav.show();
 +
           
 +
            // set new timeout if active
 +
            if ( activeSlideshow ) slideTimeout = setTimeout(nextSlide, 1200);
 +
        });
 +
       
 +
        // animate the navigation indicator
 +
        $activeNavItem.animate({
 +
            left : currSlide * 150
 +
        }, 400, 'swing');
 +
    }
 +
   
 +
    function nextSlide() {
 +
        changeSlide( currSlide + 1 );
 +
    }
 +
   
 +
    // define some variables / DOM references
 +
    var activeSlideshow = true,
 +
    currSlide = 0,
 +
    slideTimeout,
 +
    $slideshow = $('#slideshow'),
 +
    $slideReel = $slideshow.find('#slideshow-reel'),
 +
    maxSlide = $slideReel.children().length - 1,
 +
    $slideLeftNav = $slideshow.find('#slideshow-left'),
 +
    $slideRightNav = $slideshow.find('#slideshow-right'),
 +
    $activeNavItem = $slideshow.find('#active-nav-item');
 +
   
 +
    // set navigation click events
 +
   
 +
    // left arrow
 +
    $slideLeftNav.click(function(ev) {
 +
        ev.preventDefault();
 +
       
 +
        activeSlideshow = false;
 +
       
 +
        changeSlide( currSlide - 1 );
 +
    });
 +
   
 +
    // right arrow
 +
    $slideRightNav.click(function(ev) {
 +
        ev.preventDefault();
 +
       
 +
        activeSlideshow = false;
 +
       
 +
        changeSlide( currSlide + 1 );
 +
    });
 +
   
 +
    // main navigation
 +
    $slideshow.find('#slideshow-nav a.nav-item').click(function(ev) {
 +
        ev.preventDefault();
 +
       
 +
        activeSlideshow = false;
 +
       
 +
        changeSlide( $(this).index() );
 +
    });
 +
   
 +
    // start the animation
 +
    slideTimeout = setTimeout(nextSlide, 1200);
 +
});
 +
 
 +
</script>
 +
</html>

Revision as of 19:32, 21 October 2013

Fancy Slideshow Navigation (example)

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Retrieved from "http://2013.igem.org/Team:BYU_Provo/Toronto/FixTest"