Difference between revisions of "Template:IONIS Paris/JS"

 
(12 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<html>
 
<head>
 
<head>
−
<script src="http://thebootstrapthemes.com/live/thebootstrapthemes-photography/assets/jquery.js"></script>
+
<script src="https://2015.igem.org/Template:IONIS_Paris/JS_Page?action=raw&ctype=text/javascript"></script>
−
<script src="http://thebootstrapthemes.com/live/thebootstrapthemes-photography/assets/wow/wow.min.js"></script>
+
<script src="https://2015.igem.org/Template:IONIS_Paris/JS_Page2?action=raw&ctype=text/javascript"></script>
−
<script src="http://thebootstrapthemes.com/live/thebootstrapthemes-photography/assets/bootstrap/js/bootstrap.js"></script>
+
<script src="https://2015.igem.org/Template:IONIS_Paris/JS_Page3?action=raw&ctype=text/javascript"></script>
−
<script src="http://thebootstrapthemes.com/live/thebootstrapthemes-photography/assets/mobile/touchSwipe.min.js"></script>
+
<script src="https://2015.igem.org/Template:IONIS_Paris/JS_Page4?action=raw&ctype=text/javascript"></script>
−
<script src="http://thebootstrapthemes.com/live/thebootstrapthemes-photography/assets/respond/respond.js"></script>
+
<script src="https://2015.igem.org/Template:IONIS_Paris/JS_Page5?action=raw&ctype=text/javascript"></script>
−
<script src="http://thebootstrapthemes.com/live/thebootstrapthemes-photography/assets/gallery/jquery.blueimp-gallery.min.js"></script>
+
<script src="https://2015.igem.org/Template:IONIS_Paris/JS_Page6?action=raw&ctype=text/javascript"></script>
  
 
<script  type="text/javascript">
 
<script  type="text/javascript">
Line 76: Line 76:
 
});
 
});
  
 +
//GOTOP
  
  
−
// Main Page
+
−
/* detect touch */
+
  $(document).ready(function(){
−
if("ontouchstart" in window){
+
   
−
    document.documentElement.className = document.documentElement.className + " touch";
+
     $(".gototop").hide();
−
}
+
     
−
if(!$("html").hasClass("touch")){
+
    // faire apparaitre #gototop
−
    /* background fix */
+
     $(function () {
−
     $(".parallax").css("background-attachment", "fixed");
+
        $(window).scroll(function () {
−
}
+
            if ($(this).scrollTop() > 450 ) {
−
 
+
                $('.gototop').fadeIn(300);
−
/* fix vertical when not overflow
+
            } else {
−
call fullscreenFix() if .fullscreen content changes */
+
                $('.gototop').fadeOut(300);
−
function fullscreenFix(){
+
            }
−
     var h = $('body').height();
+
−
    // set .fullscreen height
+
−
    $(".content-b").each(function(i){
+
−
        if($(this).innerHeight() <= h){
+
−
            $(this).closest(".fullscreen").addClass("not-overflow");
+
−
        }
+
 
     });
 
     });
−
}
+
   
−
$(window).resize(fullscreenFix);
+
−
fullscreenFix();
+
  
−
/* resize background images */
 
−
function backgroundResize(){
 
−
    var windowH = $(window).height();
 
−
    $(".background").each(function(i){
 
−
        var path = $(this);
 
−
        // variables
 
−
        var contW = path.width();
 
−
        var contH = path.height();
 
−
        var imgW = path.attr("data-img-width");
 
−
        var imgH = path.attr("data-img-height");
 
−
        var ratio = imgW / imgH;
 
−
        // overflowing difference
 
−
        var diff = parseFloat(path.attr("data-diff"));
 
−
        diff = diff ? diff : 0;
 
−
        // remaining height to have fullscreen image only on parallax
 
−
        var remainingH = 0;
 
−
        if(path.hasClass("parallax") && !$("html").hasClass("touch")){
 
−
            var maxH = contH > windowH ? contH : windowH;
 
−
            remainingH = windowH - contH;
 
−
        }
 
−
        // set img values depending on cont
 
−
        imgH = contH + remainingH + diff;
 
−
        imgW = imgH * ratio;
 
−
        // fix when too large
 
−
        if(contW > imgW){
 
−
            imgW = contW;
 
−
            imgH = imgW / ratio;
 
−
        }
 
−
        //
 
−
        path.data("resized-imgW", imgW);
 
−
        path.data("resized-imgH", imgH);
 
−
        path.css("background-size", imgW + "px " + imgH + "px");
 
 
     });
 
     });
−
}
+
});
−
$(window).resize(backgroundResize);
+
−
$(window).focus(backgroundResize);
+
−
backgroundResize();
+
−
 
+
−
/* set parallax background-position */
+
−
function parallaxPosition(e){
+
−
    var heightWindow = $(window).height();
+
−
    var topWindow = $(window).scrollTop();
+
−
    var bottomWindow = topWindow + heightWindow;
+
−
    var currentWindow = (topWindow + bottomWindow) / 2;
+
−
    $(".parallax").each(function(i){
+
−
        var path = $(this);
+
−
        var height = path.height();
+
−
        var top = path.offset().top;
+
−
        var bottom = top + height;
+
−
        // only when in range
+
−
        if(bottomWindow > top && topWindow < bottom){
+
−
            var imgW = path.data("resized-imgW");
+
−
            var imgH = path.data("resized-imgH");
+
−
            // min when image touch top of window
+
−
            var min = 0;
+
−
            // max when image touch bottom of window
+
−
            var max = - imgH + heightWindow;
+
−
            // overflow changes parallax
+
−
            var overflowH = height < heightWindow ? imgH - height : imgH - heightWindow; // fix height on overflow
+
−
            top = top - overflowH;
+
−
            bottom = bottom + overflowH;
+
−
            // value with linear interpolation
+
−
            var value = min + (max - min) * (currentWindow - top) / (bottom - top);
+
−
            // set background-position
+
−
            var orizontalPosition = path.attr("data-oriz-pos");
+
−
            orizontalPosition = orizontalPosition ? orizontalPosition : "50%";
+
−
            $(this).css("background-position", orizontalPosition + " " + value + "px");
+
−
        }
+
−
    });
+
−
}
+
−
if(!$("html").hasClass("touch")){
+
−
    $(window).resize(parallaxPosition);
+
−
    //$(window).focus(parallaxPosition);
+
−
    $(window).scroll(parallaxPosition);
+
−
    parallaxPosition();
+
−
}
+
  
 
</script>
 
</script>

Latest revision as of 15:33, 16 September 2015