Difference between revisions of "Team:HKUST-Rice/Notebook"

(Prototype team page)
 
Line 1: Line 1:
 
{{HKUST-Rice}}
 
{{HKUST-Rice}}
 
<html>
 
<html>
 +
<head>
 +
<script>
 +
//** Accordion Content script: By Dynamic Drive, at http://www.dynamicdrive.com
 +
//** Created: Jan 7th, 08'. Last updated: June 7th, 2010 to v1.9
 +
 +
//Version 1.9: June 7th, 2010':
 +
//**1) Ajax content support added, so a given header's content can be dynamically fetched from an external file and on demand.
 +
//**2) Optimized script performance by caching header and content container references
 +
 +
var ddaccordion={
 +
//ajaxloadingmsg: '<img src="http://www.dynamicdrive.com/dynamicindex17/loading2.gif" /><br />Loading Content...', //customize HTML to output while Ajax content is being fetched (if applicable)
 +
 +
headergroup: {}, //object to store corresponding header group based on headerclass value
 +
contentgroup: {}, //object to store corresponding content group based on headerclass value
 +
 +
preloadimages:function($images){
 +
$images.each(function(){
 +
var preloadimage=new Image()
 +
preloadimage.src=this.src
 +
})
 +
},
 +
 +
expandone:function(headerclass, selected){ //PUBLIC function to expand a particular header
 +
this.toggleone(headerclass, selected, "expand")
 +
},
 +
 +
collapseone:function(headerclass, selected){ //PUBLIC function to collapse a particular header
 +
this.toggleone(headerclass, selected, "collapse")
 +
},
 +
 +
expandall:function(headerclass){ //PUBLIC function to expand all headers based on their shared CSS classname
 +
var $headers=this.headergroup[headerclass]
 +
this.contentgroup[headerclass].filter(':hidden').each(function(){
 +
$headers.eq(parseInt($(this).attr('contentindex'))).trigger("evt_accordion")
 +
})
 +
},
 +
 +
collapseall:function(headerclass){ //PUBLIC function to collapse all headers based on their shared CSS classname
 +
var $headers=this.headergroup[headerclass]
 +
this.contentgroup[headerclass].filter(':visible').each(function(){
 +
$headers.eq(parseInt($(this).attr('contentindex'))).trigger("evt_accordion")
 +
})
 +
},
 +
 +
toggleone:function(headerclass, selected, optstate){ //PUBLIC function to expand/ collapse a particular header
 +
var $targetHeader=this.headergroup[headerclass].eq(selected)
 +
var $subcontent=this.contentgroup[headerclass].eq(selected)
 +
if (typeof optstate=="undefined" || optstate=="expand" && $subcontent.is(":hidden") || optstate=="collapse" && $subcontent.is(":visible"))
 +
$targetHeader.trigger("evt_accordion")
 +
},
 +
 +
ajaxloadcontent:function($targetHeader, $targetContent, config, callback){
 +
var ajaxinfo=$targetHeader.data('ajaxinfo')
 +
 +
function handlecontent(content){ //nested function
 +
if (content){ //if ajax content has loaded
 +
ajaxinfo.cacheddata=content //remember ajax content
 +
ajaxinfo.status="cached" //set ajax status to cached
 +
if ($targetContent.queue("fx").length==0){ //if this content isn't currently expanding or collapsing
 +
$targetContent.hide().html(content) //hide loading message, then set sub content's HTML to ajax content
 +
ajaxinfo.status="complete" //set ajax status to complete
 +
callback() //execute callback function- expand this sub content
 +
}
 +
}
 +
if (ajaxinfo.status!="complete"){
 +
setTimeout(function(){handlecontent(ajaxinfo.cacheddata)}, 100) //call handlecontent() again until ajax content has loaded (ajaxinfo.cacheddata contains data)
 +
}
 +
} //end nested function
 +
 +
if (ajaxinfo.status=="none"){ //ajax data hasn't been fetched yet
 +
$targetContent.html(this.ajaxloadingmsg)
 +
$targetContent.slideDown(config.animatespeed)
 +
ajaxinfo.status="loading" //set ajax status to "loading"
 +
$.ajax({
 +
url: ajaxinfo.url, //path to external menu file
 +
error:function(ajaxrequest){
 +
handlecontent('Error fetching content. Server Response: '+ajaxrequest.responseText)
 +
},
 +
success:function(content){
 +
content=(content=="")? " " : content //if returned content is empty, set it to "space" is content no longer returns false/empty (hasn't loaded yet)
 +
handlecontent(content)
 +
}
 +
})
 +
}
 +
else if (ajaxinfo.status=="loading")
 +
handlecontent(ajaxinfo.cacheddata)
 +
},
 +
 +
expandit:function($targetHeader, $targetContent, config, useractivated, directclick, skipanimation){
 +
var ajaxinfo=$targetHeader.data('ajaxinfo')
 +
if (ajaxinfo){ //if this content should be fetched via Ajax
 +
if (ajaxinfo.status=="none" || ajaxinfo.status=="loading")
 +
this.ajaxloadcontent($targetHeader, $targetContent, config, function(){ddaccordion.expandit($targetHeader, $targetContent, config, useractivated, directclick)})
 +
else if (ajaxinfo.status=="cached"){
 +
$targetContent.html(ajaxinfo.cacheddata)
 +
ajaxinfo.cacheddata=null
 +
ajaxinfo.status="complete"
 +
}
 +
}
 +
this.transformHeader($targetHeader, config, "expand")
 +
$targetContent.slideDown(skipanimation? 0 : config.animatespeed, function(){
 +
config.onopenclose($targetHeader.get(0), parseInt($targetHeader.attr('headerindex')), $targetContent.css('display'), useractivated)
 +
if (config.postreveal=="gotourl" && directclick){ //if revealtype is "Go to Header URL upon click", and this is a direct click on the header
 +
var targetLink=($targetHeader.is("a"))? $targetHeader.get(0) : $targetHeader.find('a:eq(0)').get(0)
 +
if (targetLink) //if this header is a link
 +
setTimeout(function(){location=targetLink.href}, 200) //ignore link target, as window.open(targetLink, targetLink.target) doesn't work in FF if popup blocker enabled
 +
}
 +
})
 +
},
 +
 +
collapseit:function($targetHeader, $targetContent, config, isuseractivated){
 +
this.transformHeader($targetHeader, config, "collapse")
 +
$targetContent.slideUp(config.animatespeed, function(){config.onopenclose($targetHeader.get(0), parseInt($targetHeader.attr('headerindex')), $targetContent.css('display'), isuseractivated)})
 +
},
 +
 +
transformHeader:function($targetHeader, config, state){
 +
$targetHeader.addClass((state=="expand")? config.cssclass.expand : config.cssclass.collapse) //alternate btw "expand" and "collapse" CSS classes
 +
.removeClass((state=="expand")? config.cssclass.collapse : config.cssclass.expand)
 +
if (config.htmlsetting.location=='src'){ //Change header image (assuming header is an image)?
 +
$targetHeader=($targetHeader.is("img"))? $targetHeader : $targetHeader.find('img').eq(0) //Set target to either header itself, or first image within header
 +
$targetHeader.attr('src', (state=="expand")? config.htmlsetting.expand : config.htmlsetting.collapse) //change header image
 +
}
 +
else if (config.htmlsetting.location=="prefix") //if change "prefix" HTML, locate dynamically added ".accordprefix" span tag and change it
 +
$targetHeader.find('.accordprefix').html((state=="expand")? config.htmlsetting.expand : config.htmlsetting.collapse)
 +
else if (config.htmlsetting.location=="suffix")
 +
$targetHeader.find('.accordsuffix').html((state=="expand")? config.htmlsetting.expand : config.htmlsetting.collapse)
 +
},
 +
 +
urlparamselect:function(headerclass){
 +
var result=window.location.search.match(new RegExp(headerclass+"=((\\d+)(,(\\d+))*)", "i")) //check for "?headerclass=2,3,4" in URL
 +
if (result!=null)
 +
result=RegExp.$1.split(',')
 +
return result //returns null, [index], or [index1,index2,etc], where index are the desired selected header indices
 +
},
 +
 +
getCookie:function(Name){
 +
var re=new RegExp(Name+"=[^;]+", "i") //construct RE to search for target name/value pair
 +
if (document.cookie.match(re)) //if cookie found
 +
return document.cookie.match(re)[0].split("=")[1] //return its value
 +
return null
 +
},
 +
 +
setCookie:function(name, value){
 +
document.cookie = name + "=" + value + "; path=/"
 +
},
 +
 +
init:function(config){
 +
document.write('<style type="text/css">\n')
 +
document.write('.'+config.contentclass+'{display: none}\n') //generate CSS to hide contents
 +
document.write('a.hiddenajaxlink{display: none}\n') //CSS class to hide ajax link
 +
document.write('<\/style>')
 +
jQuery(document).ready(function($){
 +
ddaccordion.urlparamselect(config.headerclass)
 +
var persistedheaders=ddaccordion.getCookie(config.headerclass)
 +
ddaccordion.headergroup[config.headerclass]=$('.'+config.headerclass) //remember header group for this accordion
 +
ddaccordion.contentgroup[config.headerclass]=$('.'+config.contentclass) //remember content group for this accordion
 +
var $headers=ddaccordion.headergroup[config.headerclass]
 +
var $subcontents=ddaccordion.contentgroup[config.headerclass]
 +
config.cssclass={collapse: config.toggleclass[0], expand: config.toggleclass[1]} //store expand and contract CSS classes as object properties
 +
config.revealtype=config.revealtype || "click"
 +
config.revealtype=config.revealtype.replace(/mouseover/i, "mouseenter")
 +
if (config.revealtype=="clickgo"){
 +
config.postreveal="gotourl" //remember added action
 +
config.revealtype="click" //overwrite revealtype to "click" keyword
 +
}
 +
if (typeof config.togglehtml=="undefined")
 +
config.htmlsetting={location: "none"}
 +
else
 +
config.htmlsetting={location: config.togglehtml[0], collapse: config.togglehtml[1], expand: config.togglehtml[2]} //store HTML settings as object properties
 +
config.oninit=(typeof config.oninit=="undefined")? function(){} : config.oninit //attach custom "oninit" event handler
 +
config.onopenclose=(typeof config.onopenclose=="undefined")? function(){} : config.onopenclose //attach custom "onopenclose" event handler
 +
var lastexpanded={} //object to hold reference to last expanded header and content (jquery objects)
 +
var expandedindices=ddaccordion.urlparamselect(config.headerclass) || ((config.persiststate && persistedheaders!=null)? persistedheaders : config.defaultexpanded)
 +
if (typeof expandedindices=='string') //test for string value (exception is config.defaultexpanded, which is an array)
 +
expandedindices=expandedindices.replace(/c/ig, '').split(',') //transform string value to an array (ie: "c1,c2,c3" becomes [1,2,3]
 +
if (expandedindices.length==1 && expandedindices[0]=="-1") //check for expandedindices value of [-1], indicating persistence is on and no content expanded
 +
expandedindices=[]
 +
if (config["collapseprev"] && expandedindices.length>1) //only allow one content open?
 +
expandedindices=[expandedindices.pop()] //return last array element as an array (for sake of jQuery.inArray())
 +
if (config["onemustopen"] && expandedindices.length==0) //if at least one content should be open at all times and none are, open 1st header
 +
expandedindices=[0]
 +
$headers.each(function(index){ //loop through all headers
 +
var $header=$(this)
 +
if (/(prefix)|(suffix)/i.test(config.htmlsetting.location) && $header.html()!=""){ //add a SPAN element to header depending on user setting and if header is a container tag
 +
$('<span class="accordprefix"></span>').prependTo(this)
 +
$('<span class="accordsuffix"></span>').appendTo(this)
 +
}
 +
$header.attr('headerindex', index+'h') //store position of this header relative to its peers
 +
$subcontents.eq(index).attr('contentindex', index+'c') //store position of this content relative to its peers
 +
var $subcontent=$subcontents.eq(index)
 +
var $hiddenajaxlink=$subcontent.find('a.hiddenajaxlink:eq(0)') //see if this content should be loaded via ajax
 +
if ($hiddenajaxlink.length==1){
 +
$header.data('ajaxinfo', {url:$hiddenajaxlink.attr('href'), cacheddata:null, status:'none'}) //store info about this ajax content inside header
 +
}
 +
var needle=(typeof expandedindices[0]=="number")? index : index+'' //check for data type within expandedindices array- index should match that type
 +
if (jQuery.inArray(needle, expandedindices)!=-1){ //check for headers that should be expanded automatically (convert index to string first)
 +
ddaccordion.expandit($header, $subcontent, config, false, false, !config.animatedefault) //3rd last param sets 'isuseractivated' parameter, 2nd last sets isdirectclick, last sets skipanimation param
 +
lastexpanded={$header:$header, $content:$subcontent}
 +
}  //end check
 +
else{
 +
$subcontent.hide()
 +
config.onopenclose($header.get(0), parseInt($header.attr('headerindex')), $subcontent.css('display'), false) //Last Boolean value sets 'isuseractivated' parameter
 +
ddaccordion.transformHeader($header, config, "collapse")
 +
}
 +
})
 +
$headers.bind("evt_accordion", function(e, isdirectclick){ //assign CUSTOM event handler that expands/ contacts a header
 +
var $subcontent=$subcontents.eq(parseInt($(this).attr('headerindex'))) //get subcontent that should be expanded/collapsed
 +
if ($subcontent.css('display')=="none"){
 +
ddaccordion.expandit($(this), $subcontent, config, true, isdirectclick) //2nd last param sets 'isuseractivated' parameter
 +
if (config["collapseprev"] && lastexpanded.$header && $(this).get(0)!=lastexpanded.$header.get(0)){ //collapse previous content?
 +
ddaccordion.collapseit(lastexpanded.$header, lastexpanded.$content, config, true) //Last Boolean value sets 'isuseractivated' parameter
 +
}
 +
lastexpanded={$header:$(this), $content:$subcontent}
 +
}
 +
else if (!config["onemustopen"] || config["onemustopen"] && lastexpanded.$header && $(this).get(0)!=lastexpanded.$header.get(0)){
 +
ddaccordion.collapseit($(this), $subcontent, config, true) //Last Boolean value sets 'isuseractivated' parameter
 +
}
 +
})
 +
$headers.bind(config.revealtype, function(){
 +
if (config.revealtype=="mouseenter"){
 +
clearTimeout(config.revealdelay)
 +
var headerindex=parseInt($(this).attr("headerindex"))
 +
config.revealdelay=setTimeout(function(){ddaccordion.expandone(config["headerclass"], headerindex)}, config.mouseoverdelay || 0)
 +
}
 +
else{
 +
$(this).trigger("evt_accordion", [true]) //last parameter indicates this is a direct click on the header
 +
return false //cancel default click behavior
 +
}
 +
})
 +
$headers.bind("mouseleave", function(){
 +
clearTimeout(config.revealdelay)
 +
})
 +
config.oninit($headers.get(), expandedindices)
 +
$(window).bind('unload', function(){ //clean up and persist on page unload
 +
$headers.unbind()
 +
var expandedindices=[]
 +
$subcontents.filter(':visible').each(function(index){ //get indices of expanded headers
 +
expandedindices.push($(this).attr('contentindex'))
 +
})
 +
if (config.persiststate==true && $headers.length>0){ //persist state?
 +
expandedindices=(expandedindices.length==0)? '-1c' : expandedindices //No contents expanded, indicate that with dummy '-1c' value?
 +
ddaccordion.setCookie(config.headerclass, expandedindices)
 +
}
 +
})
 +
})
 +
}
 +
}
 +
//preload any images defined inside ajaxloadingmsg variable
 +
ddaccordion.preloadimages(jQuery(ddaccordion.ajaxloadingmsg).filter('img'))
 +
</script>
 +
 +
<script type="text/javascript">
 +
/***********************************************
 +
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
 +
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
 +
* This notice must stay intact for legal use
 +
***********************************************/
 +
//Initialize 2nd demo:
 +
ddaccordion.init({
 +
headerclass: "technology", //Shared CSS class name of headers group
 +
contentclass: "thelanguage", //Shared CSS class name of contents group
 +
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
 +
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
 +
collapseprev: false, //Collapse previous content (so only one open at any time)? true/false
 +
defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
 +
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
 +
animatedefault: false, //Should contents open by default be animated into view?
 +
persiststate: false, //persist state of opened contents within browser session?
 +
toggleclass: ["closedlanguage", "openlanguage"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
 +
togglehtml: ["suffix", " <small><small>[Expand]</small></small>", " <small><small>[Collapse]</small></small>"], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
 +
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
 +
oninit:function(expandedindices){ //custom code to run when headers have initalized
 +
//do nothing
 +
},
 +
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
 +
//do nothing
 +
}
 +
}
 +
 +
</script>
 +
 +
<style type="text/css">
 +
div.asoContent {
 +
  padding: 20px;
 +
  z-index: 1;
 +
  background: white;
 +
  position: relative;
 +
  margin-right: auto;
 +
  margin-left: auto;
 +
  margin-top: 12px;
 +
  margin-bottom: 12px;
 +
  width: 1000px;
 +
  -webkit-box-shadow: 0px 0px 12px 2px rgba(0,0,0,0.75);
 +
  -moz-box-shadow: 0px 0px 12px 2px rgba(0,0,0,0.75);
 +
  box-shadow: 0px 0px 12px 2px rgba(30,123,148,0.75);
 +
}
 +
 +
.technology{ /*header of 2nd demo*/
 +
  cursor: pointer;
 +
  color: rgb(192,0,0) !important;
 +
  border-bottom: solid rgb(192,0,0) 2px !important;
 +
  text-shadow: 0px 0px 1px #000000 !important;
 +
  font-size: 24px !important;
 +
  padding-bottom: 6px !important;
 +
  margin-top: 12px !important;
 +
  margin: 18px ;
 +
  margin-left: 70px !important;
 +
}
 +
div.thelanguage {
 +
  float: none;
 +
  margin-top:30px
 +
  border-radius: 3px;
 +
  padding: 8px;
 +
  margin: 14px;
 +
  width: 800px;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
 +
}
 +
 +
div.thelanguage img {
 +
  width: 50%;
 +
  border: solid rgb(30,123,148) 4px;
 +
  height: 50%;
 +
  margin-bottom: 4px;
 +
  display: block;
 +
}
 +
 +
a.collapseLink {
 +
  color: rgb(192,0,0) !important;
 +
  text-shadow: 0px 0px 1px #000000 !important;
 +
  margin: 12px !important; 
 +
  font-size: 18px !important; 
 +
  text-decoration:none
 +
}
 +
</style>
 +
 +
</head>
 +
 +
<body>
 +
<div class="asoContent">
 +
<h1>Notebook</h1>
 +
 +
<center><p style="font-size:1.3em;color: rgb(192,0,0) !important;  text-shadow: 0px 0px 1px #000000 !important;};">
 +
<a href="#" onclick="ddaccordion.collapseall('technology'); return false" style="color: rgb(192,0,0) !important; 
 +
text-shadow: 0px 0px 1px #000000 !important;  margin: 12px !important;  font-size: 18px !important;  text-decoration: none;  };
 +
">[Collapse all]</a>  |
 +
<a href="#" onclick="ddaccordion.expandall('technology'); return false" style="color: rgb(192,0,0) !important; 
 +
text-shadow: 0px 0px 1px #000000 !important;  margin: 12px !important;  font-size: 18px !important;  text-decoration: none;  };
 +
">[Expand all]</a></p></center>
 +
 +
<div class="technology">Week 1: (23-30 June)</div>
 +
<div class="thelanguage">
 +
<p>To check our cell’s transformation efficiency 5 bacteria plates are transformed with different concentrated plasmids(0,5-5-10-20-50 pg/µl) </p>
 +
<p>There was no bacteria mass on plates,this results refer that our bacterias are not good enough foe engineering</p>
 +
<p>Then we prepared new competent cells for our Project and we ordered our primers .</p>
 +
 +
 +
<p style="text-align:right;font-size:1.3em;"><a href="#" class="collapseLink" onClick="ddaccordion.collapseone('technology', 0); return false">[Collapse]</a></p>
 +
</div>
 +
 +
</body>
 +
<html>
 +
 +
<!--<html>
  
 
<h2>Notebook</h2>
 
<h2>Notebook</h2>
Line 26: Line 391:
  
 
</div>
 
</div>
−
</html>
+
</html>-->

Revision as of 07:28, 19 July 2015

Notebook

[Collapse all] | [Expand all]

Week 1: (23-30 June)

To check our cell’s transformation efficiency 5 bacteria plates are transformed with different concentrated plasmids(0,5-5-10-20-50 pg/µl)

There was no bacteria mass on plates,this results refer that our bacterias are not good enough foe engineering

Then we prepared new competent cells for our Project and we ordered our primers .

[Collapse]