Global change in the way to calculate widths and heights to

render the IMS iframe properly. Should be working ok both under
normal and rounded-corner themes and under FF, Safari and IE

diff --git a/mod/resource/type/ims/javascript.php b/mod/resource/type/ims/javascript.php
index e91488c71f3bcb78bab6160c2ad75ca2c0725c61..e5666453ded89f1b82ba667bf4779fd06f040d30 100644 (file)
--- a/mod/resource/type/ims/javascript.php
+++ b/mod/resource/type/ims/javascript.php
@@ -28,12 +28,13 @@
         };
         window.name='ims-cp-page';
 
-        // Set Interval until ims-contentframe or ims-contentframe-no-nav is available
+        // Set Interval until ims-containerdiv and (ims-contentframe or ims-contentframe-no-nav) is available
         function waiting() {
+            var cd   = document.getElementById('ims-containerdiv');
             var cf   = document.getElementById('ims-contentframe');
             var cfnv = document.getElementById('ims-contentframe-no-nav');
 
-            if (cf || cfnv) {
+            if (cd && (cf || cfnv)) {
                 resizeiframe($jsarg, $customcorners);
                 clearInterval(ourInterval);
                 return true;

diff --git a/mod/resource/type/ims/resize.js b/mod/resource/type/ims/resize.js
index b05a768cb1267a1cdf036946eea035e2349dd2b0..c5a8d3f5fe6d6f9fea2994503d9bfc7d8aaf697c 100644 (file)
--- a/mod/resource/type/ims/resize.js
+++ b/mod/resource/type/ims/resize.js
@@ -17,7 +17,9 @@ function getElementStyle(obj, prop, cssProp) {
     return ret;
 }
 
-function resizeiframe (hasNav, customCorners) {    
+function resizeiframe (hasNav, customCorners) {
+
+/// Calculate window width and height
     var winWidth = 0, winHeight = 0;
     if( typeof( window.innerWidth ) == 'number' ) {
         //Non-IE
@@ -32,57 +34,83 @@ function resizeiframe (hasNav, customCorners) {
         winWidth = document.body.clientWidth;
         winHeight = document.body.clientHeight;
     }
-                              
-    var header = document.getElementById('header');
-    var divs = document.getElementsByTagName('div');
-    var n = divs.length;
-    
-    
-    var content = document.getElementById('content');
+
+/// Calculate margins
+    var topMargin = parseInt(getElementStyle(document.getElementsByTagName('body')[0], 'marginTop', 'margin-top'));
+    var bottomMargin = parseInt(getElementStyle(document.getElementsByTagName('body')[0], 'marginBottom', 'margin-bottom'));
+    var leftMargin = parseInt(getElementStyle(document.getElementsByTagName('body')[0], 'marginLeft', 'margin-left'));
+    var rightMargin = parseInt(getElementStyle(document.getElementsByTagName('body')[0], 'marginRight', 'margin-right'));
+
+/// Calculate heights
+    var header = document.getElementById('content');
     var headerHeight = 0;
-    if (content) {
-        headerHeight = content.offsetTop;
+    if (header) {
+        headerHeight = header.offsetTop + parseInt(getElementStyle(header, 'marginTop', 'margin-top')) + parseInt(getElementStyle(header, 'marginBottom', 'margin-bottom'));
     }
-    
+
+    var contentbt = document.getElementById('content-bt');
+    var contentbtHeight = 0;
+    if (contentbt) {
+        contentbtHeight = contentbt.offsetHeight + parseInt(getElementStyle(contentbt, 'marginTop', 'margin-top')) + parseInt(getElementStyle(contentbt, 'marginBottom', 'margin-bottom'));
+    }
+
+    var contentbb = document.getElementById('content-bb');
+    var contentbbHeight = 0;
+    if (contentbb) {
+        contentbbHeight = contentbb.offsetHeight + parseInt(getElementStyle(contentbb, 'marginTop', 'margin-top')) + parseInt(getElementStyle(contentbb, 'marginBottom', 'margin-bottom'));
+    }
+
+    var navbar = document.getElementById('ims-nav-bar');
+    var navbarHeight = 0;
+    if (navbar) {
+        navbarHeight = navbar.offsetHeight + parseInt(getElementStyle(navbar, 'marginTop', 'margin-top')) + parseInt(getElementStyle(navbar, 'marginBottom', 'margin-bottom'));;
+    }
+
     var footer = document.getElementById('footer');
-    var imsnavbar = document.getElementById('ims-nav-bar');
     var footerHeight = 0;
-    var imsnavHeight = 0;
     if (footer) {
         footerHeight = footer.offsetHeight + parseInt(getElementStyle(footer, 'marginTop', 'margin-top')) + parseInt(getElementStyle(footer, 'marginBottom', 'margin-bottom'));
     }
-    if (imsnavbar) {
-        imsnavHeight = imsnavbar.offsetHeight;
-    }
 
-    var topMargin = parseInt(getElementStyle(document.getElementsByTagName('body')[0], 'marginTop', 'margin-top'));
-    var bottomMargin = parseInt(getElementStyle(document.getElementsByTagName('body')[0], 'marginBottom', 'margin-bottom'));
-    var leftMargin = parseInt(getElementStyle(document.getElementsByTagName('body')[0], 'marginLeft', 'margin-left'));
-    var rightMargin = parseInt(getElementStyle(document.getElementsByTagName('body')[0], 'marginRight', 'margin-right'));
 
-    var totalHeight = headerHeight +
-                      footerHeight +
-                      imsnavHeight +
-                      topMargin +
-                      bottomMargin;
+/// Calculate the used height
+    var usedHeight = headerHeight +
+                     contentbtHeight +
+                     navbarHeight +
+                     contentbbHeight +
+                     footerHeight +
+                     bottomMargin + 15; /// Plus 15 points to avoid the wrong vertical scroll bar on some browsers
 
-    if (hasNav == true) {
-        var navBarWidth = document.getElementById('ims-menudiv').offsetWidth;
-        var iframeWidth = (winWidth - navBarWidth - leftMargin - rightMargin - 4)+'px'; // -4 for two divs borders I hope
-        document.getElementById('ims-menudiv').style.height = (winHeight - totalHeight)+'px';
+/// Calculate widths
+    var menu = document.getElementById('ims-menudiv');
+    var menuWidth = 0;
+    var menuLeft = 0;
+    if (menu) {
+        menuLeft = menu.offsetLeft;
+        menuWidth = menu.offsetWidth + parseInt(getElementStyle(menu, 'marginLeft', 'margin-left')) + parseInt(getElementStyle(menu, 'marginRight', 'margin-right')) + 2; /// +2 to leave 1px menu borders
     }
-    else {
-        var iframeWidth = (winWidth - leftMargin - rightMargin - 2)+'px'; // -2 for one div borders I hope
+
+    var container = document.getElementById('ims-containerdiv');
+    var containerWidth = 0;
+    if (container) {
+        containerWidth = container.offsetWidth - 2; /// -2 to leave some right margin in the container div
     }
 
+/// Calculate the used width
+    var usedWidth = winWidth - containerWidth + menuWidth;
+
+/// Set contentframe dimensions
     if (hasNav == true) {
-        document.getElementById('ims-contentframe').style.height = (winHeight - totalHeight)+'px';
-        document.getElementById('ims-contentframe').style.width = iframeWidth;
+        document.getElementById('ims-contentframe').style.height = (winHeight - usedHeight)+'px';
+        document.getElementById('ims-contentframe').style.width = (winWidth - usedWidth)+'px';
+        document.getElementById('ims-contentframe').style.left = (menuLeft + menuWidth)+'px';
     } else {
-        document.getElementById('ims-contentframe-no-nav').style.height = (winHeight - totalHeight)+'px';
-        document.getElementById('ims-contentframe-no-nav').style.width = iframeWidth;
+        document.getElementById('ims-contentframe-no-nav').style.height = (winHeight - usedHeight)+'px';
+        document.getElementById('ims-contentframe-no-nav').style.width = (winWidth - usedWidth)+'px';
     }
-    document.getElementById('ims-containerdiv').style.height = (winHeight - totalHeight)+'px';
+
+/// Set containerdiv dimensions
+    document.getElementById('ims-containerdiv').style.height = (winHeight - usedHeight)+'px';
 }