Team:St Andrews/template
From 2011.igem.org
(Difference between revisions)
Line 5: | Line 5: | ||
<!-- Start of internal Stylesheet (I think it's better if we build our own..) --> | <!-- Start of internal Stylesheet (I think it's better if we build our own..) --> | ||
<style type="text/css"> | <style type="text/css"> | ||
+ | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> | ||
+ | |||
body { background-color: #fff; | body { background-color: #fff; | ||
Line 60: | Line 62: | ||
.firstHeading { | .firstHeading { | ||
display: none;} | display: none;} | ||
+ | |||
+ | .container0 {position: relative; background-color:#000000; width:900px; height:250px; margin: 0px auto -1px auto; } | ||
+ | |||
+ | .container1 {position: relative; top:0px; left:0px} | ||
+ | |||
+ | .top-slider-main{width:900px; height:60px; overflow:hidden; position:absolute; border:0px ;solid #000; z-index:10; bottom:0px;} | ||
+ | |||
+ | .top-slider-main div{width:380px; height:100px; position:absolute; } | ||
+ | |||
+ | .top-slider-main .slider-box1{z-index:94;} | ||
+ | |||
+ | .top-slider-main .slider-box2{margin-left:380px; z-index:95;} | ||
+ | |||
+ | .top-slider-main .slider-box3{margin-left:510px; z-index:96;} | ||
+ | |||
+ | .top-slider-main .slider-box4{margin-left:640px; z-index:97;} | ||
+ | |||
+ | .top-slider-main .slider-box5{margin-left:770px; z-index:98;} | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | .top-slider-main div .left{position:relative; width:100px; height:100%; float:left; cursor:pointer; color:#FFF;} | ||
+ | |||
+ | .top-slider-main div .content{position:relative; width:250px; background-color:#b0c4de; color:#000; float:left; font-family: Arial, Helvetica, sans-serif; font-size:1em;} | ||
+ | |||
+ | .top-slider-main .slider-box1 .left{background-color:#b0c4de;} | ||
+ | |||
+ | .top-slider-main .slider-box2 .left{background-color:#b0c4de;} | ||
+ | |||
+ | .top-slider-main .slider-box3 .left{background-color:#b0c4de;} | ||
+ | |||
+ | .top-slider-main .slider-box4 .left{background-color:#b0c4de;} | ||
+ | |||
+ | .top-slider-main .slider-box5 .left{background-color:#b0c4de;} | ||
+ | |||
+ | |||
+ | |||
#topbit { | #topbit { | ||
Line 72: | Line 113: | ||
</style> | </style> | ||
+ | <script> | ||
+ | |||
+ | var $slider_started = false; | ||
+ | |||
+ | $(document).ready(function(){ | ||
+ | |||
+ | var $total_slider = $('.top-slider-main > div').length; | ||
+ | |||
+ | var $label_width = $('.top-slider-main div .left').width(); | ||
+ | |||
+ | var $max_slider_width = ($total_slider -1)*$label_width; | ||
+ | |||
+ | var $extra_margin = $(' .top-slider-main div').width() - $label_width; | ||
+ | |||
+ | |||
+ | |||
+ | $('.top-slider-main div:not(.slider-box1) .left').mouseover(function(){ | ||
+ | |||
+ | var $slider_index = $('.top-slider-main > div').index($(this).parent()) + 1; | ||
+ | |||
+ | if($(this).parent().hasClass('on')) | ||
+ | |||
+ | { | ||
+ | |||
+ | if($slider_started != 1) | ||
+ | |||
+ | { | ||
+ | |||
+ | $slider_started = 2; | ||
+ | |||
+ | for(i=$total_slider; i>=$slider_index; i--) | ||
+ | |||
+ | { | ||
+ | |||
+ | var $elm = $('.top-slider-main .slider-box'+i); | ||
+ | |||
+ | if($elm.hasClass('on')) | ||
+ | |||
+ | { | ||
+ | |||
+ | $elm.removeClass('on'); | ||
+ | |||
+ | var $left_margin = ($label_width*(i-1)) + $extra_margin; | ||
+ | |||
+ | $elm.stop().animate({marginLeft : $left_margin}, 1500, function(){$slider_started = false;}); | ||
+ | |||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | else | ||
+ | |||
+ | { | ||
+ | |||
+ | if($slider_started != 2) | ||
+ | |||
+ | { | ||
+ | |||
+ | $slider_started = 1; | ||
+ | |||
+ | for(i=2; i<=$slider_index; i++) | ||
+ | |||
+ | { | ||
+ | |||
+ | var $elm = $('.top-slider-main .slider-box'+i); | ||
+ | |||
+ | if(!$elm.hasClass('on')) | ||
+ | |||
+ | { | ||
+ | |||
+ | $elm.addClass('on'); | ||
+ | |||
+ | var $left_margin = ($label_width*(i-1)); | ||
+ | |||
+ | $elm.stop().animate({marginLeft : $left_margin}, 1500, function(){$slider_started = false;}); | ||
+ | |||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | }); | ||
+ | |||
+ | }); | ||
+ | |||
+ | </script> | ||
+ | |||
+ | <div class="container0"> | ||
+ | |||
+ | <div class="container1"> | ||
+ | |||
+ | <img border="0" src="https://static.igem.org/mediawiki/2011/b/b0/Pier.jpg"/> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <div class="top-slider-main"> | ||
+ | |||
+ | |||
+ | |||
+ | <div class="slider-box1"> | ||
+ | |||
+ | <div class="left" style="background-image:url('https://static.igem.org/mediawiki/2011/8/8a/Proj.png'); | ||
+ | |||
+ | background-color:#000000; | ||
+ | |||
+ | background-repeat:no-repeat; | ||
+ | |||
+ | background-position:center; | ||
+ | |||
+ | width:130px; | ||
+ | |||
+ | height:60px;" | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <div class="content"> | ||
+ | |||
+ | <a href='https://2011.igem.org/Team:St_Andrews' class='listmain' id='home'>Home</a><br /> | ||
+ | |||
+ | <a href='https://2011.igem.org/Team:St_Andrews/description' class='listmain' id='nowhere'>Description</a><br /> | ||
+ | |||
+ | <a href='https://2011.igem.org/Team:St_Andrews' class='listmain' id='nowhere'>Nowhere</a><br /> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <div class="slider-box2"> | ||
+ | |||
+ | <div class="left" style="background-image:url('https://static.igem.org/mediawiki/2011/f/f7/Plan.png'); | ||
+ | |||
+ | background-color:#000000; | ||
+ | |||
+ | background-repeat:no-repeat; | ||
+ | |||
+ | background-position:center; | ||
+ | |||
+ | width:130px; | ||
+ | |||
+ | height:60px;"> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <div class="content"> | ||
+ | |||
+ | <a href='https://2011.igem.org/Team:St_Andrews/safety' class='listmain' id='nowhere'>Safety</a><br /> | ||
+ | |||
+ | <a href='https://2011.igem.org/Team:St_Andrews' class='listmain' id='nowhere'>Nowhere</a><br /> | ||
+ | |||
+ | <a href='https://2011.igem.org/Team:St_Andrews' class='listmain' id='nowhere'>Nowhere</a><br /> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <div class="slider-box3"> | ||
+ | |||
+ | <div class="left" style="background-image:url('https://static.igem.org/mediawiki/2011/3/31/Res.png'); | ||
+ | |||
+ | background-color:#000000; | ||
+ | |||
+ | background-repeat:no-repeat; | ||
+ | |||
+ | background-position:center; | ||
+ | |||
+ | width:130px; | ||
+ | |||
+ | height:60px;"></div> | ||
+ | |||
+ | <div class="content"> | ||
+ | |||
+ | <a href='https://2011.igem.org/Team:St_Andrews' class='listmain' id='nowhere'>Nowhere</a><br /> | ||
+ | |||
+ | <a href='https://2011.igem.org/Team:St_Andrews' class='listmain' id='nowhere'>Nowhere</a><br /> | ||
+ | |||
+ | <a href='https://2011.igem.org/Team:St_Andrews' class='listmain' id='nowhere'>Nowhere</a><br /></div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <div class="slider-box4"> | ||
+ | |||
+ | <div class="left" style="background-image:url('https://static.igem.org/mediawiki/2011/9/9e/Ex.png'); | ||
+ | |||
+ | background-color:#000000; | ||
+ | |||
+ | background-repeat:no-repeat; | ||
+ | |||
+ | background-position:center; | ||
+ | |||
+ | width:130px; | ||
+ | |||
+ | height:60px;"></div> | ||
+ | |||
+ | <div class="content"> | ||
+ | |||
+ | <a href='https://2011.igem.org/Team:St_Andrews' class='listmain' id='nowhere'>Nowhere</a><br /> | ||
+ | |||
+ | <a href='https://2011.igem.org/Team:St_Andrews' class='listmain' id='nowhere'>Nowhere</a><br /> | ||
+ | |||
+ | <a href='https://2011.igem.org/Team:St_Andrews' class='listmain' id='nowhere'>Nowhere</a><br /> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <div class="slider-box5"> | ||
+ | |||
+ | <div class="left" style="background-image:url('https://static.igem.org/mediawiki/2011/3/32/Team.png'); | ||
+ | |||
+ | background-color:#000000; | ||
+ | |||
+ | background-repeat:no-repeat; | ||
+ | |||
+ | background-position:center; | ||
+ | |||
+ | width:130px; | ||
+ | |||
+ | height:60px;"></div> | ||
+ | |||
+ | <div class="content"> | ||
+ | |||
+ | <a href='https://2011.igem.org/Team:St_Andrews' class='listmain' id='nowhere'>Nowhere</a><br /> | ||
+ | |||
+ | <a href='https://2011.igem.org/Team:St_Andrews' class='listmain' id='nowhere'>Nowhere</a><br /> | ||
+ | |||
+ | <a href='https://2011.igem.org/Team:St_Andrews' class='listmain' id='nowhere'>Nowhere</a><br /> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
</head> | </head> | ||
Revision as of 11:04, 14 July 2011