Team:Cambridge/Templates/HybridBook

From 2010.igem.org

(Difference between revisions)
Line 2: Line 2:
<html>
<html>
<script>
<script>
 +
 +
var labchosen=0;
 +
 +
function backToNormal(){
 +
if(labchosen==0){
 +
    var $marginLefty = $("#lablink");
 +
    $marginLefty.stop().animate({
 +
    width:246,
 +
      left:497
 +
    });
 +
var $marginLefty = $("#projectlink");
 +
    $marginLefty.stop().animate({
 +
    width:492
 +
     
 +
    });
 +
}
 +
else{
 +
  var $marginLefty = $("#lablink");
 +
    $marginLefty.stop().animate({
 +
    width:492,
 +
      left:251
 +
    });
 +
var $marginLefty = $("#projectlink");
 +
    $marginLefty.stop().animate({
 +
    width:246
 +
     
 +
    });
 +
}
 +
}
 +
function mouseOverCall(){
 +
var $marginLefty = $("#lablink");
 +
    $marginLefty.stop().animate({
 +
    width:369,
 +
      left:373
 +
    });
 +
var $marginLefty = $("#projectlink");
 +
    $marginLefty.stop().animate({
 +
    width:369
 +
     
 +
    });
 +
}
$(document).ready(function() {
$(document).ready(function() {
   $('#lablink').click(function() {
   $('#lablink').click(function() {
-
    
+
labchosen=1;
 +
   backToNormal();
     var $marginLefty = $("#superwide");
     var $marginLefty = $("#superwide");
     $marginLefty.animate({
     $marginLefty.animate({
Line 12: Line 54:
   });
   });
$('#projectlink').click(function() {
$('#projectlink').click(function() {
 +
labchosen=0;
 +
backToNormal();
    
    
     var $marginLefty = $("#superwide");
     var $marginLefty = $("#superwide");
Line 22: Line 66:
$('#lablink').mouseover(function() {
$('#lablink').mouseover(function() {
-
    
+
   if (labchosen==0){
-
    var $marginLefty = $("#lablink");
+
     mouseOverCall();
-
     $marginLefty.stop().animate({
+
}
-
    width:400,
+
});
-
      left:341
+
$('#projectlink').mouseover(function() {
-
    });
+
  if (labchosen==1){
-
var $marginLefty = $("#projectlink");
+
     mouseOverCall();
-
    $marginLefty.stop().animate({
+
}
-
    width:336
+
-
     
+
-
     });
+
});
});
-
$('#lablink').mouseout(function() {
 
-
 
 
-
    var $marginLefty = $("#lablink");
 
-
    $marginLefty.stop().animate({
 
-
    width:368,
 
-
      left:373
 
-
    });
 
-
var $marginLefty = $("#projectlink");
 
-
    $marginLefty.stop().animate({
 
-
    width:368
 
-
     
 
-
    });
 
 +
$('#lablink, #projectlink').mouseout(function() {
 +
backToNormal();
   });
   });
 +
 +
 +
 +
});
});
</script>
</script>
 +
<script type="text/javascript">
 +
$(function() {
 +
$(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});
 +
});
 +
</script>
 +
<ul class="lavaLamp">
 +
            <li><a href="#">Home</a></li>
 +
            <li><a href="#">Plant a tree</a></li>
 +
            <li><a href="#">Travel</a></li>
 +
            <li><a href="#">Ride an elephant</a></li>
 +
        </ul>
<div style="width:730px; background-color:#fad72a;" class="secheader">Notebook: Week 1</div>
<div style="width:730px; background-color:#fad72a;" class="secheader">Notebook: Week 1</div>
<div style="position:relative; height:30px;border-top:5px solid white;">
<div style="position:relative; height:30px;border-top:5px solid white;">
-
<div style="width:368px;position:absolute; background-color:#fad72a; height:30px;"  id="projectlink">Project diary</div>
+
<div style="width:492px;position:absolute; background-color:#fad72a; height:30px;"  id="projectlink">Project diary</div>
-
<div style="width:368px; position:absolute; background-color:#fad72a;left:373px; height:30px;"  id="lablink">Lab book</div>
+
<div style="width:246px; position:absolute; background-color:#fad72a;left:497px; height:30px;"  id="lablink">Lab book</div>
</div>
</div>

Revision as of 21:57, 18 August 2010