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