"
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){if(s==undefined)s=1.70158;return c*((t=t/d-1)*t*((s+1)*t+s)+1)+b;}}) | + | |
| - | var barheight=0;var currenttarget=null;var thispagenumber=0;var $menulinks=null;var colorsarray=["#fff","#FF7722","#bb66ff","#12aeef","#EE3333","#AADD00"];var contentarray=["<a href=https://2011.igem.org/Team:UC_Davis/Home_wip>go back <br>home</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> <a href=#>week 2</a><br><a href=#>week 3</a> <a href=#>week 4</a><br><a href=#>week 5</a> <a href=#>week 6</a><br><a href=#>week 7</a> <a href=#>week 8</a><br><a href=#>week 9</a> <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={effectmarkup:'<li class="active"></li>',setup:function(usersetting){jQuery(function($){function snapback(dur){} | + | jQuery.extend(jQuery.easing, {easeOutBack:function(x, t, b, c, d, s){ //see http://gsgd.co.uk/sandbox/jquery/easing/ |
| - | var setting=jQuery.extend({fx:'easeOutBack',fxtime:500,snapdelay:300},usersetting) | + | if (s == undefined) s = 1.70158; |
| - | var $menu=$('#'+setting.id).find('li:eq(0)').parents('ul:eq(0)') | + | return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; |
| - | $menulinks=$menu.find('li a') | + | } |
| - | $menulinks.eq(thispagenumber).css('color',colorsarray[thispagenumber]);var $contentbox=$('#contentbox').css({top:$menulinks.eq(0).position().bottom,zIndex:1});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) | + | }) |
| - | barheight=$menulinks.eq(0).outerHeight();$effectref.css({left:$menulinks.eq(thispagenumber).position().left}) | + | |
| - | if(typeof setting.selectitem!="undefined"){var $selectedlink=$menulinks.removeClass('selected').eq(setting.selectitem).addClass('selected')} | + | var barheight = 0; |
| - | else{var $selectedlink=$menulinks.filter('.selected:eq(0)') | + | var currenttarget = null; |
| - | var $selectedlink=$menulinks.eq(1);} | + | var thispagenumber = 0; |
| - | setting.defaultselectedBool=$selectedlink.length | + | var $menulinks = null; |
| - | $menulinks.mouseover(function(){var $target=$(this) | + | |
| - | if(currenttarget!=$target) | + | var colorsarray = [ "#fff", "#FF7722", "#bb66ff", "#12aeef", "#EE3333", "#AADD00" ]; |
| - | {clearTimeout(setting.snapbacktimer) | + | //var colorsarray = [ "#fff", "#FF7722", "#9400D3", "#12aeef", "#CD0000", "#AADD00" ]; |
| - | currenttarget=$target;$contentbox.dequeue().css({left:$target.parent().position().left,opacity:0});$contentbox.html(contentarray[$target.parent().index()]);var $contentlinks=$contentbox.find('a') | + | //var colorsarray = [ "#fff", "#fff", "#fff", "#fff", "#fff", "#fff" ]; |
| - | $contentlinks.hover(function(){$(this).css({color:colorsarray[$target.parent().index()]});},function(){$(this).css({color:'#aaa'});}) | + | var contentarray = [ |
| - | $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) | + | |
| - | $target.dequeue().animate({color:colorsarray[$target.parent().index()]},setting.fxtime,setting.fx) | + | "<a href=https://2011.igem.org/Team:UC_Davis/Home_wip>go back <br>home</a>", |
| - | if(setting.defaultselectedBool==0) | + | "<a href=#>subhead2</a><br><a href=#>subhead2</a><br><a href=#>subhead2</a>", |
| - | $selectedlink=$target}}) | + | "<a href=#>subhead3</a><br><a href=#>subhead3</a><br><a href=#>subhead2</a>", |
| - | $menulinks.mouseleave(function(){var $target=$(this) | + | "<a href=#>week 1</a> <a href=#>week 2</a><br><a href=#>week 3</a> <a href=#>week 4</a><br><a href=#>week 5</a> <a href=#>week 6</a><br><a href=#>week 7</a> <a href=#>week 8</a><br><a href=#>week 9</a> <a href=#>week 10</a>", |
| - | if($menulinks.index(this)!=thispagenumber) | + | "<a href=#>subhead4</a><br><a href=#>subhead4</a><br><a href=#>subhead4</a>", |
| - | $target.dequeue().animate({color:'#aaa'},setting.fxtime,setting.fx)}) | + | "<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>", |
| - | 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)})})}} | + | |
| + | var gooeymenu={ | ||
| + | effectmarkup: '<li class="active"></li>', | ||
| + | |||
| + | setup:function(usersetting){ | ||
| + | jQuery(function($){ //on document.ready | ||
| + | function snapback(dur){ | ||
| + | // if ($selectedlink.length>0) | ||
| + | // $effectref.dequeue().animate({left:$selectedlink.position().left, width:$selectedlink.outerWidth()}, dur, setting.fx) | ||
| + | } | ||
| + | var setting=jQuery.extend({fx:'easeOutBack', fxtime:500, snapdelay:300}, usersetting) | ||
| + | var $menu=$('#'+setting.id).find('li:eq(0)').parents('ul:eq(0)') //select main menu UL | ||
| + | $menulinks=$menu.find('li a') | ||
| + | $menulinks.eq(thispagenumber).css('color', colorsarray[thispagenumber]); | ||
| + | var $contentbox=$('#contentbox').css({top:$menulinks.eq(0).position().bottom, zIndex:1}); | ||
| + | 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 | ||
| + | |||
| + | barheight = $menulinks.eq(0).outerHeight(); | ||
| + | $effectref.css({left:$menulinks.eq(thispagenumber).position().left}) //position effect LI behind the left edge of the window | ||
| + | if (typeof setting.selectitem!="undefined"){ //if setting.selectitem defined | ||
| + | var $selectedlink=$menulinks.removeClass('selected').eq(setting.selectitem).addClass('selected') | ||
| + | } | ||
| + | else{ | ||
| + | var $selectedlink=$menulinks.filter('.selected:eq(0)') //find item with class="selected" manually defined | ||
| + | var $selectedlink=$menulinks.eq(1); | ||
| + | } | ||
| + | setting.defaultselectedBool=$selectedlink.length | ||
| + | $menulinks.mouseover(function(){ | ||
| + | var $target=$(this) | ||
| + | if(currenttarget != $target) | ||
| + | { | ||
| + | clearTimeout(setting.snapbacktimer) | ||
| + | currenttarget = $target; | ||
| + | //alert($target.position().left+" "+$target.get(0).offsetLeft) | ||
| + | $contentbox.dequeue().css({left:$target.parent().position().left, opacity:0}); | ||
| + | $contentbox.html(contentarray[$target.parent().index()]); | ||
| + | var $contentlinks=$contentbox.find('a') | ||
| + | $contentlinks.hover(function() { | ||
| + | $(this).css({color:colorsarray[$target.parent().index()]}); | ||
| + | }, function() { | ||
| + | $(this).css({color:'#aaa'}); | ||
| + | }) | ||
| + | $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) | ||
| + | $target.dequeue().animate({color:colorsarray[$target.parent().index()]}, setting.fxtime, setting.fx) | ||
| + | if (setting.defaultselectedBool==0) //if there is no default selected menu item | ||
| + | $selectedlink=$target //set current mouseover element to selected element | ||
| + | } | ||
| + | }) | ||
| + | $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:05, 20 July 2011
