|
|
(41 intermediate revisions by the same user not shown) |
Line 1: |
Line 1: |
| <html> | | <html> |
− |
| |
− | <style>
| |
− |
| |
− | /* upwards navigation blob */
| |
− |
| |
− | #upwards_blob{
| |
− | display: none;
| |
− | }
| |
− |
| |
− | /* min-width is chosen so the blob does just not interfere with the content box */
| |
− | /* 1021 content_box-width + 46 blob-width + 20 scrollbar + some buffer space */
| |
− | @media screen and (min-width: 1144px){
| |
− | #upwards_blob{
| |
− | transition: transform 0.5s ease;
| |
− | display: block;
| |
− | position: absolute;
| |
− | right: -100px;
| |
− | top: 320px;
| |
− | }
| |
− | }
| |
− |
| |
− | </style>
| |
− |
| |
− | <script>
| |
− |
| |
− | $(document).ready(function(){
| |
− | var $blob = $("#upwards_blob"),
| |
− | $window = $(window),
| |
− | $pageheight = $(document).height()-$window.height();
| |
− |
| |
− | console.log('pageheight:'+$pageheight);
| |
− | console.log('windowwidth:'+$window.width());
| |
− | console.log('windowheight:'+$window.height());
| |
− |
| |
− | $(window).scroll(function(event) {
| |
− | console.log($(this).scrollTop()+' pageheight:'+$pageheight);
| |
− | var y = $(this).scrollTop();
| |
− |
| |
− | // button disappears on top of the page //
| |
− | if (y < 60) {
| |
− | console.log('lower');
| |
− | $blob.css({"top": y }); // = 30 px under bottom
| |
− | $blob.animate({right:-30});
| |
− | }
| |
− |
| |
− | // button appears in the middle //
| |
− | if (y > 60 ) {
| |
− | if (y <($pageheight-100)) {
| |
− | console.log('middle');
| |
− | $blob.css({"top": y }); // = 30 px from bottom
| |
− | $blob.animate({right:30});
| |
− | }
| |
− | }
| |
− | /*
| |
− | // if there is no lower background image, the button just moves upwards so it doesnt touch the footer //
| |
− | if ($window.width() < 1320) {
| |
− | if ($window.scrollTop() > ($pageheight-100)) {
| |
− | console.log('greater small');
| |
− | $blob.css({"transform":"translate(-110px, -100px)"});
| |
− | }
| |
− | }
| |
− |
| |
− | // if the lower background image is visible, the button moves upwards so it stays just above the image //
| |
− | else {
| |
− | if ($window.scrollTop() > ($pageheight-430)) {
| |
− | console.log('greater wide');
| |
− | $blob.css({"transform":"translate(-110px, 0)"});
| |
− | if ($window.scrollTop() > $pageheight-430) {
| |
− | console.log('blob should move up');
| |
− | $blob.stop().animate({
| |
− | bottom: $window.scrollTop() - $pageheight + 430 + topPadding
| |
− | });
| |
− | }
| |
− | else {
| |
− | $blob.stop().animate({
| |
− | bottom: 30
| |
− | });
| |
− | }
| |
− | }
| |
− | }
| |
− | */
| |
− | });
| |
− | });
| |
− |
| |
− | </script>
| |
− |
| |
− | <!-- LIGHTBOX EFFECT -->
| |
− | <!-- from http://webdesign.tutsplus.com/articles/super-simple-lightbox-with-css-and-jquery--webdesign-3528 -->
| |
− | <style>
| |
− |
| |
− | #lightbox {
| |
− | position:fixed; /* keeps the lightbox window in the current viewport */
| |
− | top:0;
| |
− | left:0;
| |
− | width:100%;
| |
− | height:100%;
| |
− | background: rgba(0,0,0,.7);
| |
− | text-align:center;
| |
− | z-index: 9999;
| |
− | }
| |
− |
| |
− | #lightbox p {
| |
− | text-align:right;
| |
− | color:#fff;
| |
− | margin-right:20px;
| |
− | font-size:12px;
| |
− | }
| |
− |
| |
− | #lightbox img {
| |
− | box-shadow:0 0 25px #111;
| |
− | -webkit-box-shadow:0 0 25px #111;
| |
− | -moz-box-shadow:0 0 25px #111;
| |
− | max-width:940px;
| |
− | }
| |
− | </style>
| |
− |
| |
− | <script type="text/javascript">
| |
− | $(document).ready(function(){
| |
− | $('.lightbox_trigger').click(function(event) {
| |
− |
| |
− | //prevent default action (hyperlink)
| |
− | event.preventDefault();
| |
− |
| |
− | //Get clicked link href
| |
− | var image_href = $(this).attr("href");
| |
− | console.log(image_href)
| |
− |
| |
− | /*
| |
− | If the lightbox window HTML already exists in document,
| |
− | change the img src to to match the href of whatever link was clicked
| |
− |
| |
− | If the lightbox window HTML doesn't exists, create it and insert it.
| |
− | (This will only happen the first time around)
| |
− | */
| |
− |
| |
− | if ($('#lightbox').length > 0) { // #lightbox exists
| |
− |
| |
− | //place href as img src value
| |
− | $('#lightboxcontent').html('<img src="' + image_href + '" />');
| |
− |
| |
− | //show lightbox window - you could use .show('fast') for a transition
| |
− | $('#lightbox').show('fast');
| |
− | }
| |
− |
| |
− | else { //#lightbox does not exist - create and insert (runs 1st time only)
| |
− |
| |
− | //create HTML markup for lightbox window
| |
− | var lightbox =
| |
− | '<div id="lightbox">' +
| |
− | '<p>Click to close</p>' +
| |
− | '<div id="lightboxcontent">' + //insert clicked link's href into img src
| |
− | '<img src="' + image_href +'" />' +
| |
− | '</div>' +
| |
− | '</div>';
| |
− |
| |
− | //insert lightbox HTML into page
| |
− | $('body').append(lightbox);
| |
− | }
| |
− |
| |
− | });
| |
− |
| |
− | //Click anywhere on the page to get rid of lightbox window
| |
− | $('body').on('click', '#lightbox', function() { //must use live, as the lightbox element is inserted into the DOM
| |
− | // as live is deprecated, use on
| |
− | $('#lightbox').hide();
| |
− | });
| |
− |
| |
− | });
| |
− | </script>
| |
− |
| |
− |
| |
| | | |
| <div class="content_background_wrapper"> | | <div class="content_background_wrapper"> |
| <div class="central_position_wrap"> | | <div class="central_position_wrap"> |
− | <div id="upwards_blob"><a href="#header"><img src="https://static.igem.org/mediawiki/2015/9/93/Freiburg_upwards_blob.png"></a></div>
| |
| <div class="background_image_left"><img src="https://static.igem.org/mediawiki/2015/8/85/Freiburg_wiki_background_2_parted_left.png"></div> | | <div class="background_image_left"><img src="https://static.igem.org/mediawiki/2015/8/85/Freiburg_wiki_background_2_parted_left.png"></div> |
| <div class="background_image_right"><img src="https://static.igem.org/mediawiki/2015/f/f4/Freiburg_wiki_background_2_parted_right.png"></div> | | <div class="background_image_right"><img src="https://static.igem.org/mediawiki/2015/f/f4/Freiburg_wiki_background_2_parted_right.png"></div> |
| <div class="page_content"> | | <div class="page_content"> |
| </html> | | </html> |