Team:Tuebingen/Template/NavigationAccLava

From 2013.igem.org

(Difference between revisions)
Line 2: Line 2:
<head>  
<head>  
 +
-
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script>  
-
<script src="http://igemtuebingen.coffeecup.com/iGEM_2013/jquery-menu.js"></script>
+
<script type="text/javascript" src="http://igemtuebingen.coffeecup.com/iGEM_2013/jquery-menu.js" style="display:none"> </script>
 +
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
-
<style type="text/css">
+
<!-- LavaLamp -->
 +
<script type='text/javascript'  style="display:none">
 +
(function(jQuery){jQuery.fn.lavaLamp=function(o){o=jQuery.extend({target:'li',fx:'swing',speed:500,click:function(){return true},startItem:'',autoReturn:true,returnDelay:0,setOnClick:true,homeTop:0,homeLeft:0,homeWidth:0,homeHeight:0,returnHome:false},o||{});return this.each(function(){if(jQuery(this).css('position')=='static')
 +
jQuery(this).css('position','relative');if(o.homeTop||o.homeLeft){var $home=jQuery('<'+o.target+' class="homeLava"></'+o.target+'>').css({left:o.homeLeft,top:o.homeTop,width:o.homeWidth,height:o.homeHeight,position:'absolute'});jQuery(this).prepend($home);}
 +
var path=location.pathname+location.search+location.hash,$selected,$back,$lt=jQuery(o.target+'[class!=noLava]',this),delayTimer,bx=by=0;$selected=jQuery(o.target+'.selectedLava',this);if(o.startItem!='')
 +
$selected=$lt.eq(o.startItem);if((o.homeTop||o.homeLeft)&&$selected.length<1)
 +
$selected=$home;if($selected.length<1){var pathmatch_len=0,$pathel;$lt.each(function(){var thishref=$('a:first',this).attr('href');if(path.indexOf(thishref)>-1&&thishref.length>pathmatch_len)
 +
{$pathel=$(this);pathmatch_len=thishref.length;}});if(pathmatch_len>0){$selected=$pathel;}}
 +
if($selected.length<1)
 +
$selected=$lt.eq(0);$selected=jQuery($selected.eq(0).addClass('selectedLava'));$lt.bind('mouseenter',function(){if(delayTimer){clearTimeout(delayTimer);delayTimer=null;}
 +
move(jQuery(this));}).click(function(e){if(o.setOnClick){$selected.removeClass('selectedLava');$selected=jQuery(this).addClass('selectedLava');}
 +
return o.click.apply(this,[e,this]);});$back=jQuery('<li class="backLava"><div class="leftLava"></div><div class="bottomLava"></div><div class="cornerLava"></div></li>').css('position','absolute').prependTo(this);bx=parseInt($back.css('borderLeftWidth').match(/\d+/))+parseInt($back.css('borderRightWidth').match(/\d+/))+parseInt($back.css('paddingLeft').match(/\d+/))+parseInt($back.css('paddingRight').match(/\d+/));by=parseInt($back.css('borderTopWidth').match(/\d+/))+parseInt($back.css('borderBottomWidth').match(/\d+/))+parseInt($back.css('paddingTop').match(/\d+/))+parseInt($back.css('paddingBottom').match(/\d+/));if(o.homeTop||o.homeLeft)
 +
$back.css({left:o.homeLeft,top:o.homeTop,width:o.homeWidth,height:o.homeHeight});else
 +
{$back.css({left:$selected.position().left,top:$selected.position().top,width:$selected.outerWidth()-bx,height:$selected.outerHeight()-by});}
 +
jQuery(this).bind('mouseleave',function(){var $returnEl=null;if(o.returnHome)
 +
$returnEl=$home;else if(!o.autoReturn)
 +
return true;if(o.returnDelay){if(delayTimer)clearTimeout(delayTimer);delayTimer=setTimeout(function(){move($returnEl);},o.returnDelay);}
 +
else{move($returnEl);}
 +
return true;});function move($el){if(!$el)$el=$selected;$back.stop()
 +
.animate({left:$el.position().left,top:$el.position().top,width:$el.outerWidth()-bx,height:$el.outerHeight()-by},o.speed,o.fx);};});};})(jQuery);
 +
</script>
 +
<!-- /LavaLamp -->
 +
 
 +
<script type="text/javascript">
 +
$(function() {
 +
$('ul.AccLavaNavigation').lavaLamp({ speed: 300, autoReturn: true , target:'li'});
 +
});
 +
$(function(){
 +
        $('ul#accordionMenu').accordion({
 +
              header:'.head',
 +
              fillSpace:false,
 +
              autoHeight:false,
 +
              navigation:true,
 +
              animated: 'easeslide'})
 +
});
 +
</script>
 +
 
 +
<style type="text/css" style="display:none">
#bodyContent{
#bodyContent{
position:relative;
position:relative;
Line 39: Line 78:
height:23px;
height:23px;
}
}
-
#left ul.AccLavaNavigationgreen li{
+
<!-- #left ul.AccLavaNavigationgreen li{
border-color:#96d446;
border-color:#96d446;
}
}
Line 50: Line 89:
#left ul.AccLavaNavigationyellow li{
#left ul.AccLavaNavigationyellow li{
border-color:#fad72a;
border-color:#fad72a;
-
}
+
} -->
#left a{
#left a{
color: blue;
color: blue;
Line 69: Line 108:
</head>
</head>
   
   
-
<body>
+
<body>  
 +
<div id="wrap">
<div id="left">  
<div id="left">  
<ul id="accordionMenu">
<ul id="accordionMenu">
Line 117: Line 157:
<ul class="AccLavaNavigation">
<ul class="AccLavaNavigation">
<li><a href="/Team:Cambridge/Gibson/Introduction">Introduction</a></li>
<li><a href="/Team:Cambridge/Gibson/Introduction">Introduction</a></li>
-
<li><a href="/Team:Cambridge/Gibson/Mechanism">How it works</a></li>
+
<li><a href="/Team:Cambridge/Gibson/Mechanism">How it works</a></li>
-
<li><a href="/Team:Cambridge/Gibson/Protocol">Protocol</a></li>
+
<li><a href="/Team:Cambridge/Gibson/Protocol">Protocol</a></li>
-
<li><a href="/Team:Cambridge/Gibson/RFC">RFC</a></li>
+
<li><a href="/Team:Cambridge/Gibson/RFC">RFC</a></li>
-
</ul>
+
</ul>
-
</li>
+
</li>
-
<li><a class="head" href="#">Considerations</a>
+
<li><a class="head" href="#">Considerations</a>
-
<ul class="AccLavaNavigation">
+
<ul class="AccLavaNavigation">
-
<li><a href="/Team:Cambridge/Human_Practices">Human Practices</a></li>
+
<li><a href="/Team:Cambridge/Human_Practices">Human Practices</a></li>
-
<li><a href="/Team:Cambridge/Safety">Safety</a></li>
+
<li><a href="/Team:Cambridge/Safety">Safety</a></li>
-
</ul>
+
</ul>
-
</li>
+
</li>
-
<li><a class="head" href="#">Future applications</a>
+
<li><a class="head" href="#">Future applications</a>
-
<ul class="AccLavaNavigation">
+
<ul class="AccLavaNavigation">
-
<li><a href="/Team:Cambridge/Tools/microMeasure">Biosensors</a></li>
+
<li><a href="/Team:Cambridge/Tools/microMeasure">Biosensors</a></li>
-
<li><a href="/Team:Cambridge/Tools/Lighting">Lighting</a></li>
+
<li><a href="/Team:Cambridge/Tools/Lighting">Lighting</a></li>
-
</ul>
+
</ul>
-
</li>
+
</li>
-
<li><a class="head" href="/Team:Cambridge/Notebook/Week1">Notebook</a>
+
<li><a class="head" href="/Team:Cambridge/Notebook/Week1">Notebook</a>
-
<ul class="AccLavaNavigation">
+
<ul class="AccLavaNavigation">
-
<li><a href="/Team:Cambridge/Notebook/Summary">Summary</a></li>
+
<li><a href="/Team:Cambridge/Notebook/Summary">Summary</a></li>
-
<li><a href="/Team:Cambridge/Notebook/Week1">Week 1</a></li>
+
<li><a href="/Team:Cambridge/Notebook/Week1">Week 1</a></li>
-
<li><a href="/Team:Cambridge/Notebook/Week2">Week 2</a></li>
+
<li><a href="/Team:Cambridge/Notebook/Week2">Week 2</a></li>
-
<li><a href="/Team:Cambridge/Notebook/Week3">Week 3</a></li>
+
<li><a href="/Team:Cambridge/Notebook/Week3">Week 3</a></li>
-
<li><a href="/Team:Cambridge/Notebook/Week4">Week 4</a></li>
+
<li><a href="/Team:Cambridge/Notebook/FurtherWork">Beyond Week 12</a></li>
-
<li><a href="/Team:Cambridge/Notebook/Week5">Week 5</a></li>
+
<li><a href="/Team:Cambridge/Protocols">Protocols</a> </li>
-
<li><a href="/Team:Cambridge/Notebook/Week6">Week 6</a></li>
+
</ul>
-
<li><a href="/Team:Cambridge/Notebook/Week7">Week 7</a></li>
+
</li>
-
<li><a href="/Team:Cambridge/Notebook/Week8">Week 8</a></li>
+
-
<li><a href="/Team:Cambridge/Notebook/Week9">Week 9</a></li>
+
-
<li><a href="/Team:Cambridge/Notebook/Week10">Week 10</a></li>
+
-
<li><a href="/Team:Cambridge/Notebook/Week11">Week 11</a></li>
+
-
<li><a href="/Team:Cambridge/Notebook/Week12">Week 12</a></li>
+
-
<li><a href="/Team:Cambridge/Notebook/FurtherWork">Beyond Week 12</a></li>
+
-
<li><a href="/Team:Cambridge/Protocols">Protocols</a> </li>
+
-
</ul>
+
-
</li>
+
-
 
+
-
<li><a href="/Team:Cambridge/Partners" class="head">Our Partners</a>
+
-
<ul class="AccLavaNavigation">
+
-
<li><a href="/Team:Cambridge/Partners">Sponsors</a> </li>
+
-
<li><a href="/Team:Cambridge/iGEM_Teams">iGEM Teams</a> </li>
+
-
<li><a href="/Team:Cambridge/Departments">University</a> </li>
+
-
<li><a href="/Team:Cambridge/Publicity">Publicity</a> </li>
+
-
</ul>
+
-
</li>
+
-
 
+
-
</ul>
+
-
</div>  
+
<li><a href="/Team:Cambridge/Partners" class="head">Our Partners</a>
-
 
+
<ul class="AccLavaNavigation">
-
<!-- LavaLamp -->
+
<li><a href="/Team:Cambridge/Partners">Sponsors</a> </li>
-
<script type='text/javascript'  style="display:none">
+
<li><a href="/Team:Cambridge/iGEM_Teams">iGEM Teams</a> </li>
-
$(function(jQuery){jQuery.fn.lavaLamp=function(o){o=jQuery.extend({target:'li',fx:'swing',speed:500,click:function(){return true},startItem:'',autoReturn:true,returnDelay:0,setOnClick:true,homeTop:0,homeLeft:0,homeWidth:0,homeHeight:0,returnHome:false},o||{});return this.each(function(){if(jQuery(this).css('position')=='static')
+
<li><a href="/Team:Cambridge/Departments">University</a> </li>
-
jQuery(this).css('position','relative');if(o.homeTop||o.homeLeft){var $home=jQuery('<'+o.target+' class="homeLava"></'+o.target+'>').css({left:o.homeLeft,top:o.homeTop,width:o.homeWidth,height:o.homeHeight,position:'absolute'});jQuery(this).prepend($home);}
+
<li><a href="/Team:Cambridge/Publicity">Publicity</a> </li>
-
var path=location.pathname+location.search+location.hash,$selected,$back,$lt=jQuery(o.target+'[class!=noLava]',this),delayTimer,bx=by=0;$selected=jQuery(o.target+'.selectedLava',this);if(o.startItem!='')
+
</ul>
-
$selected=$lt.eq(o.startItem);if((o.homeTop||o.homeLeft)&&$selected.length<1)
+
</li>
-
$selected=$home;if($selected.length<1){var pathmatch_len=0,$pathel;$lt.each(function(){var thishref=$('a:first',this).attr('href');if(path.indexOf(thishref)>-1&&thishref.length>pathmatch_len)
+
</ul>
-
{$pathel=$(this);pathmatch_len=thishref.length;}});if(pathmatch_len>0){$selected=$pathel;}}
+
</div>  
-
if($selected.length<1)
+
</div>
-
$selected=$lt.eq(0);$selected=jQuery($selected.eq(0).addClass('selectedLava'));$lt.bind('mouseenter',function(){if(delayTimer){clearTimeout(delayTimer);delayTimer=null;}
+
-
move(jQuery(this));}).click(function(e){if(o.setOnClick){$selected.removeClass('selectedLava');$selected=jQuery(this).addClass('selectedLava');}
+
-
return o.click.apply(this,[e,this]);});$back=jQuery('<li class="backLava"><div class="leftLava"></div><div class="bottomLava"></div><div class="cornerLava"></div></li>').css('position','absolute').prependTo(this);bx=parseInt($back.css('borderLeftWidth').match(/\d+/))+parseInt($back.css('borderRightWidth').match(/\d+/))+parseInt($back.css('paddingLeft').match(/\d+/))+parseInt($back.css('paddingRight').match(/\d+/));by=parseInt($back.css('borderTopWidth').match(/\d+/))+parseInt($back.css('borderBottomWidth').match(/\d+/))+parseInt($back.css('paddingTop').match(/\d+/))+parseInt($back.css('paddingBottom').match(/\d+/));if(o.homeTop||o.homeLeft)
+
-
$back.css({left:o.homeLeft,top:o.homeTop,width:o.homeWidth,height:o.homeHeight});else
+
-
{$back.css({left:$selected.position().left,top:$selected.position().top,width:$selected.outerWidth()-bx,height:$selected.outerHeight()-by});}
+
-
jQuery(this).bind('mouseleave',function(){var $returnEl=null;if(o.returnHome)
+
-
$returnEl=$home;else if(!o.autoReturn)
+
-
return true;if(o.returnDelay){if(delayTimer)clearTimeout(delayTimer);delayTimer=setTimeout(function(){move($returnEl);},o.returnDelay);}
+
-
else{move($returnEl);}
+
-
return true;});function move($el){if(!$el)$el=$selected;$back.stop()
+
-
.animate({left:$el.position().left,top:$el.position().top,width:$el.outerWidth()-bx,height:$el.outerHeight()-by},o.speed,o.fx);};});};})(jQuery);
+
-
</script>
+
-
<!-- /LavaLamp -->
+
-
 
+
-
<script type="text/javascript">  
+
-
$(function() {
+
-
$('ul.AccLavaNavigation').lavaLamp({ speed: 300, autoReturn: true , target:'li'});
+
-
});
+
-
$(function(){
+
-
        $('ul#accordionMenu').accordion({
+
-
              header:'.head',
+
-
              fillSpace:false,
+
-
              autoHeight:false,
+
-
              navigation:true,
+
-
              animated: 'easeslide'})
+
-
});
+
-
</script>
+
-
 
+
-
 
+
-
</body>
+
</html>
</html>

Revision as of 16:18, 25 August 2013