|
|
| (47 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 87: |
Line 63: |
| | width:100px; | | width:100px; |
| | height:100px; | | height:100px; |
| | + | } |
| | + | |
| | + | .month { |
| | + | font-size:3em; |
| | + | 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="#board1">Timeline</a></li>
| + | |
| - | <li><a id="navleftsub2" class="navleftsub" href="#board2">Attributions</a></li>
| + | |
| - | <li><a id="navleftsub3" class="navleftsub" href="#board3">Protocols</a></li>
| + | |
| - | <li><a id="navleftsub4" class="navleftsub" href="#board4">References</a></li>
| + | |
| - | <li><a id="navleftsub5" class="navleftsub" href="#board5">Acknowledgements</a></li>
| + | |
| - | </ul></div>
| + | |
| - | <script type="text/javascript">
| + | |
| - | $(function(){
| + | |
| - | var board1_top = $("#board1").offset().top;
| + | |
| - | var board2_top = $("#board2").offset().top;
| + | |
| - | var board3_top = $("#board3").offset().top;
| + | |
| - | var board4_top = $("#board4").offset().top;
| + | |
| - | var board5_top = $("#board5").offset().top;
| + | |
| - | //alert(tops);
| + | |
| - | $(window).scroll(function(){
| + | |
| - | var scroH = $(this).scrollTop();
| + | |
| - | var screenH = window.innerHeight * 0.5;
| + | |
| - | if(scroH>=board5_top- screenH){
| + | |
| - | set_cur("#navleftsub5");
| + | |
| - | }else if(scroH>=board4_top- screenH){
| + | |
| - | set_cur("#navleftsub4");
| + | |
| - | }else if(scroH>=board3_top- screenH){
| + | |
| - | set_cur("#navleftsub3");
| + | |
| - | }else if(scroH>=board2_top- screenH){
| + | |
| - | set_cur("#navleftsub2");
| + | |
| - | }else if(scroH>=board1_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> |
"
