Template:Team:UC Davis/Head

From 2011.igem.org

(Difference between revisions)
Line 7: Line 7:
<script>
<script>
-
/*
 
-
This code heavily adapted and modified by Keegan Owsley. and barely by Tim Fenton Fo sho
 
-
*/
 
-
 
-
/* jQuery Gooey Menu
 
-
* Created: April 7th, 2011 by DynamicDrive.com. This notice must stay intact for usage
 
-
* Author: Dynamic Drive at http://www.dynamicdrive.com/
 
-
* Visit http://www.dynamicdrive.com/ for full source code
 
-
*/
 
-
 
jQuery.noConflict()
jQuery.noConflict()
-
 
+
jQuery.extend(jQuery.easing,{easeOutBack:function(x,t,b,c,d,s){
-
jQuery.extend(jQuery.easing, {easeOutBack:function(x, t, b, c, d, s){ //see http://gsgd.co.uk/sandbox/jquery/easing/
+
if(s==undefined)s=1.70158;
-
if (s == undefined) s = 1.70158;
+
return c*((t=t/d-1)*t*((s+1)*t+s)+1)+b;
-
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
+
}
-
}
+
})
})
-
 
+
var barheight=0;
-
var barheight = 0;
+
var currenttarget=null;
-
var currenttarget = null;
+
var thispagenumber=0;
-
var thispagenumber = 0;
+
var $menulinks=null;
-
var $menulinks = null;
+
var colorsarray=["#fff","#FF7722","#bb66ff","#12aeef","#EE3333","#AADD00"];
-
 
+
var contentarray=[
-
var colorsarray = [ "#fff", "#FF7722", "#bb66ff", "#12aeef", "#EE3333", "#AADD00" ];
+
"<a href=https://2011.igem.org/Team:UC_Davis/Home_wip>go back <br>home</a>",
-
//var colorsarray = [ "#fff", "#FF7722", "#9400D3", "#12aeef", "#CD0000", "#AADD00" ];
+
"<a href=#>subhead2</a><br><a href=#>subhead2</a><br><a href=#>subhead2</a>",
-
//var colorsarray = [ "#fff", "#fff", "#fff", "#fff", "#fff", "#fff" ];
+
"<a href=#>subhead3</a><br><a href=#>subhead3</a><br><a href=#>subhead2</a>",
-
var contentarray = [
+
"<a href=#>week 1</a>&nbsp;&nbsp;&nbsp;<a href=#>week 2</a><br><a href=#>week 3</a>&nbsp;&nbsp;&nbsp;<a href=#>week 4</a><br><a href=#>week 5</a>&nbsp;&nbsp;&nbsp;<a href=#>week 6</a><br><a href=#>week 7</a>&nbsp;&nbsp;&nbsp;<a href=#>week 8</a><br><a href=#>week 9</a>&nbsp;&nbsp;&nbsp;<a href=#>week 10</a>",
-
 
+
"<a href=#>subhead4</a><br><a href=#>subhead4</a><br><a href=#>subhead4</a>",
-
  "<a href=https://2011.igem.org/Team:UC_Davis/Home_wip>go back <br>home</a>",  
+
"<a href=https://igem.org/Main_Page>iGEM main page</a><br><a href=http://partsregistry.org/Main_Page>parts registry</a><br><a href=https://igem.org/About>about iGEM</a>",
-
  "<a href=#>subhead2</a><br><a href=#>subhead2</a><br><a href=#>subhead2</a>",  
+
-
  "<a href=#>subhead3</a><br><a href=#>subhead3</a><br><a href=#>subhead2</a>",
+
-
  "<a href=#>week 1</a>&nbsp;&nbsp;&nbsp;<a href=#>week 2</a><br><a href=#>week 3</a>&nbsp;&nbsp;&nbsp;<a href=#>week 4</a><br><a href=#>week 5</a>&nbsp;&nbsp;&nbsp;<a href=#>week 6</a><br><a href=#>week 7</a>&nbsp;&nbsp;&nbsp;<a href=#>week 8</a><br><a href=#>week 9</a>&nbsp;&nbsp;&nbsp;<a href=#>week 10</a>",  
+
-
  "<a href=#>subhead4</a><br><a href=#>subhead4</a><br><a href=#>subhead4</a>",
+
-
  "<a href=https://igem.org/Main_Page>iGEM main page</a><br><a href=http://partsregistry.org/Main_Page>parts registry</a><br><a href=https://igem.org/About>about iGEM</a>",
+
-
+
];
];
-
 
var gooeymenu={
var gooeymenu={
-
effectmarkup: '<li class="active"></li>',
+
effectmarkup:'<li class="active"></li>',
-
 
+
setup:function(usersetting){
-
setup:function(usersetting){
+
jQuery(function($){
-
jQuery(function($){ //on document.ready
+
function snapback(dur){
-
function snapback(dur){
+
}
-
// if ($selectedlink.length>0)
+
var setting=jQuery.extend({fx:'easeOutBack',fxtime:500,snapdelay:300},usersetting)
-
// $effectref.dequeue().animate({left:$selectedlink.position().left, width:$selectedlink.outerWidth()}, dur, setting.fx)
+
var $menu=$('#'+setting.id).find('li:eq(0)').parents('ul:eq(0)')
-
}
+
$menulinks=$menu.find('li a')
-
var setting=jQuery.extend({fx:'easeOutBack', fxtime:500, snapdelay:300}, usersetting)
+
$menulinks.eq(thispagenumber).css('color',colorsarray[thispagenumber]);
-
var $menu=$('#'+setting.id).find('li:eq(0)').parents('ul:eq(0)') //select main menu UL
+
var $contentbox=$('#contentbox').css({top:$menulinks.eq(0).position().bottom,zIndex:1});
-
$menulinks=$menu.find('li a')
+
var $effectref=$(gooeymenu.effectmarkup).css({top:$menulinks.eq(0).position().top,width:$menulinks.eq(thispagenumber).parent().outerWidth(),height:$menulinks.eq(0).outerHeight(),zIndex:0,opacity:0.5}).appendTo($menu)
-
                        $menulinks.eq(thispagenumber).css('color', colorsarray[thispagenumber]);
+
barheight=$menulinks.eq(0).outerHeight();
-
                        var $contentbox=$('#contentbox').css({top:$menulinks.eq(0).position().bottom, zIndex:1});
+
$effectref.css({left:$menulinks.eq(thispagenumber).position().left})
-
var $effectref=$(gooeymenu.effectmarkup).css({top:$menulinks.eq(0).position().top, width:$menulinks.eq(thispagenumber).parent().outerWidth(), height:$menulinks.eq(0).outerHeight(), zIndex:0, opacity:0.5}).appendTo($menu) //add trailing effect LI to the menu UL
+
if(typeof setting.selectitem!="undefined"){
-
 
+
var $selectedlink=$menulinks.removeClass('selected').eq(setting.selectitem).addClass('selected')
-
                        barheight = $menulinks.eq(0).outerHeight();
+
}
-
$effectref.css({left:$menulinks.eq(thispagenumber).position().left}) //position effect LI behind the left edge of the window
+
else{
-
if (typeof setting.selectitem!="undefined"){ //if setting.selectitem defined
+
var $selectedlink=$menulinks.filter('.selected:eq(0)')
-
var $selectedlink=$menulinks.removeClass('selected').eq(setting.selectitem).addClass('selected')
+
var $selectedlink=$menulinks.eq(1);
-
}
+
}
-
else{
+
setting.defaultselectedBool=$selectedlink.length
-
var $selectedlink=$menulinks.filter('.selected:eq(0)') //find item with class="selected" manually defined
+
$menulinks.mouseover(function(){
-
                                var $selectedlink=$menulinks.eq(1);
+
var $target=$(this)
-
}
+
if(currenttarget!=$target)
-
setting.defaultselectedBool=$selectedlink.length
+
-
$menulinks.mouseover(function(){
+
-
var $target=$(this)
+
-
if(currenttarget != $target)
+
{
{
-
clearTimeout(setting.snapbacktimer)
+
clearTimeout(setting.snapbacktimer)
-
                                currenttarget = $target;
+
currenttarget=$target;
-
//alert($target.position().left+" "+$target.get(0).offsetLeft)
+
$contentbox.dequeue().css({left:$target.parent().position().left,opacity:0});
-
                                $contentbox.dequeue().css({left:$target.parent().position().left, opacity:0});
+
$contentbox.html(contentarray[$target.parent().index()]);
-
                                $contentbox.html(contentarray[$target.parent().index()]);
+
var $contentlinks=$contentbox.find('a')
-
        var $contentlinks=$contentbox.find('a')
+
$contentlinks.hover(function(){
-
                                $contentlinks.hover(function() {
+
$(this).css({color:colorsarray[$target.parent().index()]});
$(this).css({color:colorsarray[$target.parent().index()]});
-
}, function() {
+
},function(){
$(this).css({color:'#aaa'});
$(this).css({color:'#aaa'});
})
})
-
                                $contentbox.dequeue().animate({opacity:1}, setting.fxtime*4, setting.fx);
+
$contentbox.dequeue().animate({opacity:1},setting.fxtime*4,setting.fx);
-
$effectref.dequeue().animate({left:$target.parent().position().left-$target.parent().outerWidth()*(1-1)/2+25, width:$target.parent().outerWidth()*1, height:150, opacity:0.5}, setting.fxtime, setting.fx)
+
$effectref.dequeue().animate({left:$target.parent().position().left-$target.parent().outerWidth()*(1-1)/2+25,width:$target.parent().outerWidth()*1,height:150,opacity:0.5},setting.fxtime,setting.fx)
-
                                $target.dequeue().animate({color:colorsarray[$target.parent().index()]}, setting.fxtime, setting.fx)
+
$target.dequeue().animate({color:colorsarray[$target.parent().index()]},setting.fxtime,setting.fx)
-
if (setting.defaultselectedBool==0) //if there is no default selected menu item
+
if(setting.defaultselectedBool==0)
-
$selectedlink=$target //set current mouseover element to selected element
+
$selectedlink=$target
 +
}
 +
})
 +
$menulinks.mouseleave(function(){
 +
var $target=$(this)
 +
if($menulinks.index(this)!=thispagenumber)
 +
$target.dequeue().animate({color:'#aaa'},setting.fxtime,setting.fx)
 +
})
 +
if($selectedlink.length>0){
 +
snapback(0)
 +
$('#navcon').mouseleave(function(){
 +
currenttarget=$menulinks.eq(thispagenumber);
 +
setting.snapbacktimer=setTimeout(function(){
 +
$effectref.dequeue().animate({height:barheight,width:currenttarget.parent().outerWidth(),left:currenttarget.position().left,opacity:0.5},setting.fxtime,setting.fx);
 +
$contentbox.stop(true,true).css({opacity:0})
 +
},setting.snapdelay)
 +
})
 +
}
 +
$(window).bind('resize',function(){
 +
snapback(setting.fxtime)
 +
})
 +
})
}
}
-
})
 
-
$menulinks.mouseleave(function(){
 
-
                                var $target = $(this)
 
-
if($menulinks.index(this) != thispagenumber)
 
-
$target.dequeue().animate({color:'#aaa'}, setting.fxtime, setting.fx)
 
-
})
 
-
if ($selectedlink.length>0){
 
-
snapback(0)
 
-
$('#navcon').mouseleave(function(){
 
-
                                        currenttarget = $menulinks.eq(thispagenumber);
 
-
setting.snapbacktimer=setTimeout(function(){
 
-
// snapback(setting.fxtime)
 
-
                                                $effectref.dequeue().animate({height:barheight, width:currenttarget.parent().outerWidth(), left:currenttarget.position().left,opacity:0.5},setting.fxtime,setting.fx);
 
-
                                                $contentbox.stop(true,true).css({opacity:0})
 
-
}, setting.snapdelay)
 
-
})
 
-
}
 
-
$(window).bind('resize', function(){
 
-
snapback(setting.fxtime)
 
-
})
 
-
})
 
-
}
 
}
}
</script>
</script>

Revision as of 21:09, 20 July 2011

Retrieved from "http://2011.igem.org/Template:Team:UC_Davis/Head"