"
Team:UCLondon/Templates/bottom-contentv2
From 2012e.igem.org
(Difference between revisions)
| (104 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; |
| + | padding-left:10px; | ||
| + | padding-right:10px; | ||
| + | } | ||
.right { | .right { | ||
float: left; | float: left; | ||
width: 30%; | 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 54: | 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 { | + | #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 98: | Line 125: | ||
.sponsor-logo img { display: block; margin-left: auto; margin-right:auto; } | .sponsor-logo img { display: block; margin-left: auto; margin-right:auto; } | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | .triangle-isosceles { | ||
| + | position:relative; | ||
| + | padding:1px; | ||
| + | margin:1em 0 3em; | ||
| + | border:2px solid #5a8f00; | ||
| + | color:#333; | ||
| + | background:#fff; | ||
| + | width:auto !important; | ||
| + | |||
| + | /* css3 */ | ||
| + | -webkit-border-radius:10px; | ||
| + | -moz-border-radius:10px; | ||
| + | border-radius:10px; | ||
| + | |||
| + | |||
| + | } | ||
| + | |||
| + | |||
| + | .triangle-isosceles:before { | ||
| + | content:""; | ||
| + | position:absolute; | ||
| + | bottom:-20px; /* value = - border-top-width - border-bottom-width */ | ||
| + | left:40px; /* controls horizontal position */ | ||
| + | border-width:20px 20px 0; | ||
| + | border-style:solid; | ||
| + | border-color:#5a8f00 transparent; | ||
| + | /* reduce the damage in FF3.0 */ | ||
| + | display:block; | ||
| + | width:0; | ||
| + | } | ||
| + | |||
| + | |||
| + | .triangle-isosceles:after { | ||
| + | content:""; | ||
| + | position:absolute; | ||
| + | bottom:-13px; /* value = - border-top-width - border-bottom-width */ | ||
| + | left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */ | ||
| + | border-width:13px 13px 0; | ||
| + | border-style:solid; | ||
| + | border-color:#fff transparent; | ||
| + | /* reduce the damage in FF3.0 */ | ||
| + | display:block; | ||
| + | width:0; | ||
| + | } | ||
| + | |||
| + | |||
| + | .triangle-isosceles p { | ||
| + | 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 111: | Line 219: | ||
$('#sponsor-slides').slides({ | $('#sponsor-slides').slides({ | ||
preload: true, | preload: true, | ||
| - | play: | + | play: 15000, |
pause: 2500, | pause: 2500, | ||
hoverPause: true, | hoverPause: true, | ||
generateNextPrev: false | generateNextPrev: false | ||
}); | }); | ||
| + | |||
| + | $('#test-slides').slides({ | ||
| + | preload: true, | ||
| + | play: 15000, | ||
| + | pause: 2500, | ||
| + | hoverPause: true, | ||
| + | generateNextPrev: false | ||
| + | }); | ||
| + | |||
| + | |||
| + | |||
}); | }); | ||
| + | |||
</script> | </script> | ||
| Line 129: | Line 249: | ||
</ul> | </ul> | ||
</div><!-- .footer-box left --> | </div><!-- .footer-box left --> | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
<div class="footer-box middle"> | <div class="footer-box middle"> | ||
<h3>Testimonials</h3> | <h3>Testimonials</h3> | ||
<div id="test-slides"> | <div id="test-slides"> | ||
| - | <div class="slides_container" style=" | + | <div class="slides_container" > |
| - | + | <div style="width:90%; margin:auto;"> | |
| - | + | <div class="testimonial triangle-isosceles" ><p style="overflow:auto; ">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.</p></div> | |
| - | <div class="test-author"></div> | + | <div class="test-author" style="margin:auto; width:95%; text-align:center;"><img src="https://dl.dropbox.com/u/45600819/igemewiki%20team%20photos/advisors/c.jpg" width="84"/><br/>Henry Taunt, PhD Candidate</div> |
</div> | </div> | ||
| - | </div> | + | |
| - | </div> | + | <div style="width:90%; margin:auto;"> |
| + | <div class="testimonial triangle-isosceles" ><p style="overflow:auto; ">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.</p></div> | ||
| + | <div class="test-author" style="margin:auto; width:95%; text-align:center;"><img src="https://dl.dropbox.com/u/45600819/igemewiki%20team%20photos/acknowledgements/r.jpg" width="84"/><br/>Dr Rosie Young</div> | ||
| + | </div> | ||
| + | </div><!-- slide container--> | ||
| + | </div><!-- test-slides--> | ||
</div><!-- .footer-box left --> | </div><!-- .footer-box left --> | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| Line 150: | 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 175: | 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() { | ||
var nHeight = ($('.footer-box.left').height() > $('.footer-box.right').height()) ? $('.footer-box.left').height() : $('.footer-box.right').height(); | var nHeight = ($('.footer-box.left').height() > $('.footer-box.right').height()) ? $('.footer-box.left').height() : $('.footer-box.right').height(); | ||
nHeight = (nHeight > $('.footer-box.middle').height() ) ? nHeight : $('.footer-box.middle').height(); | nHeight = (nHeight > $('.footer-box.middle').height() ) ? nHeight : $('.footer-box.middle').height(); | ||
| - | $('#footer-boxes').css('height', nHeight); | + | console.log('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
