Team:Leicester/April2012

From 2012.igem.org

(Difference between revisions)
(Created page with "{{Template:Leicester}} {{Template:LeicesterBG}} <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <sc...")
Line 1: Line 1:
-
{{Template:Leicester}}
+
<html xmlns="http://www.w3.org/1999/xhtml">
-
{{Template:LeicesterBG}}
+
-
<html>
+
<head>
<head>
 +
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 +
<title>iGEM Leicester Test Page 2012</title>
 +
<link href="http://neotropicalmoths.com/iGEMWiki/menuitems.css" rel="stylesheet" type="text/css" />
 +
<link href="http://neotropicalmoths.com/iGEMWiki/bodystyle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
-
<script type="text/javascript">
+
<script type="text/javascript" src="http://neotropicalmoths.com/iGEMWiki/ddaccordion.js">
-
//idea from http://dynamicdrive.com
+
-
 
+
-
var ddaccordion={
+
-
ajaxloadingmsg: '<img src="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, scrolltoheader){ //PUBLIC function to expand a particular header
+
-
this.toggleone(headerclass, selected, "expand", scrolltoheader)
+
-
},
+
-
 
+
-
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, scrolltoheader){ //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", [false, scrolltoheader])
+
-
},
+
-
 
+
-
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, scrolltoheader){
+
-
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 (scrolltoheader){
+
-
var sthdelay=(config["collapseprev"])? 20 : 0
+
-
clearTimeout(config.sthtimer)
+
-
config.sthtimer=setTimeout(function(){ddaccordion.scrollToHeader($targetHeader)}, sthdelay)
+
-
}
+
-
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 + (scrolltoheader? 400+sthdelay : 0) ) //ignore link target, as window.open(targetLink, targetLink.target) doesn't work in FF if popup blocker enabled
+
-
}
+
-
})
+
-
},
+
-
 
+
-
scrollToHeader:function($targetHeader){
+
-
ddaccordion.$docbody.stop().animate({scrollTop: $targetHeader.offset().top}, 400)
+
-
},
+
-
 
+
-
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').empty().append((state=="expand")? config.htmlsetting.expand : config.htmlsetting.collapse)
+
-
else if (config.htmlsetting.location=="suffix")
+
-
$targetHeader.find('.accordsuffix').empty().append((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
+
-
ddaccordion.$docbody=(window.opera)? (document.compatMode=="CSS1Compat"? jQuery('html') : jQuery('body')) : jQuery('html,body')
+
-
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")
+
-
}
+
-
})
+
-
//if (config["scrolltoheader"] && lastexpanded.$header)
+
-
//ddaccordion.scrollToHeader(lastexpanded.$header)
+
-
$headers.bind("evt_accordion", function(e, isdirectclick, scrolltoheader){ //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, false, scrolltoheader) //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.scrolltoheader)}, config.mouseoverdelay || 0)
+
-
}
+
-
else{
+
-
$(this).trigger("evt_accordion", [true, config.scrolltoheader]) //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'))
+
 +
/*
 +
* Insprired by dynamicdrive.com
 +
*/
</script>
</script>
Line 293: Line 43:
font-size: 12px;
font-size: 12px;
font-weight: bold;
font-weight: bold;
-
}
 
-
 
-
 
}
}
</style>
</style>
-
 
<script type="text/javascript">
<script type="text/javascript">
-
 
ddaccordion.init({
ddaccordion.init({
headerclass: "calendar", //Shared CSS class name of headers group
headerclass: "calendar", //Shared CSS class name of headers group
contentclass: "day", //Shared CSS class name of contents group
contentclass: "day", //Shared CSS class name of contents group
-
revealtype: "click",  
+
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
-
mouseoverdelay: 200,  
+
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
-
collapseprev: true,  
+
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
-
defaultexpanded: [0],  
+
defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
-
onemustopen: false,  
+
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
-
animatedefault: false,  
+
animatedefault: false, //Should contents open by default be animated into view?
-
scrolltoheader: false,  
+
scrolltoheader: false, //scroll to header each time after it's been expanded by the user?
-
persiststate: true,  
+
persiststate: true, //persist state of opened contents within browser session?
-
toggleclass: ["", "day"],  
+
toggleclass: ["", "open"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
-
animatespeed: "fast",  
+
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
-
oninit:function(expandedindices){  
+
oninit:function(expandedindices){ //custom code to run when headers have initalized
//do nothing
//do nothing
},
},
-
onopenclose:function(header, index, state, isuseractivated){  
+
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
//do nothing
}
}
})
})
 +
</script>
</script>
 +
</head>
</head>
 +
<body>
<body>
-
<p>&nbsp;</p>
+
<div id="container">
-
<h3 class="calendar"> &nbsp; &nbsp; Sunday 1st April 2012</h3>
+
  <div id="banner"></div>
 +
  <div id="menu" align="center">
 +
    <ul class="nav" id="nav-one">
 +
      <li> <a href="/Team:Leicester">Home</a></li>
 +
      <li> <a href="/Team:Leicester/Team">Team</a></li>
 +
      <li> <a href="/Team:Leicester/Project">Project</a></li>
 +
      <li> <a href="/Team:Leicester/Chemistry">Chemistry</a></li>
 +
      <li> <a href="/Team:Leicester/Parts">Parts Submitted to the Registry</a></li>
 +
      <li> <a href="/Team:Leicester/Modeling">Modeling</a></li>
 +
      <li> <a href="/Team:Leicester/Notebook">Notebook</a>
 +
      <ul>
 +
        <li> <a href="/Team:Leicester/April2012">April</a></li>
 +
        <li> <a href="/Team:Leicester/May2012">May</a></li>
 +
        <li> <a href="/Team:Leicester/June2012">June</a></li>
 +
        <li> <a href="/Team:Leicester/July2012">July</a></li>
 +
        <li> <a href="/Team:Leicester/August2012">August</a></li>
 +
        <li> <a href="/Team:Leicester/September2012">Semtember</a></li>
 +
        <li> <a href="/Team:Leicester/October2012">October</a></li>
 +
        </ul></li>
 +
      <li> <a href="/Team:Leicester/Safety">Safety</a></li>
 +
      <li> <a href="/Team:Leicester/Attributions">Attributions</a></li>
 +
      <li> <a href="/Team:Leicester/Attributions">Bibliography</a></li>
 +
    </ul>
 +
  </div>
 +
  <div id="contentArea">
 +
 
 +
  <h3 class="calendar"> &nbsp; &nbsp; Sunday 1st April 2012</h3>
<div class="day">
<div class="day">
No entry for this date.
No entry for this date.
Line 479: Line 253:
No entry for this date.
No entry for this date.
</div>
</div>
-
 
+
   
 +
<p><a href="/wiki/index.php?title=Team:Leicester/April2012&amp;action=edit">[edit]</a></p>
 +
  </div>
 +
 
 +
 
 +
</div>
 +
</div>
</body>
</body>
</html>
</html>

Revision as of 15:41, 26 July 2012

iGEM Leicester Test Page 2012

    Sunday 1st April 2012

No entry for this date.

    Monday 2nd April 2012

No entry for this date.

    Tuesday 3rd April 2012

No entry for this date.

    Wednesday 4th April 2012

No entry for this date.

    Thursday 5th April 2012

No entry for this date.

    Friday 6th April 2012

No entry for this date.

    Saturday 7th April 2012

No entry for this date.

    Sunday 8th April 2012

No entry for this date.

    Monday 9th April 2012

No entry for this date.

    Tuesday 10th April 2012

No entry for this date.

    Wednesday 11th April 2012

No entry for this date.

    Thursday 12th April 2012

No entry for this date.

    Friday 13th April 2012

No entry for this date.

    Saturday 14th April 2012

No entry for this date.

    Sunday 15th April 2012

No entry for this date.

    Monday 16th April 2012

No entry for this date.

    Tuesday 17th April 2012

No entry for this date.

    Wednesday 18th April 2012

No entry for this date.

    Thursday 19th April 2012

No entry for this date.

    Friday 20th April 2012

No entry for this date.

    Saturday 21st April 2012

No entry for this date.

    Sunday 22nd April 2012

No entry for this date.

    Monday 23rd April 2012

No entry for this date.

    Tuesday 24th April 2012

No entry for this date.

    Wednesday 25th April 2012

No entry for this date.

    Thursday 26th April 2012

No entry for this date.

    Friday 27th April 2012

No entry for this date.

    Saturday 28th April 2012

No entry for this date.

    Sunday 29th April 2012

No entry for this date.

    Monday 30th April 2012

No entry for this date.

[edit]