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

Line 1: Line 1:
 
<html>
 
<html>
 +
 +
<!-- UPWARDS BLOB JQUERY -->
  
 
<script>
 
<script>
 +
 +
// The upwards-blob div is defined in Freiburg/CSS as its absolute position should be initialized on the top of the page
  
 
$(document).ready(function(){
 
$(document).ready(function(){
Line 8: Line 12:
 
       $pageheight = $(document).height()-$window.height();
 
       $pageheight = $(document).height()-$window.height();
  
−
     console.log('pageheight:'+$pageheight);
+
     //console.log('pageheight:'+$pageheight);
−
     console.log('windowwidth:'+$window.width());
+
     //console.log('windowwidth:'+$window.width());
−
     console.log('windowheight:'+$window.height());
+
     //console.log('windowheight:'+$window.height());
  
 
     $(window).scroll(function(event) {
 
     $(window).scroll(function(event) {
−
    console.log($(this).scrollTop()+'  pageheight:'+$pageheight);
+
      //console.log($(this).scrollTop()+'  pageheight:'+$pageheight);
−
    var y = $(this).scrollTop(),
+
−
        top = $(this).scrollTop() + $window.height() -100;  
+
  
−
    // button disappears on top of the page //
+
      // y is scroll progress (distance from top)
−
    if (y <  60) {
+
      // top is abbout bottomline of window
−
      console.log('right in');
+
      var y = $(this).scrollTop(),
−
      $blob.css({"transform": "translateX(0)"}); // = 100 px outside
+
          top = $(this).scrollTop() + $window.height() -100;
−
    }
+
  
−
    // button appears in the middle //
+
      // use CSS transform to move button into view when user scrolls down
−
    if (y > 60 ) {
+
      if (y > 60 ) {
−
      console.log('right out');
+
        //console.log('right out');
−
      $blob.css({"transform": "translateX(-130px)"}); // = 30 px inside right
+
        $blob.css({"transform": "translateX(-130px)"}); // = 30 px inside right
−
    }
+
−
 
+
−
 
+
−
    // if there is no lower background image, the button just moves upwards so it doesnt touch the footer
+
−
    if ($window.width() < 1320) {
+
−
      if (y > ($pageheight - 100)) {
+
−
        // blob stays 100px above bottom
+
−
        console.log("y 100 up");
+
−
      } else {
+
−
        console.log('y in window');
+
−
        $blob.css({"top": top });
+
 
       }
 
       }
−
    } else if ($window.width() > 1320) {
 
−
      if (y > ($pageheight - 430)) {
 
−
        console.log("y 430 up");
 
−
      } else {
 
−
        console.log('y in window');
 
−
        $blob.css({"top": top });
 
−
      }
 
−
    }
 
  
−
/*
+
      // move blob out of view when page is scrolled up again
−
    // if there is no lower background image, the button just moves upwards so it doesnt touch the footer //
+
      if (y < 60) {
−
    if ($window.width() < 1320) {
+
         //console.log('right in');
−
      if ($window.scrollTop() > ($pageheight-100)) {
+
         $blob.css({"transform": "translateX(0)"}); // = 100 px outside
−
         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 //
+
      // offset of the button on the bottom of the page depends on the background image and thus the page-width
−
    else {
+
      // for pages smaller than 1143 px the button disappears by media queries (found in Freiburg/CSS)
−
       if ($window.scrollTop() > ($pageheight-430)) {
+
       if ($window.width() < 1320) {
−
         console.log('greater wide');
+
        if (y > ($pageheight - 100)) {
−
        $blob.css({"transform":"translate(-110px, 0)"});
+
          // blob stays 100px above bottom
−
         if ($window.scrollTop() > $pageheight-430) {
+
          //console.log("y 100 up");
−
           console.log('blob should move up');
+
         } else {
−
          $blob.stop().animate({
+
          //console.log('y in window');
−
            bottom: $window.scrollTop() - $pageheight + 430 + topPadding
+
          $blob.css({"top": top });
−
          });
+
         }
−
        }
+
      } else if ($window.width() > 1320) {
−
        else {
+
        if (y > ($pageheight - 500)) {
−
           $blob.stop().animate({
+
           //console.log("y 500 up");
−
            bottom: 30
+
        } else {
−
          });
+
          //console.log('y in window');
 +
           $blob.css({"top": top });
 
         }
 
         }
 
       }
 
       }
−
     }
+
     });
−
    */
+
−
  });
+
 
});  
 
});  
  

Revision as of 07:33, 8 September 2015