Template:Team:DukeNB/CSS

From 2014.igem.org

(Difference between revisions)
 
(45 intermediate revisions not shown)
Line 6: Line 6:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style media="screen" type="text/css">
<style media="screen" type="text/css">
-
#cal {
 
-
position: relative;
 
-
float:center;
 
-
}
 
-
 
+
.navleft {
-
 
+
position:fixed;
-
#sticky_cal_wrap {  
+
color: #ffffff;
-
  width: 20%;
+
margin-left:2.5%;
-
  height: 260px;
+
margin-top:10%;
-
  position:fixed;  
+
text-align:center;
-
  float:left;
+
font-size:3em;
-
  z-index: 0;
+
-
  overflow:hidden;
+
-
  margin: 10% 5%;
+
-
  padding: 0px;
+
-
  text-align:center:
+
}
}
-
#sticky_mj_wrap {  
+
.navleft table td {
-
  width: 20%;
+
padding:20px;
-
  height: 520px;
+
font-color:#ffffff;
-
  position:fixed;
+
-
  float:left;
+
-
  z-index: 0;
+
-
  overflow:hidden;
+
-
  padding: 0px;
+
-
  text-align:center:
+
-
  margin-left: 10%;
+
-
  margin-right: 5%;
+
}
}
-
.calendar {}
+
#lapr td:hover {
-
 
+
font-color: #0000ff;
-
#cal table {
+
-
text-align: center;
+
-
margin: 10px;
+
}
}
-
#cal td {
+
a {
-
padding:5px;
+
font-color:#000000;
-
}
+
-
 
+
-
#cal a {
+
-
text-align:center;
+
-
background-color:#0736A4;
+
}
}
Line 58: Line 33:
width:70%;
width:70%;
color:#fff;
color:#fff;
 +
margin-top:-5%;
}
}
Line 89: Line 65:
}
}
-
.navleft {
+
.month {
-
position:fixed;
+
font-size:3em;
-
color: #ffffff;
+
float: center;
 +
padding:2.5%;
 +
text-align: center;
}
}
 +
</style>
</style>
-
 
</head>
</head>
<body>
<body>
-
<div class="navleftholder">
+
 
-
<ul class="navleft">
+
 
-
  <li><a id="navleftsub1" class="navleftsub" href="#apr">April</a></li>
+
-
  <li><a id="navleftsub2" class="navleftsub" href="#mayjun">May/June</a></li>
+
-
  <li><a id="navleftsub3" class="navleftsub" href="#jul">July</a></li>
+
-
  <li><a id="navleftsub4" class="navleftsub" href="#aug">August</a></li>
+
-
  <li><a id="navleftsub5" class="navleftsub" href="#sept">September</a></li>
+
-
</ul></div>
+
-
<script type="text/javascript">
+
-
$(function(){
+
-
var apr_top = $("#apr").offset().top;
+
-
var mayjun_top = $("#mayjun").offset().top;
+
-
var jul_top = $("#jul").offset().top;
+
-
var aug_top = $("#aug").offset().top;
+
-
var sept_top = $("#sept").offset().top;
+
-
//alert(tops);
+
-
$(window).scroll(function(){
+
-
var scroH = $(this).scrollTop();
+
-
var screenH = window.innerHeight * 0.5;
+
-
if(scroH>=sept_top- screenH){
+
-
set_cur("#navleftsub5");
+
-
}else if(scroH>=aug_top- screenH){
+
-
set_cur("#navleftsub4");
+
-
}else if(scroH>=jul_top- screenH){
+
-
set_cur("#navleftsub3");
+
-
}else if(scroH>=mayjun_top- screenH){
+
-
set_cur("#navleftsub2");
+
-
}else if(scroH>=apr_top- screenH){
+
-
set_cur("#navleftsub1");
+
-
}
+
-
});
+
-
+
-
$(".navleft li a").click(function() {
+
-
var el = $(this).attr('class');
+
-
    $('html, body').animate({
+
-
        scrollTop: $("#"+el).offset().top
+
-
    }, 300);
+
-
$(this).addClass("cur").parent().siblings().find("a").removeClass("cur");
+
-
});
+
-
+
-
});
+
-
function set_cur(n){
+
-
if($(".navleft a").hasClass("cur")){
+
-
$(".navleft a").removeClass("cur");
+
-
}
+
-
$(".navleft a"+n).addClass("cur");
+
-
}
+
-
</script>
+
-
<script type="text/javascript">
+
-
$(function(){
+
-
$('#myGallery1').galleryView({
+
-
          panel_width: 480,
+
-
            panel_height: 256,
+
-
      autoplay: true,
+
-
      show_infobar: true,
+
-
      infobar_opacity: 0.8,
+
-
      pause_on_hover: true,
+
-
      enable_overlays: true,
+
-
      panel_scale: 'crop',
+
-
show_captions: true,
+
-
easing: 'swing',
+
-
pan_images: true,
+
-
      });
+
-
$('#myGallery2').galleryView({
+
-
          panel_width: 480,
+
-
            panel_height: 256,
+
-
      autoplay: true,
+
-
      show_infobar: true,
+
-
      infobar_opacity: 0.8,
+
-
      pause_on_hover: true,
+
-
      enable_overlays: true,
+
-
      panel_scale: 'crop',
+
-
show_captions: true,
+
-
easing: 'swing',
+
-
pan_images: true,
+
-
      });
+
-
$('#myGallery3').galleryView({
+
-
          panel_width: 480,
+
-
            panel_height: 256,
+
-
      autoplay: true,
+
-
      show_infobar: true,
+
-
      infobar_opacity: 0.8,
+
-
      pause_on_hover: true,
+
-
      enable_overlays: true,
+
-
      panel_scale: 'crop',
+
-
show_captions: true,
+
-
easing: 'swing',
+
-
pan_images: true,
+
-
      });
+
-
$('#myGallery4').galleryView({
+
-
          panel_width: 480,
+
-
            panel_height: 256,
+
-
      autoplay: true,
+
-
      show_infobar: true,
+
-
      infobar_opacity: 0.8,
+
-
      pause_on_hover: true,
+
-
      enable_overlays: true,
+
-
      panel_scale: 'crop',
+
-
show_captions: true,
+
-
easing: 'swing',
+
-
pan_images: true,
+
-
      });
+
-
$('#myGallery5').galleryView({
+
-
            panel_width: 480,
+
-
            panel_height: 256,
+
-
      autoplay: true,
+
-
      show_infobar: true,
+
-
      infobar_opacity: 0.8,
+
-
      pause_on_hover: true,
+
-
      enable_overlays: true,
+
-
      panel_scale: 'crop',
+
-
show_captions: true,
+
-
easing: 'swing',
+
-
pan_images: true,
+
-
      });
+
-
});
+
-
</script>
+
</body>
</body>
</html>
</html>

Latest revision as of 02:15, 18 October 2014