Fix error when selecting another resolution and make position of

container in render view fixed when scrolling and header is invisible

static/js/threeJsHelper/dist/threeJsHelper.js

@@ -12,8 +12,9 @@ Array.prototype.last = function() {
 
 IPE.app = {
     init : function(config) {
+        var headerHeight = $('header').height();
         if($(window).height() < 500) {
-            $("body").animate({ scrollTop: $('header').height() }, "slow");
+            $("body").animate({ scrollTop: headerHeight }, "slow");
         }
 
         $.each(IPE.interceptors, function(index, interceptor) {
@@ -74,6 +75,15 @@ IPE.app = {
 
         // until now, it has to be initialized here, needs a new internal structure
         zoomHelper = new ZoomHelper();
+
+        $(window).on('scroll', function(e) {
+            if($(this).scrollTop() >= headerHeight) {
+                $container.css('position', 'relative');
+                $container.css('top', $(this).scrollTop() - headerHeight);
+            } else {
+                $container.css('top', 0);
+            }
+        });
     },
     initializeHelper: function() {
         helper = new Helper();
@@ -341,11 +351,11 @@ function getCurrentTexture() {
 }
 
 function useFrameControls() {
-    return imgInfo.multipleFrames && (imgInfo.frameTo - imgInfo.frameFrom) != 0;
+    return (imgInfo.multipleFrames && (imgInfo.frameTo - imgInfo.frameFrom) != 0);
 }
 
 function initFrameControls() {
-    if(useFrameControls()) {
+    if(!useFrameControls()) {
         return;
     }
 
@@ -434,7 +444,7 @@ function initFrameControls() {
 }
 
 function updateFrameControlsMaxFrame() {
-    if(useFrameControls()) {
+    if(!useFrameControls()) {
         return;
     }
 
@@ -444,7 +454,7 @@ function updateFrameControlsMaxFrame() {
 }
 
 function updateFrameControls() {
-    if(useFrameControls()) {
+    if(!useFrameControls()) {
         return;
     }
 
@@ -1577,7 +1587,7 @@ var VolumeDimension = function() {
         sceneOverview.add( innerCubeOverview );
     }
 
-    var initiateEventListener = function() {
+    var initiateEventListener = function(containerOverviewElement) {
         // change overview box
         $(document).on('zoomActionFinished', function(e, params) {
 
@@ -1602,6 +1612,16 @@ var VolumeDimension = function() {
                 addInnerCubeOverView(1,1,1);
             }
         });
+        var headerHeight = $('header').height();
+        $(window).on('scroll', function(e) {
+            $containerOverviewElement = $(containerOverviewElement)
+            if($(this).scrollTop() >= headerHeight) {
+                $containerOverviewElement.css('position', 'relative');
+                $containerOverviewElement.css('top', $(this).scrollTop() - headerHeight);
+            } else {
+                $containerOverviewElement.css('top', 0);
+            }
+        });
     }
 
     var addTextsToScene = function() {
@@ -1697,7 +1717,7 @@ var VolumeDimension = function() {
             rendererOverview.setClearColor(0xffffff, 1);
             containerOverviewElement.appendChild(rendererOverview.domElement);
 
-            initiateEventListener();
+            initiateEventListener(containerOverviewElement);
         },
 
         updateCameraPosition: function(position) {

static/js/threeJsHelper/src/Application.js

@@ -12,8 +12,9 @@ Array.prototype.last = function() {
 
 IPE.app = {
     init : function(config) {
+        var headerHeight = $('header').height();
         if($(window).height() < 500) {
-            $("body").animate({ scrollTop: $('header').height() }, "slow");
+            $("body").animate({ scrollTop: headerHeight }, "slow");
         }
 
         $.each(IPE.interceptors, function(index, interceptor) {
@@ -74,6 +75,15 @@ IPE.app = {
 
         // until now, it has to be initialized here, needs a new internal structure
         zoomHelper = new ZoomHelper();
+
+        $(window).on('scroll', function(e) {
+            if($(this).scrollTop() >= headerHeight) {
+                $container.css('position', 'relative');
+                $container.css('top', $(this).scrollTop() - headerHeight);
+            } else {
+                $container.css('top', 0);
+            }
+        });
     },
     initializeHelper: function() {
         helper = new Helper();
@@ -341,11 +351,11 @@ function getCurrentTexture() {
 }
 
 function useFrameControls() {
-    return imgInfo.multipleFrames && (imgInfo.frameTo - imgInfo.frameFrom) != 0;
+    return (imgInfo.multipleFrames && (imgInfo.frameTo - imgInfo.frameFrom) != 0);
 }
 
 function initFrameControls() {
-    if(useFrameControls()) {
+    if(!useFrameControls()) {
         return;
     }
 
@@ -434,7 +444,7 @@ function initFrameControls() {
 }
 
 function updateFrameControlsMaxFrame() {
-    if(useFrameControls()) {
+    if(!useFrameControls()) {
         return;
     }
 
@@ -444,7 +454,7 @@ function updateFrameControlsMaxFrame() {
 }
 
 function updateFrameControls() {
-    if(useFrameControls()) {
+    if(!useFrameControls()) {
         return;
     }
 

static/js/threeJsHelper/src/Helpers/Zoom/OverviewHelper.js

@@ -9,7 +9,7 @@ var OverviewHelper = function() {
         sceneOverview.add( innerCubeOverview );
     }
 
-    var initiateEventListener = function() {
+    var initiateEventListener = function(containerOverviewElement) {
         // change overview box
         $(document).on('zoomActionFinished', function(e, params) {
 
@@ -34,6 +34,16 @@ var OverviewHelper = function() {
                 addInnerCubeOverView(1,1,1);
             }
         });
+        var headerHeight = $('header').height();
+        $(window).on('scroll', function(e) {
+            $containerOverviewElement = $(containerOverviewElement)
+            if($(this).scrollTop() >= headerHeight) {
+                $containerOverviewElement.css('position', 'relative');
+                $containerOverviewElement.css('top', $(this).scrollTop() - headerHeight);
+            } else {
+                $containerOverviewElement.css('top', 0);
+            }
+        });
     }
 
     var addTextsToScene = function() {
@@ -129,7 +139,7 @@ var OverviewHelper = function() {
             rendererOverview.setClearColor(0xffffff, 1);
             containerOverviewElement.appendChild(rendererOverview.domElement);
 
-            initiateEventListener();
+            initiateEventListener(containerOverviewElement);
         },
 
         updateCameraPosition: function(position) {