[embjopr-commits] EMBJOPR SVN: r966 - in branches/EmbJopr_1_3/core/src/main/webapp: js and 1 other directory.

Tue Jul 27 11:06:01 EDT 2010

Author: lkrejci
Date: 2010-07-27 11:06:00 -0400 (Tue, 27 Jul 2010)
New Revision: 966

Modified:
   branches/EmbJopr_1_3/core/src/main/webapp/WEB-INF/facelets/layout.xhtml
   branches/EmbJopr_1_3/core/src/main/webapp/js/embedded.js
Log:
EMBJOPR-250, EMBJOPR-289 - Several fixes to the IEx rendering: navtree height correct in IE6, no content scrollbar in IE6, the tab bar and content borders match up (always in IE7+, almost always in IE6)

Modified: branches/EmbJopr_1_3/core/src/main/webapp/WEB-INF/facelets/layout.xhtml
===================================================================

--- branches/EmbJopr_1_3/core/src/main/webapp/WEB-INF/facelets/layout.xhtml	2010-07-27 11:13:46 UTC (rev 965)
+++ branches/EmbJopr_1_3/core/src/main/webapp/WEB-INF/facelets/layout.xhtml	2010-07-27 15:06:00 UTC (rev 966)
@@ -77,8 +77,10 @@
             }
         h\tml #content
             {
-            height: 100%;
-            overflow: visible;
+            padding: 16px; /* replace the em units for padding with something we can compute with in the expressions below */
+            overflow: auto;
+            height: expression((document.body.clientHeight - 2 * 31 - 49 + 1) + 'px');  /* 49 = header height, 31 = footer height, but why I have to substract it twice escapes me. 1 = so that it looks better.*/
+            width: expression((document.body.clientWidth - 300 - 2 * 16) + 'px'); /* 300 = width of the sidebar, 16 = padding */
             }
         #pageheader, #footer
             {
@@ -86,11 +88,10 @@
             }
         #sidebar-left
             {
-            height: expression(document.body.clientHeight - (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * (8 + 5)) + 'px');
+            height: expression((document.body.clientHeight - 31 - 49 + 2) + 'px'); /* 49 = header height, 31 = footer height, 2 = so it looks better. */
             }
         </style>
         <![endif]-->
-
     </head>
     <body>
     <div id="content">
@@ -125,6 +126,26 @@
     <ui:include src="resourceNavigation.xhtml"/>
     <ui:include src="header.xhtml"/>
     <ui:include src="footer.xhtml"/>
+
+        <!-- I'm giving up on proper CSS for IE. These poor hacks make the tab menu look nice in both IE6 and IE7 -->
+        <!-- This has to be present only *AFTER* all the content is defined, because the below CSS contains expressions
+             refering to the DOM objects defined above (like content). -->
+        <!--[if lt IE 8]>
+        <script type="text/javascript" language="javascript">
+            var scrollBarWidth = getScrollBarWidth();
+        </script>
+        <style type="text/css" media="screen">
+        h\tml #content
+            {
+            /* This definition is repeated from above so that it also applies for IE7 here, where we need this pixel-sized
+               padding so that we can compute the width of the tabmenu below. */
+            padding: 16px; /* replace the em units for padding with something we can compute with in the expressions below */
+            }
+        #tabmenu {
+            width: expression((document.body.clientWidth - 300 - 2 * 16 - (content.scrollHeight > content.clientHeight ? scrollBarWidth : 0)) + 'px'); /* 300 = width of sidebar, 16 content padding. */
+            }
+        </style>
+        <![endif]-->
     </body>
 </f:view>
 </html>

Modified: branches/EmbJopr_1_3/core/src/main/webapp/js/embedded.js
===================================================================
--- branches/EmbJopr_1_3/core/src/main/webapp/js/embedded.js	2010-07-27 11:13:46 UTC (rev 965)
+++ branches/EmbJopr_1_3/core/src/main/webapp/js/embedded.js	2010-07-27 15:06:00 UTC (rev 966)
@@ -477,3 +477,29 @@
         }
     }
 }
+
+function getScrollBarWidth () {
+    var inner = document.createElement('p');
+    inner.style.width = "100%";
+    inner.style.height = "200px";
+
+    var outer = document.createElement('div');
+    outer.style.position = "absolute";
+    outer.style.top = "0px";
+    outer.style.left = "0px";
+    outer.style.visibility = "hidden";
+    outer.style.width = "200px";
+    outer.style.height = "150px";
+    outer.style.overflow = "hidden";
+    outer.appendChild (inner);
+
+    document.body.appendChild (outer);
+    var w1 = inner.offsetWidth;
+    outer.style.overflow = 'scroll';
+    var w2 = inner.offsetWidth;
+    if (w1 == w2) w2 = outer.clientWidth;
+
+    document.body.removeChild (outer);
+
+    return (w1 - w2);
+};

