Template:Team:UC Davis/Head
From 2011.igem.org
(Difference between revisions)
Line 7: | Line 7: | ||
<script> | <script> | ||
- | 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;}}) |
- | jQuery.extend(jQuery.easing,{easeOutBack:function(x,t,b,c,d,s){ | + | 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){} |
- | if(s==undefined)s=1.70158; | + | var setting=jQuery.extend({fx:'easeOutBack',fxtime:500,snapdelay:300},usersetting);var $menu=$('#'+setting.id).find('li:eq(0)').parents('ul:eq(0)');$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');} |
- | return c*((t=t/d-1)*t*((s+1)*t+s)+1)+b; | + | else{var $selectedlink=$menulinks.filter('.selected:eq(0)');var $selectedlink=$menulinks.eq(1);} |
- | } | + | setting.defaultselectedBool=$selectedlink.length;$menulinks.mouseover(function(){var $target=$(this);if(currenttarget!=$target) |
- | }) | + | {clearTimeout(setting.snapbacktimer);currenttarget=$target;$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'});}) |
- | var barheight=0; | + | $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) |
- | var currenttarget=null; | + | $selectedlink=$target;}}) |
- | var thispagenumber=0; | + | $menulinks.mouseleave(function(){var $target=$(this);if($menulinks.index(this)!=thispagenumber) |
- | var $menulinks=null; | + | $target.dequeue().animate({color:'#aaa'},setting.fxtime,setting.fx);}) |
- | var colorsarray=["#fff","#FF7722","#bb66ff","#12aeef","#EE3333","#AADD00"]; | + | 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)})} |
- | var contentarray=[ | + | $(window).bind('resize',function(){snapback(setting.fxtime);})})}} |
- | "<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){ | + | |
- | } | + | |
- | var setting=jQuery.extend({fx:'easeOutBack',fxtime:500,snapdelay:300},usersetting); | + | |
- | var $menu=$('#'+setting.id).find('li:eq(0)').parents('ul:eq(0)'); | + | |
- | $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'); | + | |
- | } | + | |
- | else{ | + | |
- | var $selectedlink=$menulinks.filter('.selected:eq(0)'); | + | |
- | var $selectedlink=$menulinks.eq(1); | + | |
- | } | + | |
- | setting.defaultselectedBool=$selectedlink.length; | + | |
- | $menulinks.mouseover(function(){ | + | |
- | var $target=$(this); | + | |
- | if(currenttarget!=$target) | + | |
- | { | + | |
- | clearTimeout(setting.snapbacktimer); | + | |
- | currenttarget=$target; | + | |
- | $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) | + | |
- | $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); | + | |
- | }) | + | |
- | }) | + | |
- | } | + | |
- | } | + | |
</script> | </script> | ||
Revision as of 21:12, 20 July 2011