Template:Http://2014.igem.org/Team:Colombia

From 2013.igem.org

(Difference between revisions)
 
(14 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
-
 
-
<script>
 
-
 
-
/**
 
-
* Slimslider v1.1.0
 
-
* @author Kyle Foster
 
-
* MIT license
 
-
*/
 
-
;(function ( $, window, document, undefined ) {
 
-
 
-
  $.fn.slimSlider = function ( options ) {
 
-
 
-
    options = $.extend( {}, $.fn.slimSlider.options, options );
 
-
 
-
    return this.each(function () {       
 
-
     
 
-
      // Define our variables
 
-
      var counter  = 0,
 
-
          element  = $(this),
 
-
          wrapper  = element.children('.slides'),
 
-
          slide    = wrapper.children('li'),
 
-
          slideCnt = slide.length,
 
-
          navLink  = element.find('.slide-nav').find('li').find('a'),
 
-
          prefix  = (/mozilla/.test(navigator.userAgent.toLowerCase()) &&
 
-
                    !/webkit/.test(navigator.userAgent.toLowerCase())) ? '-moz-' :
 
-
                    (/webkit/.test(navigator.userAgent.toLowerCase())) ? '-webkit-' :
 
-
                    (/msie/.test(navigator.userAgent.toLowerCase()))  ? '-ms-' :
 
-
                    (/opera/.test(navigator.userAgent.toLowerCase()))  ? '-o-' : '';
 
-
     
 
-
      // Add active class to first nav link
 
-
      navLink.first().addClass('active');   
 
-
     
 
-
      // Auto play function (if selected options)
 
-
      if ( options.autoPlay === true ) {         
 
-
       
 
-
        // Define slideshow variable
 
-
        var slideShow;
 
-
 
-
        // Define play function
 
-
        function play() {
 
-
 
-
          // Don't execute after click function 
 
-
          if ( !wrapper.is('.stopped') ) {
 
-
 
-
            // Slideshow function
 
-
            slideShow = setTimeout(function() {
 
-
             
 
-
              // Slideshow iterator
 
-
              if (counter < slideCnt - 1) { counter++; }
 
-
              else { counter = 0; }; 
 
-
 
-
              // Stop browser 'catch up' when switching tabs
 
-
              wrapper.stop(true,true);
 
-
 
-
              // Fire animation function
 
-
              animate();
 
-
 
-
              // Loop our slideshow
 
-
              play();
 
-
            }, options.autoDelay );
 
-
          };
 
-
        };
 
-
 
-
        // Instantiate our play function
 
-
        play();
 
-
       
 
-
        // Define our pause function
 
-
        function pause() { clearTimeout(slideShow); };
 
-
       
 
-
        // Pause on hover (if selected)
 
-
        if ( options.hoverPause === true ) {
 
-
          wrapper.on({
 
-
            mouseenter: function() { pause(); },
 
-
            mouseleave: function() { play(); }
 
-
          });
 
-
        };
 
-
      };
 
-
 
-
      // Navigation click function
 
-
      navLink.on('click', function(e) {
 
-
       
 
-
        // Stop auto play (if instantiated)
 
-
        pause();
 
-
 
-
        // Add a class to keep animation stopped
 
-
        wrapper.addClass('stopped');
 
-
       
 
-
        // Set counter to new slide position
 
-
        counter = $(this).parent().index();
 
-
       
 
-
        // Fire animation function
 
-
        animate();
 
-
       
 
-
        // Prevent default click action
 
-
        e.preventDefault();
 
-
      }); 
 
-
 
-
      // Define our animation function
 
-
      function animate() {
 
-
     
 
-
        // Iterate through our navigation links
 
-
        navLink.each(function() {
 
-
     
 
-
          // Cache 'this'
 
-
          var currentLink = $(this);         
 
-
     
 
-
          // Move to counter's position
 
-
          if ( counter === currentLink.parent().index() ) {
 
-
            navLink.removeClass('active'); // Clear 'active' class
 
-
            currentLink.addClass('active'); // And add to selected link
 
-
          }
 
-
        });
 
-
 
-
        // Animation
 
-
        wrapper
 
-
          .css( prefix + 'transition' , prefix + 'transform ' + options.animSpeed ) // Apply transition
 
-
          .css( prefix + 'transform' , 'translate(-' + counter * element.width() + 'px, 0)' ) // Animate
 
-
          .bind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function() {
 
-
            wrapper.css( prefix + 'transition' , 'none' ); // Kill transition once animation completes
 
-
          });
 
-
      };
 
-
 
-
      // Define debulked onresize handler
 
-
      function on_resize(c, t) { onresize = function() { clearTimeout(t); t = setTimeout(c, 100) }; return c };
 
-
     
 
-
      // Instantiate resize function     
 
-
      on_resize(function() {
 
-
     
 
-
        // Cache our slider width
 
-
        var newWidth = element.width();       
 
-
     
 
-
        // Set wrapper width & reposition
 
-
        wrapper
 
-
          .css({ 'width' : newWidth * slideCnt })
 
-
          .css( prefix + 'transform' , 'translate(-' + counter * newWidth + 'px, 0)' );       
 
-
     
 
-
        // Set slide width
 
-
        slide.css({ 'width' : newWidth });
 
-
      })();   
 
-
    });
 
-
  };
 
-
 
-
  // Overridable default options
 
-
  $.fn.slimSlider.options = {
 
-
    animSpeed  : '0.5s', // animation speed
 
-
    autoPlay  : true,  // auto play option
 
-
    autoDelay  : 4000,  // auto play duration
 
-
    hoverPause : true    // auto play pause on hover     
 
-
  };
 
-
 
-
})( jQuery, window, document );
 
-
 
-
// Instantiate Slimslider
 
-
$('.slider').slimSlider();
 
-
 
-
</script>
 
Line 209: Line 53:
   Background:#C68E17;
   Background:#C68E17;
   }
   }
-
 
-
</style>
 
-
 
-
<style>
 
-
 
-
/* Webfont link */
 
-
@import url(http://fonts.googleapis.com/css?family=Unica+One);
 
-
 
-
/* Plugin base styles */
 
-
 
-
.slider {
 
-
  position: relative;
 
-
  width: 100%;
 
-
  overflow: hidden;
 
-
}
 
-
 
-
.slides {
 
-
  position: relative;
 
-
  padding: 0;
 
-
  list-style: none;
 
-
  letter-spacing: 0;
 
-
  word-spacing: 0;
 
-
  font-size: 0;
 
-
  -webkit-backface-visibility: hidden;
 
-
  -webkit-transform: translate3d(0,0,0);
 
-
}
 
-
 
-
.slides li {
 
-
  display: inline-block;
 
-
  -webkit-backface-visibility: hidden;
 
-
}
 
-
 
-
.slides li img {
 
-
  width: 100%;
 
-
  height: auto;
 
-
}
 
-
 
-
/* Non-plugin styles */
 
-
 
-
* {
 
-
  margin: 0;
 
-
  padding: 0;
 
-
}
 
-
 
-
body {
 
-
  position: relative;
 
-
  width: 90%;
 
-
  max-width: 600px;
 
-
  margin: 0 auto;
 
-
  font-family: 'Unica One', sans-serif;
 
-
}
 
-
 
-
.slide-nav {
 
-
  position: absolute;
 
-
  bottom: 20px;
 
-
  right: 20px;
 
-
  z-index: 1;
 
-
}
 
-
 
-
.slide-nav ul {
 
-
  letter-spacing: 0;
 
-
  word-spacing: 0;
 
-
  font-size: 0;
 
-
}
 
-
 
-
.slide-nav li { display: inline-block; }
 
-
 
-
.slide-nav li a {
 
-
  display: block;
 
-
  color: #444;
 
-
  background: #FFF;
 
-
  text-decoration: none;
 
-
  border-radius: 50%;
 
-
  width: 26px;
 
-
  height: 26px;
 
-
  line-height: 26px;
 
-
  font-size: 12px;
 
-
  text-align: center;
 
-
  margin: 0 0 0 6px;
 
-
}
 
-
 
-
.slide-nav li a.active { color: #DEBB1E; }
 
</style>
</style>
Line 306: Line 68:
ul.flatflipbuttons{
ul.flatflipbuttons{
margin-left:500px;
margin-left:500px;
 +
margin-top: 1200px;
padding:0;
padding:0;
list-style:none;
list-style:none;
Line 458: Line 221:
font-size:13px; /* Establishes the global font size */
font-size:13px; /* Establishes the global font size */
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */
 +
 +
position: absolute;
 +
    top: 1px;
 +
    right: 10px;
 +
}
}
#menu-wrap .orbit{
#menu-wrap .orbit{
height: 210px;
height: 210px;
-
       margin: 35px; /* Pushes the images in the display to the center */
+
       margin: 30px; /* Pushes the images in the display to the center */       position: absolute;  
-
      position: absolute;  
+
     
       width: 210px;
       width: 210px;
}
}
Line 469: Line 237:
#menu-wrap .orbit-frame{
#menu-wrap .orbit-frame{
border:2px solid #999; /* Creates a division between the image and wrap5 */
border:2px solid #999; /* Creates a division between the image and wrap5 */
 +
}
}
Line 878: Line 647:
</style>
</style>
 +
 +
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
 +
<script type="text/javascript" src="http://linacabal.com/juan/s3Slider.js"></script>
 +
<script type="text/javascript">
 +
    $(document).ready(function() {
 +
        $('#slider').s3Slider({
 +
            timeOut: 5000
 +
        });
 +
    });
 +
</script>
Line 897: Line 676:
<![endif]-->
<![endif]-->
 +
<style>
 +
img {
 +
    position: absolute;
 +
    left: 0px;
 +
    top: 0px;
 +
 +
 
 +
}
 +
 +
</style>
Line 903: Line 692:
<body>
<body>
 +
 +
 +
<img src="https://static.igem.org/mediawiki/2013/0/00/Colombiatop.png" width="1330px" height="450px" align="left" >
 +
<div id="menu-wrap">
<div id="menu-wrap">
<div class="wrap1">
<div class="wrap1">
Line 982: Line 775:
-
<table style="width:1300px">
 
-
<tr>
 
-
  <td>
 
-
 
-
<td>
 
-
 
-
<a href="https://igem.org/Main_Page">
 
-
 
-
<img
 
-
 
-
src="https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png"
 
-
 
-
width="55px"></a>
 
-
 
-
 
-
 
-
</td>
 
-
 
-
 
-
<section class="slider">
 
-
 
-
  <nav class="slide-nav">
 
-
    <ul>
 
-
      <li><a href="#">01</a></li>
 
-
      <li><a href="#">02</a></li>
 
-
      <li><a href="#">03</a></li>
 
-
      <li><a href="#">04</a></li>
 
-
      <li><a href="#">05</a></li>
 
-
      <li><a href="#">06</a></li>
 
-
    </ul>
 
-
  </nav>
 
-
 
 
-
  <ul class="slides">
 
-
    <li><img src="http://kylefoster.me/cp/Up01.jpg" alt="Slide One"></li>   
 
-
    <li><img src="http://kylefoster.me/cp/Up02.jpg" alt="Slide Two"></li>
 
-
    <li><img src="http://kylefoster.me/cp/Up03.jpg" alt="Slide Three"></li>
 
-
    <li><img src="http://kylefoster.me/cp/Up04.jpg" alt="Slide Four"></li>
 
-
    <li><img src="http://kylefoster.me/cp/Up05.jpg" alt="Slide Five"></li>
 
-
    <li><img src="http://kylefoster.me/cp/Up06.jpg" alt="Slide Five"></li>
 
-
  </ul>
 
-
 
 
-
</section>
 

Latest revision as of 17:28, 22 August 2014

' Wheeltz - CSS3 Navigational Wheel Menu

  • Home
  • University
  • Facebook
  • Twitter


Retrieved from "http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia"