Team:UCLondon/Templates/bottom-contentv2
From 2012e.igem.org
(Difference between revisions)
(72 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 48: | Line 49: | ||
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 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 { width: | + | #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, | ||
generateNextPrev: false | generateNextPrev: false | ||
}); | }); | ||
+ | |||
+ | $('#test-slides').slides({ | ||
+ | preload: true, | ||
+ | play: 15000, | ||
+ | pause: 2500, | ||
+ | hoverPause: true, | ||
+ | generateNextPrev: false | ||
+ | }); | ||
+ | |||
+ | |||
+ | |||
}); | }); | ||
Line 221: | 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 246: | 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 255: | 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