Team:HKUST-Hong Kong/Parts

From 2012.igem.org

Revision as of 12:23, 27 June 2012 by Dynastywarrior (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

This is a template page. READ THESE INSTRUCTIONS.

You are provided with this team page template with which to start the iGEM season. You may choose to personalize it to fit your team but keep the same "look." Or you may choose to take your team wiki to a different level and design your own wiki. You can find some examples HERE.

You MUST have all of the pages listed in the menu below with the names specified. PLEASE keep all of your pages within your teams namespace.

Home	Team	Official Team Profile	Project	Parts Submitted to the Registry	Modeling	Notebook	Safety	Attributions

An important aspect of the iGEM competition is the use and creation of standard biological parts. Each team will make new parts during iGEM and will place them in the [http://partsregistry.org Registry of Standard Biological Parts]. The iGEM software provides an easy way to present the parts your team has created . The "groupparts" tag will generate a table with all of the parts that your team adds to your team sandbox. Note that if you want to document a part you need to document it on the [http://partsregistry.org Registry], not on your team wiki.

Remember that the goal of proper part documentation is to describe and define a part such that it can be used without a need to refer to the primary literature. The next iGEM team should be able to read your documentation and be able to use the part successfully. Also, you should provide proper references to acknowledge previous authors and to provide for users who wish to know more.

<groupparts>iGEM012 HKUST-Hong_Kong</groupparts>

<img src="" width="500" height="300" />
Write something here
<img src="" width="500" height="300" />
Write something here
<img src="" width="500" height="300" />
Write something here
<img src="" width="500" height="300" />
Write something here
<img src="" width="500" height="300" />
Write something here
<img src="" width="500" height="300" />
Write something here
<img src="" width="500" height="300" />
Write something here

Slideshow{

width:4000px; }

Slideshow ul{

list-style:none; width:4000px; margin:0; padding:0; position:relative; }

Slideshow li{

display:inline; float:left; }

</style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> (function($){ $.fn.extend({ infiniteCarousel: function(options) { var defaults = { transitionSpeed: 800, displayTime: 6000, textholderHeight: .25, displayProgressBar: true, displayThumbnails: true, displayThumbnailNumbers: true, displayThumbnailBackground: true, thumbnailWidth: '20px', thumbnailHeight: '20px', thumbnailFontSize: '.7em', easeLeft: 'linear', easeRight: 'linear', imagePath: 'js/infinitecarousel/images/', inView: 1, padding: '0px', advance: 1, showControls: true, autoHideControls: false, autoHideCaptions: false, autoStart: true, prevNextInternal: true, enableKeyboardNav: true, onSlideStart: function(){}, onSlideEnd: function(){}, onPauseClick: function(){} }; var options = $.extend(defaults, options);

   		return this.each(function() {
   			var randID = Math.round(Math.random()*100000000);

var o=options; var obj = $(this); var autopilot = o.autoStart;

var numImages = $('img', obj).length; var imgHeight = $('img:first', obj).height(); var imgWidth = $('img:first', obj).width();

if(o.inView > numImages-1) o.inView=numImages-1; $('p', obj).hide(); $(obj).css({'position':'relative','overflow':'hidden'}).width((imgWidth*o.inView)+(o.inView*parseInt(o.padding)*2)).height(imgHeight+(parseInt(o.padding)*2)); $('ul', obj).css({'list-style':'none','margin':'0','padding':'0','position':'relative'}).width(imgWidth*numImages); $('li', obj).css({'display':'inline','float':'left','padding':o.padding});

$('li:last', obj).prependTo($('ul', obj)); $('ul', obj).css('left',-imgWidth-(parseInt(o.padding)*2)+'px').width(9999);

if(o.displayProgressBar) {

$(obj).append('

');

$('#progress'+randID).width('100%').height(5).css('opacity','.6'); }

function startProgressBar(barTime) { barTime = (barTime==null)? o.displayTime:barTime; $('#progress'+randID).width('100%').height(5); $('#progress'+randID).animate({'width':0},barTime); }

var containerBorder = parseInt($(obj).css('border-bottom-width')) + parseInt($(obj).css('border-top-width')); if(isNaN(containerBorder)) containerBorder = 0; var containerPaddingLeft = parseInt($(obj).css('padding-left')); for(i=1;i<=o.inView;i++) {

$(obj).append('

');

$('#textholder'+randID+'_'+i).css({'left':(i-1)*(imgWidth+parseInt(o.padding)*2),'margin-left':parseInt(o.padding)+containerPaddingLeft,'margin-right':o.padding}); $('#textholder'+randID+'_'+i).height(imgHeight*o.textholderHeight).css({'backgroundColor':'#FFF','opacity':'0.5'});

html = '

'; html += '

';

$('#textholder'+randID+'_'+i).append(html); $('#minmax'+randID+'_'+i).hide(); $('#close'+randID+'_'+i).hide(); if(!o.autoHideCaptions) showtext($('li:eq('+i+') p', obj).html(),i); } var textholderPadding = parseInt($('#textholder'+randID+'_1').css('padding-left')) + parseInt($('#textholder'+randID+'_1').css('padding-right')); if (textholderPadding > 0) $('.textholder',obj).width(imgWidth-textholderPadding);

$('.close',obj).each(function(i){ $(this).click(function(){$('#textholder'+randID+'_'+(i+1)).animate({marginBottom:(-imgHeight*o.textholderHeight)-containerBorder-1+'px'},500)}); }); $('.minmax',obj).each(function(i){ $(this).click(function(){ if(parseInt($('#textholder'+randID+'_'+(i+1)).css('margin-bottom'))==0) { $('#textholder'+randID+'_'+(i+1)).animate({marginBottom:((-imgHeight*o.textholderHeight)-containerBorder+12)+'px'},500,function(){ $('#minmax'+randID+'_'+(i+1)).css('background-position','0 -16px')}); } else { $('#textholder'+randID+'_'+(i+1)).animate({marginBottom:'0px'},500,function(){ $('#minmax'+randID+'_'+(i+1)).css('background-position','0 -8px')}); }

}); });

function showminmax() { if(!autopilot) { $('.minmax',obj).fadeIn(250); $('.close',obj).fadeIn(250); } }

function hideCaption() {$('.textholder',obj).stop().animate({marginBottom:(-imgHeight*o.textholderHeight-containerBorder-1)+'px'},o.transitionSpeed)}

if(o.displayThumbnails) { function thumbclick(event) { target_num = this.id.split('_'); if(viewable[0] != target_num[1]) { status='pause'; $('#progress'+randID).stop().fadeOut(); clearTimeout(clearInt); $('#thumbs'+randID+' div').css({'cursor':'default'}).unbind('click'); autopilot = 0; setTimeout(function(){$('#play_pause_btn'+randID).css('background-position','0 -16px')},o.transitionSpeed); $('#play_pause_btn'+randID).unbind('click').bind('click',function(){forceStart();}); } if(target_num[1] > viewable[0]) { diff = target_num[1] - viewable[0]; moveLeft(diff); } if(target_num[1] < viewable[0]) { diff = viewable[0]- target_num[1]; moveRight(diff); } }

var viewable = []; var unviewable = [];

$(obj).after('

');

for(i=0;i<=numImages-1;i++) { thumb = $('img:eq('+(i+1)+')', obj).attr('src');

$('#thumbs'+randID).append('

'+(i+1)+'

');

if(i<=o.inView) $('#thumb'+randID+'_'+i).css({'border-color':'#ff0000'}); unviewable.push(i+1); }

for(i=1;i<=o.inView;i++) viewable.push(unviewable.shift());

thumb = $('img:first', obj).attr('src'); $('#thumb'+randID+'_'+numImages).css({'background-image':'url('+thumb+')'}); $('#thumbs'+randID+' div.thumb:not(:first)').css({opacity:.65});

$('#thumbs'+randID+' div.thumb').hover(function(){$(this).animate({'opacity':1},150)},function(){if(viewable[0]!=this.id.split('_')[1]) $(this).animate({'opacity':.65},250)});

$('#thumbs'+randID+' div').bind('click', thumbclick);

if(!o.displayThumbnailNumbers) $('#thumbs'+randID+' div').text(); if(!o.displayThumbnailBackground) $('#thumbs'+randID+' div').css({'background-image':'none'}); }

if(o.showControls) {

html = '

';

$(obj).append(html); var status = 'play'; $('#play_pause_btn'+randID).css('opacity',.5).hover(function(){$(this).animate({opacity:'1'},250)},function(){$(this).animate({opacity:'.5'},250)}); $('#play_pause_btn'+randID).click(function(){ status = (status == 'play') ? 'pause':'play'; (status=='play') ? forceStart():forcePause(); });

if(!o.prevNextInternal) { wrapID = $(obj).attr('id')+'Wrapper';

$(obj).wrap('

').css('margin','0 auto');

$('#'+wrapID).css('position','relative').width(($(obj).width()+40+parseInt($(obj).css('padding-left'))+parseInt($(obj).css('padding-right')))); }

arrowsTop = ((imgHeight/2)-15)+parseInt(o.padding);

html = '

'; html += '

';

(o.prevNextInternal) ? $(obj).append(html):$('#'+wrapID).append(html);

$('#btn_rt'+randID).css('opacity',.5).click(function(){ forcePrevNext('next'); }).hover(function(){$(this).animate({opacity:'1'},250)},function(){$(this).animate({opacity:'.5'},250)}); $('#btn_lt'+randID).css('opacity',.5).click(function(){ forcePrevNext('prev'); }).hover(function(){$(this).animate({opacity:'1'},250)},function(){$(this).animate({opacity:'.5'},250)});

if(o.autoHideControls && o.prevNextInternal) { function showcontrols() { $('#play_pause_btn'+randID).stop().animate({top:'3px',right:'3px'},250); $('#btn_rt'+randID).stop().animate({top:arrowsTop+'px',right:'2px'},250); $('#btn_lt'+randID).stop().animate({top:arrowsTop+'px',left:'2px'},250); } function hidecontrols() { $('#play_pause_btn'+randID).stop().animate({top:-16-containerBorder+'px',right:-16-containerBorder+'px'},250); $('#btn_rt'+randID).stop().animate({right:'-16px'},250); $('#btn_lt'+randID).stop().animate({left:'-16px'},250); } $(obj).hover(showcontrols,hidecontrols); hidecontrols(); } if(o.autoHideCaptions) { var isHover; function autoShowCap(){isHover=true;for(i=1;i<=o.inView;i++) showtext($('li:eq('+i+') p', obj).html(),i);} function autoHideCap(){isHover=false;hideCaption();} $(obj).hover(autoShowCap,autoHideCap); hideCaption(); } }

function preMove() { hideCaption();

if(o.showControls && o.prevNextInternal) { $('#play_pause_btn'+randID).fadeOut(200); $('#btn_lt'+randID).fadeOut(200); $('#btn_rt'+randID).fadeOut(200); } if(o.displayThumbnails) for(i=1;i<=numImages;i++) $('#thumb'+randID+'_'+i).css({'border-color':'#ccc'}).animate({'opacity': .65},500); }

if(autopilot) { var clearInt = setInterval(function(){moveLeft();},o.displayTime+o.transitionSpeed); if(o.displayProgressBar) startProgressBar(o.displayTime+o.transitionSpeed); } else {status='pause';$('#play_pause_btn'+randID).css({'background-position':'0 -16px'});} keyBind();

});

} }); })(jQuery); </script> <script type="text/javascript"> $(function(){

$('#Slideshow').infiniteCarousel(); });

</script>