|
|
| Line 1: |
Line 1: |
| | {{Team:BNU-China/CSS/main}} | | {{Team:BNU-China/CSS/main}} |
| | {{Team:BNU-China/javascripts}} | | {{Team:BNU-China/javascripts}} |
| - | <html> | + | |
| | + | <html lang="en-US"> |
| | <head> | | <head> |
| | + | <meta charset="UTF-8"> |
| | + | <title>Zeences Design</title> |
| | <script type="text/javascript" src="https://2014.igem.org/Team:BNU-China/js/jquery.aw-showcase.js?action=raw"></script> | | <script type="text/javascript" src="https://2014.igem.org/Team:BNU-China/js/jquery.aw-showcase.js?action=raw"></script> |
| | <script type="text/javascript" src="https://2014.igem.org/Team:BNU-China/js/jquery.jcarousel.js?action=raw"></script> | | <script type="text/javascript" src="https://2014.igem.org/Team:BNU-China/js/jquery.jcarousel.js?action=raw"></script> |
| Line 8: |
Line 11: |
| | | | |
| | <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script> | | <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script> |
| - | <script type="text/javascript">
| |
| - | var ddsmoothmenu={
| |
| - | arrowimages: {down:[], right:[]},
| |
| - | transition: {overtime:300, outtime:300},
| |
| - | shadow: {enable:false, offsetx:5, offsety:5},
| |
| - | showhidedelay: {showdelay: 100, hidedelay: 200},
| |
| - | detectwebkit: navigator.userAgent.toLowerCase().indexOf("applewebkit")!=-1,
| |
| - | detectie6: document.all && !window.XMLHttpRequest,
| |
| - |
| |
| - | getajaxmenu:function($, setting){
| |
| - | var $menucontainer=$('#'+setting.contentsource[0])
| |
| - | $menucontainer.html("Loading Menu...")
| |
| - | $.ajax({
| |
| - | url: setting.contentsource[1],
| |
| - | async: true,
| |
| - | error:function(ajaxrequest){
| |
| - | $menucontainer.html('Error fetching content. Server Response: '+ajaxrequest.responseText)
| |
| - | },
| |
| - | success:function(content){
| |
| - | $menucontainer.html(content)
| |
| - | ddsmoothmenu.buildmenu($, setting)
| |
| - | }
| |
| - | })
| |
| - | },
| |
| - |
| |
| - |
| |
| - | buildmenu:function($, setting){
| |
| - | var smoothmenu=ddsmoothmenu
| |
| - | var $mainmenu=$("#"+setting.mainmenuid+">ul") //reference main menu UL
| |
| - | $mainmenu.parent().get(0).className=setting.classname || "ddsmoothmenu"
| |
| - | var $headers=$mainmenu.find("ul").parent()
| |
| - | $headers.hover(
| |
| - | function(e){
| |
| - | $(this).children('a:eq(0)').addClass('selected')
| |
| - | },
| |
| - | function(e){
| |
| - | $(this).children('a:eq(0)').removeClass('selected')
| |
| - | }
| |
| - | )
| |
| - | $headers.each(function(i){
| |
| - | var $curobj=$(this).css({zIndex: 100-i})
| |
| - | var $subul=$(this).find('ul:eq(0)').css({display:'block'})
| |
| - | $subul.data('timers', {})
| |
| - | this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
| |
| - | this.istopheader=$curobj.parents("ul").length==1? true : false
| |
| - | $subul.css({top:this.istopheader && setting.orientation!='v'? this._dimensions.h+"px" : 0})
| |
| - | $curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: smoothmenu.arrowimages.down[2]} : {})
| |
| - | if (smoothmenu.shadow.enable){
| |
| - | this._shadowoffset={x:(this.istopheader?$subul.offset().left+smoothmenu.shadow.offsetx : this._dimensions.w), y:(this.istopheader? $subul.offset().top+smoothmenu.shadow.offsety : $curobj.position().top)}
| |
| - | if (this.istopheader)
| |
| - | $parentshadow=$(document.body)
| |
| - | else{
| |
| - | var $parentLi=$curobj.parents("li:eq(0)")
| |
| - | $parentshadow=$parentLi.get(0).$shadow
| |
| - | }
| |
| - | this.$shadow=$('<div class="ddshadow'+(this.istopheader? ' toplevelshadow' : '')+'"></div>').prependTo($parentshadow).css({left:this._shadowoffset.x+'px', top:this._shadowoffset.y+'px'})
| |
| - | }
| |
| - | $curobj.hover(
| |
| - | function(e){
| |
| - | var $targetul=$subul
| |
| - | var header=$curobj.get(0)
| |
| - | clearTimeout($targetul.data('timers').hidetimer)
| |
| - | $targetul.data('timers').showtimer=setTimeout(function(){
| |
| - | header._offsets={left:$curobj.offset().left, top:$curobj.offset().top}
| |
| - | var menuleft=header.istopheader && setting.orientation!='v'? 0 : header._dimensions.w
| |
| - | menuleft=(header._offsets.left+menuleft+header._dimensions.subulw>$(window).width())? (header.istopheader && setting.orientation!='v'? -header._dimensions.subulw+header._dimensions.w : -header._dimensions.w) : menuleft
| |
| - | if ($targetul.queue().length<=1){
| |
| - | $targetul.css({left:menuleft+"px", width:header._dimensions.subulw+'px'}).animate({height:'show',opacity:'show'}, ddsmoothmenu.transition.overtime)
| |
| - | if (smoothmenu.shadow.enable){
| |
| - | var shadowleft=header.istopheader? $targetul.offset().left+ddsmoothmenu.shadow.offsetx : menuleft
| |
| - | var shadowtop=header.istopheader?$targetul.offset().top+smoothmenu.shadow.offsety : header._shadowoffset.y
| |
| - | if (!header.istopheader && ddsmoothmenu.detectwebkit){
| |
| - | header.$shadow.css({opacity:1})
| |
| - | }
| |
| - | header.$shadow.css({overflow:'', width:header._dimensions.subulw+'px', left:shadowleft+'px', top:shadowtop+'px'}).animate({height:header._dimensions.subulh+'px'}, ddsmoothmenu.transition.overtime)
| |
| - | }
| |
| - | }
| |
| - | }, ddsmoothmenu.showhidedelay.showdelay)
| |
| - | },
| |
| - | function(e){
| |
| - | var $targetul=$subul
| |
| - | var header=$curobj.get(0)
| |
| - | clearTimeout($targetul.data('timers').showtimer)
| |
| - | $targetul.data('timers').hidetimer=setTimeout(function(){
| |
| - | $targetul.animate({height:'hide', opacity:'hide'}, ddsmoothmenu.transition.outtime)
| |
| - | if (smoothmenu.shadow.enable){
| |
| - | if (ddsmoothmenu.detectwebkit){
| |
| - | header.$shadow.children('div:eq(0)').css({opacity:0})
| |
| - | }
| |
| - | header.$shadow.css({overflow:'hidden'}).animate({height:0}, ddsmoothmenu.transition.outtime)
| |
| - | }
| |
| - | }, ddsmoothmenu.showhidedelay.hidedelay)
| |
| - | }
| |
| - | )
| |
| - | })
| |
| - | $mainmenu.find("ul").css({display:'none', visibility:'visible'})
| |
| - | },
| |
| - |
| |
| - | init:function(setting){
| |
| - | if (typeof setting.customtheme=="object" && setting.customtheme.length==2){
| |
| - | var mainmenuid='#'+setting.mainmenuid
| |
| - | var mainselector=(setting.orientation=="v")? mainmenuid : mainmenuid+', '+mainmenuid
| |
| - | document.write('<style type="text/css">\n'
| |
| - | +mainselector+' ul li a {background:'+setting.customtheme[0]+';}\n'
| |
| - | +mainmenuid+' ul li a:hover {background:'+setting.customtheme[1]+';}\n'
| |
| - | +'</style>')
| |
| - | }
| |
| - | this.shadow.enable=(document.all && !window.XMLHttpRequest)? false : this.shadow.enable
| |
| - | jQuery(document).ready(function($){
| |
| - | if (typeof setting.contentsource=="object"){
| |
| - | ddsmoothmenu.getajaxmenu($, setting)
| |
| - | }
| |
| - | else{
| |
| - | ddsmoothmenu.buildmenu($, setting)
| |
| - | }
| |
| - | })
| |
| - | }
| |
| - |
| |
| - | }
| |
| - |
| |
| - |
| |
| - | </script>
| |
| - | <script type="text/javascript">
| |
| - | (function(e){var n=e.event,o;n.special.smartresize={setup:function(){e(this).bind("resize",n.special.smartresize.handler)},teardown:function(){e(this).unbind("resize",n.special.smartresize.handler)},handler:function(j,l){var g=this,d=arguments;j.type="smartresize";o&&clearTimeout(o);o=setTimeout(function(){jQuery.event.handle.apply(g,d)},l==="execAsap"?0:100)}};e.fn.smartresize=function(j){return j?this.bind("smartresize",j):this.trigger("smartresize",["execAsap"])};e.fn.masonry=function(j,l){var g=
| |
| - | {getBricks:function(d,b,a){var c=a.itemSelector===undefined;b.$bricks=a.appendedContent===undefined?c?d.children():d.find(a.itemSelector):c?a.appendedContent:a.appendedContent.filter(a.itemSelector)},placeBrick:function(d,b,a,c,h){b=Math.min.apply(Math,a);for(var i=b+d.outerHeight(true),f=a.length,k=f,m=c.colCount+1-f;f--;)if(a[f]==b)k=f;d.applyStyle({left:c.colW*k+c.posLeft,top:b},e.extend(true,{},h.animationOptions));for(f=0;f<m;f++)c.colY[k+f]=i},setup:function(d,b,a){g.getBricks(d,a,b);if(a.masoned)a.previousData=
| |
| - | d.data("masonry");a.colW=b.columnWidth===undefined?a.masoned?a.previousData.colW:a.$bricks.outerWidth(true):b.columnWidth;a.colCount=Math.floor(d.width()/a.colW);a.colCount=Math.max(a.colCount,1)},arrange:function(d,b,a){var c;if(!a.masoned||b.appendedContent!==undefined)a.$bricks.css("position","absolute");if(a.masoned){a.posTop=a.previousData.posTop;a.posLeft=a.previousData.posLeft}else{d.css("position","relative");var h=e(document.createElement("div"));d.prepend(h);a.posTop=Math.round(h.position().top);
| |
| - | a.posLeft=Math.round(h.position().left);h.remove()}if(a.masoned&&b.appendedContent!==undefined){a.colY=a.previousData.colY;for(c=a.previousData.colCount;c<a.colCount;c++)a.colY[c]=a.posTop}else{a.colY=[];for(c=a.colCount;c--;)a.colY.push(a.posTop)}e.fn.applyStyle=a.masoned&&b.animate?e.fn.animate:e.fn.css;b.singleMode?a.$bricks.each(function(){var i=e(this);g.placeBrick(i,a.colCount,a.colY,a,b)}):a.$bricks.each(function(){var i=e(this),f=Math.ceil(i.outerWidth(true)/a.colW);f=Math.min(f,a.colCount);
| |
| - | if(f===1)g.placeBrick(i,a.colCount,a.colY,a,b);else{var k=a.colCount+1-f,m=[];for(c=0;c<k;c++){var p=a.colY.slice(c,c+f);m[c]=Math.max.apply(Math,p)}g.placeBrick(i,k,m,a,b)}});a.wallH=Math.max.apply(Math,a.colY);d.applyStyle({height:a.wallH-a.posTop},e.extend(true,[],b.animationOptions));a.masoned||setTimeout(function(){d.addClass("masoned")},1);l.call(a.$bricks);d.data("masonry",a)},resize:function(d,b,a){a.masoned=!!d.data("masonry");var c=d.data("masonry").colCount;g.setup(d,b,a);a.colCount!=c&&
| |
| - | g.arrange(d,b,a)}};return this.each(function(){var d=e(this),b={};b.masoned=!!d.data("masonry");var a=b.masoned?d.data("masonry").options:{},c=e.extend({},e.fn.masonry.defaults,a,j),h=a.resizeable;b.options=c.saveOptions?c:a;l=l||function(){};g.getBricks(d,b,c);if(!b.$bricks.length)return this;g.setup(d,c,b);g.arrange(d,c,b);!h&&c.resizeable&&e(window).bind("smartresize.masonry",function(){g.resize(d,c,b)});h&&!c.resizeable&&e(window).unbind("smartresize.masonry")})};e.fn.masonry.defaults={singleMode:false,
| |
| - | columnWidth:undefined,itemSelector:undefined,appendedContent:undefined,saveOptions:true,resizeable:true,animate:false,animationOptions:{}}})(jQuery);
| |
| - | </script>
| |
| - | <script type="text/javascript">
| |
| - | (function($){
| |
| - | $.fn.transify = function(options) {
| |
| - | var defaults = {
| |
| - | opacityOrig:.33,
| |
| - | fadeSpeed:600
| |
| - | },
| |
| - | settings = $.extend({}, defaults, options);
| |
| - |
| |
| - | this.each(function() {
| |
| - | var $this = $(this);
| |
| - | $this.append('<div class="transify"></div>');
| |
| - | var transBG = $this.find('.transify');
| |
| - | transBG.css({
| |
| - | backgroundColor:$this.css('backgroundColor'),
| |
| - | backgroundImage:$this.css('backgroundImage'),
| |
| - | backgroundRepeat:$this.css('backgroundRepeat'),
| |
| - | borderTopColor:$this.css('borderTopColor'),
| |
| - | borderTopWidth:$this.css('borderTopWidth'),
| |
| - | borderTopStyle:$this.css('borderTopStyle'),
| |
| - | borderRightColor:$this.css('borderRightColor'),
| |
| - | borderRightWidth:$this.css('borderRightWidth'),
| |
| - | borderRightStyle:$this.css('borderRightStyle'),
| |
| - | borderBottomColor:$this.css('borderBottomColor'),
| |
| - | borderBottomWidth:$this.css('borderBottomWidth'),
| |
| - | borderBottomStyle:$this.css('borderBottomStyle'),
| |
| - | borderLeftColor:$this.css('borderLeftColor'),
| |
| - | borderLeftWidth:$this.css('borderLeftWidth'),
| |
| - | borderLeftStyle:$this.css('borderLeftStyle'),
| |
| - | position:'absolute',
| |
| - | top:0,
| |
| - | left:0,
| |
| - | zIndex:-1,
| |
| - | width:$this.width()+parseInt($this.css("padding-left"), 10) + parseInt($this.css("padding-right"), 10),
| |
| - | height:$this.height()+parseInt($this.css("padding-top"), 10) + parseInt($this.css("padding-bottom"), 10),
| |
| - | opacity:settings.opacityOrig});
| |
| - | if (settings.percentWidth) {
| |
| - | transBG.css('width',settings.percentWidth);
| |
| - | }
| |
| - | if (settings.percentHeight) {
| |
| - | transBG.css('height',settings.percentHeight);
| |
| - | }
| |
| - | $this.css({
| |
| - | position:'relative',
| |
| - | background:'none',
| |
| - | border:'none'})
| |
| - |
| |
| - | if (settings.opacityNew) {
| |
| - | $this.hover(function() {
| |
| - | transBG.stop().animate({opacity:settings.opacityNew}, settings.fadeSpeed);
| |
| - | }, function() {
| |
| - | transBG.stop().animate({opacity:settings.opacityOrig}, settings.fadeSpeed);
| |
| - | });
| |
| - | }
| |
| - | });
| |
| - | return this;
| |
| - | }
| |
| - | })(jQuery);
| |
| - | </script>
| |
| - |
| |
| | <script type="text/javascript"> | | <script type="text/javascript"> |
| | jQuery(document).ready(function($){ | | jQuery(document).ready(function($){ |
| Line 421: |
Line 233: |
| | | | |
| | <div id="copyright" class="opacity"> | | <div id="copyright" class="opacity"> |
| - | <p>copyright</p> | + | <p>E.coli Prometheus: I live for the trees and die for safety</p> |
| | </div> | | </div> |
| | </div> | | </div> |
| | <!-- End Wrapper --> | | <!-- End Wrapper --> |
| - |
| |
| | <script type="text/javascript"> | | <script type="text/javascript"> |
| - |
| |
| | $(function() { | | $(function() { |
| - |
| |
| - | // Options for SuperBGImage
| |
| | $.fn.superbgimage.options = { | | $.fn.superbgimage.options = { |
| - | randomtransition: 2, // 0-none, 1-use random transition (0-7) | + | randomtransition: 2, |
| - | z_index: -1, // z-index for the container | + | z_index: -1, |
| - | slideshow: 1, // 0-none, 1-autostart slideshow | + | slideshow: 1, |
| - | slide_interval: 4000, // interval for the slideshow | + | slide_interval: 4000, |
| - | randomimage: 1, // 0-none, 1-random image | + | randomimage: 1, |
| - | speed: 'slow' // animation speed | + | speed: 'slow' |
| | }; | | }; |
| - |
| |
| - | // initialize SuperBGImage
| |
| | $('#thumbs').superbgimage().hide(); | | $('#thumbs').superbgimage().hide(); |
| - |
| |
| | }); | | }); |
| | ddsmoothmenu.init({ | | ddsmoothmenu.init({ |
| Line 450: |
Line 255: |
| | contentsource: "markup" | | contentsource: "markup" |
| | }) | | }) |
| - |
| |
| | $(function() { | | $(function() { |
| | $('.flickr img, .blog a img, #.container a img, .content a img').css("opacity","1.0"); | | $('.flickr img, .blog a img, #.container a img, .content a img').css("opacity","1.0"); |
| Line 460: |
Line 264: |
| | }); | | }); |
| | $('.opacity').transify({opacityOrig:.90, percentHeight:'100%'}); | | $('.opacity').transify({opacityOrig:.90, percentHeight:'100%'}); |
| - |
| |
| | $(document).ready(function(){ | | $(document).ready(function(){ |
| | $("a[rel^='prettyPhoto']").prettyPhoto({autoplay_slideshow: false, overlay_gallery: false, social_tools:false, deeplinking: false, theme:'pp_default', slideshow:5000}); | | $("a[rel^='prettyPhoto']").prettyPhoto({autoplay_slideshow: false, overlay_gallery: false, social_tools:false, deeplinking: false, theme:'pp_default', slideshow:5000}); |
| | }); | | }); |
| - |
| |
| | $(document).ready(function(){ | | $(document).ready(function(){ |
| - | //Hide the tooglebox when page load
| |
| | $(".togglebox").hide(); | | $(".togglebox").hide(); |
| - | //slide up and down when click over heading 2
| |
| | $("h2").click(function(){ | | $("h2").click(function(){ |
| - | // slide toggle effect set to slow you can set it to fast too.
| |
| | $(this).toggleClass("active").next(".togglebox").slideToggle("slow"); | | $(this).toggleClass("active").next(".togglebox").slideToggle("slow"); |
| | return true; | | return true; |
| Line 476: |
Line 275: |
| | }); | | }); |
| | $(document).ready(function() { | | $(document).ready(function() { |
| - | //Default Action
| + | $(".tab_content").hide(); |
| - | $(".tab_content").hide(); //Hide all content | + | $("ul.tabs li:first").addClass("active").show(); |
| - | $("ul.tabs li:first").addClass("active").show(); //Activate first tab | + | $(".tab_content:first").show(); |
| - | $(".tab_content:first").show(); //Show first tab content | + | |
| - |
| + | |
| - | //On Click Event
| + | |
| | $("ul.tabs li").click(function() { | | $("ul.tabs li").click(function() { |
| - | $("ul.tabs li").removeClass("active"); //Remove any "active" class | + | $("ul.tabs li").removeClass("active"); |
| - | $(this).addClass("active"); //Add "active" class to selected tab | + | $(this).addClass("active"); |
| - | $(".tab_content").hide(); //Hide all tab content | + | $(".tab_content").hide(); |
| - | var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content | + | var activeTab = $(this).find("a").attr("href"); |
| - | $(activeTab).fadeIn(); //Fade in the active content | + | $(activeTab).fadeIn(); |
| | return false; | | return false; |
| | }); | | }); |
| - |
| |
| | }); | | }); |
| - |
| |
| | $(document).ready(function() { | | $(document).ready(function() { |
| | $('.box, .carousel ul li').mouseenter(function(e) { | | $('.box, .carousel ul li').mouseenter(function(e) { |
| - |
| |
| | $(this).children('a').children('span').fadeIn(200); | | $(this).children('a').children('span').fadeIn(200); |
| | }).mouseleave(function(e) { | | }).mouseleave(function(e) { |
| - |
| |
| | $(this).children('a').children('span').fadeOut(200); | | $(this).children('a').children('span').fadeOut(200); |
| | }); | | }); |
"
