Difference between revisions of "Template:Freiburg/wiki content start"

Line 15: Line 15:
 
         transition: transform 0.5s ease;
 
         transition: transform 0.5s ease;
 
         display: block;
 
         display: block;
−
         position: fixed;
+
         position: absolute;
 
         right: -100px;
 
         right: -100px;
−
         bottom: 30px;
+
         top: 320px;
 
     }
 
     }
 
}
 
}
  
 
</style>
 
</style>
 +
 +
<script>
 +
 +
$(document).ready(function(){
 +
  var $blob = $("#upwards_blob"),
 +
        $window = $(window),
 +
        $pageheight = $(document).height()-$window.height(),
 +
        topPadding  = 15;
 +
 +
    console.log('pageheight:'+$pageheight);
 +
    console.log('windowwidth:'+$window.width());
 +
 +
    $(window).scroll(function(event) {
 +
    console.log($window.scrollTop()+'  pageheight:'+$pageheight);
 +
    var y = $(this).scrollTop();
 +
 +
    // button disappears on top of the page //
 +
    if (y < 0.05*$pageheight) {
 +
    console.log('lower');
 +
    $blob.css({"top": y + $pageheight -30, "right": 30}); // = 30 px from bottom
 +
    $blob.css({"bottom":"30px"});
 +
  }
 +
/*
 +
    // button appears in the middle //
 +
    if ($window.scrollTop() > 0.05*$pageheight) {
 +
      if ($window.scrollTop() <($pageheight-100)) {
 +
        console.log('middle');
 +
        $blob.css({"transform":"translateX(-110px)"});
 +
      }
 +
    }
 +
 +
    // 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 -->
 
<!-- LIGHTBOX EFFECT -->
Line 107: Line 169:
 
</script>
 
</script>
  
−
<script>
 
−
 
−
$(document).ready(function(){
 
−
var $blob = $("#upwards_blob"),
 
−
        $window = $(window),
 
−
        $pageheight = $(document).height()-$window.height(),
 
−
        topPadding  = 15;
 
−
 
−
    console.log('pageheight:'+$pageheight);
 
−
    console.log('windowwidth:'+$window.width());
 
−
 
−
    $(window).scroll(function() {
 
−
  console.log($window.scrollTop()+'  pageheight:'+$pageheight);
 
  
−
    // button disappears on top of the page //
 
−
  if ($window.scrollTop() < 0.05*$pageheight) {
 
−
console.log('lower');
 
−
$blob.css({"transform":"translateX(0)"});
 
−
    $blob.css({"bottom":"30px"});
 
−
}
 
−
 
−
    // button appears in the middle //
 
−
  if ($window.scrollTop() > 0.05*$pageheight) {
 
−
  if ($window.scrollTop() <($pageheight-100)) {
 
−
  console.log('middle');
 
−
  $blob.css({"transform":"translateX(-110px)"});
 
−
  }
 
−
  }
 
−
 
−
    // 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>
 
  
 
<div class="content_background_wrapper">
 
<div class="content_background_wrapper">

Revision as of 05:32, 8 September 2015