"
Team:UCLondon/Templates/bottom-contentv2
From 2012e.igem.org
(Difference between revisions)
| (67 intermediate revisions not shown) | |||
| Line 22: | Line 22: | ||
border-width: 1px; | border-width: 1px; | ||
padding: 0 10px 10px 10px; | padding: 0 10px 10px 10px; | ||
| + | padding-right:1px; | ||
// height: 60px; | // height: 60px; | ||
| Line 33: | Line 34: | ||
.left { | .left { | ||
float:left; | float:left; | ||
| - | width: | + | width: 20%; |
clear: left; | clear: left; | ||
} | } | ||
| - | .middle { float:left; width: | + | .middle { float:left; width:45%; border-left-color: rgb(230, 230, 230); |
border-left-style: solid; | border-left-style: solid; | ||
border-left-width: 1px; | border-left-width: 1px; | ||
| Line 47: | Line 48: | ||
.right { | .right { | ||
float: left; | float: left; | ||
| - | width: | + | width: 30%; |
| - | padding-left: | + | padding-left: 5px; |
border-left-color: rgb(230, 230, 230); | border-left-color: rgb(230, 230, 230); | ||
border-left-style: solid; | border-left-style: solid; | ||
| Line 57: | Line 58: | ||
#sponsor-slides .slides_container { | #sponsor-slides .slides_container { | ||
| - | width: | + | width:100%; |
margin:auto; | margin:auto; | ||
display:none; | display:none; | ||
| + | left:10px; | ||
// overflow: none; | // overflow: none; | ||
} | } | ||
#sponsor-slides .slides_container div { | #sponsor-slides .slides_container div { | ||
| - | width: | + | width:100%; |
| - | height: | + | height:200px; |
display:block; | display:block; | ||
} | } | ||
| - | #sponsor-slides .pagination { margin-top: | + | #sponsor-slides .pagination { margin-top: 1px; width:30px; margin:auto; } |
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | #test-slides .slides_container { | ||
| + | width:100%; | ||
| + | height:200px; | ||
| + | margin:auto; | ||
| + | display:none; | ||
| + | overflow: auto; | ||
| + | } | ||
| + | |||
| + | #test-slides .slides_container div, #test-slides .slides_container div.slide { | ||
| + | width:100%; | ||
| + | height:200px; | ||
| + | display:block; | ||
| + | } | ||
| + | |||
| + | #test-slides .pagination { margin-top: 1px; } | ||
| + | |||
/* sponsor grid */ | /* sponsor grid */ | ||
| - | #sponsor-slides { width: 100%; margin: auto; } | + | #sponsor-slides { width: 100%; margin-left: auto; } |
| - | .sponsor-list { padding-left:0; width: | + | .sponsor-list { padding-left:0; width: 85%; } |
.sponsor-list li { | .sponsor-list li { | ||
border: 1px solid silver; | border: 1px solid silver; | ||
| Line 107: | Line 131: | ||
.triangle-isosceles { | .triangle-isosceles { | ||
| - | + | position:relative; | |
| - | padding: | + | padding:1px; |
margin:1em 0 3em; | margin:1em 0 3em; | ||
| - | border: | + | border:2px solid #5a8f00; |
color:#333; | color:#333; | ||
background:#fff; | background:#fff; | ||
| Line 119: | Line 143: | ||
-moz-border-radius:10px; | -moz-border-radius:10px; | ||
border-radius:10px; | border-radius:10px; | ||
| + | |||
| + | |||
} | } | ||
| Line 153: | Line 179: | ||
height:60px; | height:60px; | ||
} | } | ||
| + | |||
| + | .testimonial, #test-slides .slides_container .triangle-isosceles { width:360px !important; height:70px !important; } | ||
| + | .test-author { position:relative; top: -15px; } | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | #shadow { | ||
| + | |||
| + | background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from( rgba(255, 255, 255, 1) ), to( rgb(249, 249, 249) ) ); | ||
| + | background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 1), rgb(249, 249, 249) ); | ||
| + | background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 1), rgb(249, 249, 249) ); | ||
| + | background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 1), rgb(249, 249, 249) ); | ||
| + | background-image: -o-linear-gradient(top, rgba(255, 255, 255, 1), rgb(249, 249, 249) ); | ||
| + | background-image: linear-gradient(top, rgba(255, 255, 255, 1), rgb(249, 249, 249) ); | ||
| + | |||
| + | |||
| + | box-shadow: 1px 2px 5px 5px #888; | ||
| + | border-radius: 5px; | ||
| + | |||
| + | position:fixed; | ||
| + | height: 400px; | ||
| + | width:50%; | ||
| + | margin:auto; | ||
| + | z-index: 999999999999999999; | ||
| + | } | ||
| + | |||
</style> | </style> | ||
| Line 166: | Line 219: | ||
$('#sponsor-slides').slides({ | $('#sponsor-slides').slides({ | ||
preload: true, | preload: true, | ||
| - | play: | + | play: 15000, |
pause: 2500, | pause: 2500, | ||
hoverPause: true, | hoverPause: true, | ||
| Line 174: | Line 227: | ||
$('#test-slides').slides({ | $('#test-slides').slides({ | ||
preload: true, | preload: true, | ||
| - | play: | + | play: 15000, |
pause: 2500, | pause: 2500, | ||
hoverPause: true, | hoverPause: true, | ||
| Line 232: | Line 285: | ||
<ul class="sponsor-list"> | <ul class="sponsor-list"> | ||
<a href="http://www.clcbio.com" class="sponsor-logo"><li><img src="http://www.clcbio.com/fileadmin/template/main/images/clcbio_logo_no_mirror.png"/></li></a> | <a href="http://www.clcbio.com" class="sponsor-logo"><li><img src="http://www.clcbio.com/fileadmin/template/main/images/clcbio_logo_no_mirror.png"/></li></a> | ||
| - | <a href=" | + | <a href="#" class="sponsor-logo nothing" onclick="sponsoring()"><li>click to sponsor!</li></a> |
| - | <a href=" | + | <a href="#" class="sponsor-logo nothing" onclick="sponsoring()"><li>click to sponsor!</li></a> |
| - | <a href=" | + | <a href="#" class="sponsor-logo nothing" onclick="sponsoring()"><li>click to sponsor!</li></a> |
</ul> | </ul> | ||
</div> | </div> | ||
<div> | <div> | ||
<ul class="sponsor-list"> | <ul class="sponsor-list"> | ||
| - | <a href=" | + | <a href="#" class="sponsor-logo nothing" onclick="sponsoring()"><li>click to sponsor!</li></a> |
| - | <a href=" | + | <a href="#" class="sponsor-logo nothing" onclick="sponsoring()"><li>click to sponsor!</li></a> |
| - | <a href=" | + | <a href="#" class="sponsor-logo nothing" onclick="sponsoring()"><li>click to sponsor!</li></a> |
| - | <a href=" | + | <a href="#" class="sponsor-logo nothing" onclick="sponsoring()"><li>click to sponsor!</li></a> |
</ul> | </ul> | ||
</div> | </div> | ||
| Line 253: | Line 306: | ||
| + | <div id="shadow" style="display:none;" > | ||
| + | <div id="close-box" style="background:url(http://db.tt/N9CUKlnO) no-repeat 0 0; height:35px; width:35px; cursor:pointer;"></div> | ||
| + | |||
| + | <div id="box-content" style="width:95%; height:95%; margin:auto;"> | ||
| + | <div id="load" style="background:url(http://db.tt/UTRvh0fQ) no-repeat center center; height:100px; width:100px; margin:auto;"></div> | ||
| + | </div> | ||
| + | </div> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
| + | |||
| + | var loading = ""; | ||
$(document).ready(function() { | $(document).ready(function() { | ||
| Line 262: | Line 324: | ||
console.log('height' + nHeight); | console.log('height' + nHeight); | ||
//$('#footer-boxes').css('height', nHeight); | //$('#footer-boxes').css('height', nHeight); | ||
| - | + | /* $('.footer-box.left').outerHeight(nHeight); | |
$('.footer-box.middle').outerHeight(nHeight); | $('.footer-box.middle').outerHeight(nHeight); | ||
$('.footer-box.right').outerHeight(nHeight); | $('.footer-box.right').outerHeight(nHeight); | ||
*/ | */ | ||
| + | |||
}); | }); | ||
| + | |||
| + | |||
| + | jQuery.fn.center = function () { | ||
| + | var w = $(window); | ||
| + | var b = $('body'); | ||
| + | var mt = w.scrollTop() + (w.height() > b.height()) ? 0: ( -1 *Math.abs( w.outerHeight() - b.outerHeight() )/2 ); | ||
| + | this.css({ | ||
| + | 'position':'fixed', | ||
| + | 'left': '50%', | ||
| + | 'margin-left': 0 - (this.width() / 2), | ||
| + | 'top': '50%', | ||
| + | 'margin-top': (0 - (this.height() / 2)) | ||
| + | }); | ||
| + | return this; | ||
| + | } | ||
| + | |||
| + | |||
| + | var openBox = function () { | ||
| + | $('#shadow').center(); | ||
| + | |||
| + | var input = '<form method="post" id="cntctfrm_contact_form" action="http://codonusageoptimizer.org/contact/" enctype="multipart/form-data"><div style="text-align: left; padding-top: 5px;"><label for="cntctfrm_contact_name">Name:<span class="required"> *</span></label></div><div style="text-align: left;"><input class="text" type="text" size="40" value="" name="cntctfrm_contact_name" id="cntctfrm_contact_name" style="text-align: left; margin: 0;"></div><div style="text-align: left;"><label for="cntctfrm_contact_email">E-Mail Address:<span class="required">*</span></label></div><div style="text-align: left;"><input class="text" type="text" size="40" value="" name="cntctfrm_contact_email" id="cntctfrm_contact_email" style="text-align: left; margin: 0;"></div><div style="text-align: left;"><label for="cntctfrm_contact_subject">Subject:<span class="required"> *</span></label></div><div style="text-align: left;"><input class="text" type="text" size="40" value="" name="cntctfrm_contact_subject" id="cntctfrm_contact_subject" style="text-align: left; margin: 0;"></div><div style="text-align: left;"><label for="cntctfrm_contact_message">Message:<span class="required"> *</span></label></div><div style="text-align: left;"><textarea rows="5" cols="30" name="cntctfrm_contact_message" id="cntctfrm_contact_message"></textarea></div><div style="text-align: left;"><label for="cntctfrm_contact_attachment">Attachment:</label><div style="text-align: left;"><input type="file" name="cntctfrm_contact_attachment" id="cntctfrm_contact_attachment"><label style="font-size:10px;"><br>You can attach files of the following types: html, txt, css, gif, png, jpeg, jpg, tiff, bmp, ai, eps, ps, rtf, pdf, doc, docx, zip, rar, wav, mp3, ppt</label></div></div><div style="text-align: left; padding-top: 8px;"><input type="hidden" value="send" name="cntctfrm_contact_action"><input type="hidden" value="Version: 3.13"><input type="submit" value="Submit" style="cursor: pointer; margin: 0pt; text-align: center;margin-bottom:10px;"> </div></form>'; | ||
| + | |||
| + | |||
| + | $('#shadow').toggle('slow', function() { | ||
| + | $(this).children('#box-content').html(input); | ||
| + | }); | ||
| + | |||
| + | |||
| + | |||
| + | return false; | ||
| + | } | ||
| + | |||
| + | var closeBox = function() { | ||
| + | $('#shadow').toggle('slow', function() { | ||
| + | $(this).children('#box-content').html(loading); | ||
| + | }); | ||
| + | } | ||
| + | |||
| + | |||
| + | |||
| - | + | $(document).ready(function(event) { | |
| + | loading = $('#load').parent().html(); | ||
| + | |||
| + | $('body').off('click', '.nothing', openBox); | ||
| + | $('body').on('click', '.nothing', openBox); | ||
| + | |||
| + | $('body').off('click', '#close-box', closeBox); | ||
| + | $('body').on('click', '#close-box', closeBox); | ||
| + | |||
| + | }); | ||
| + | |||
| + | |||
| + | |||
</script> | </script> | ||
Latest revision as of 17:20, 19 September 2012
Testimonials
I am reaching the end of my PhD on algal molecular biology and have found the CUO extremely useful. To date my use of it has fallen into three categories. My initial use of it was for the assisted design or redesign of several recombinant genes for expression in the Chlamydomonas reinhardtii chloroplast, a task which it has excelled at. Further to this I have used the program extensively for the analysis of previously expressed genes in the C. reinhardtii chloroplast to evaluate trends in expressing and non-expressing sub-sets. The CUO has also proven to be a very powerful tool for the study of the codon and codon pair usage in genes native to the C. reinhardtii chloroplast, a task I would have been unable to complete without this program.
Henry Taunt, PhD Candidate
I have used CUO to optimize several gene and tag sequences for expression in the Chlamydomonas chloroplast. The advantage of this program lies in its integration of codon usage with codon pairing optimization, using data from highly expressed genes. The interface is professional, flexible and easy to navigate and the manual provides clear instructions. Whilst we are still gathering data, early indications are that the program performs very well in redesigning genes for optimal expression.
Dr Rosie Young
