Code

Added third list to test.
[gosa.git] / test.php
index 6588fd79754387bf5867a572460286b1f68f4d14..1fdc8216421d3444ee06bd8b11ea2866a70e63bc 100644 (file)
--- a/test.php
+++ b/test.php
@@ -1,10 +1,12 @@
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <head>
 <style type="text/css">
 
 .ObjectListViewport {
        width:100%;
+       height:100%;
+       border-collapse:collapse;
 }
 
 .ObjectListViewport_Header_Table {
@@ -36,6 +38,7 @@
 .ObjectListViewport_Table {
        border-collapse:collapse;
     width:100%;
+       height:100%;
        border: 0px;
 }
 
@@ -48,7 +51,6 @@
        padding:0px;
 }
 .ObjectListViewport_TD_Entries {
-       background-color: #009900;
        vertical-align:middle;
        border: 0px;
        margin:0px;
        margin:0px;
        padding:0px;
 }
-td {
+.ObjectListViewport_Entry_Cover{
+       overflow:auto;
+}
+.ObjectListViewport_Entry_Cell {
        border-left: solid 1px;
-       border-right: solid 1px;
-       font-size:1em;
-       height:22px;
+       font-size:10px;
+       height:18px;
 }
 
 </style>
 <script type="text/javascript">
-window.onload = setHeight;
-window.onresize = setHeight;
-
-       function setHeight() {
-               dbg = document.getElementById('debug');
-
-               OVP = getComputedStyle(document.getElementById('ObjectListViewport'),"").height;
-               OVP_h = parseInt(OVP.replace(/px/,''));
-
-               table             = getComputedStyle(document.getElementById('ObjectListViewport_Table'),"").height;
-               table_header  = getComputedStyle(document.getElementById('ObjectListViewport_TD_Header'),"").height;
-               table_entries = getComputedStyle(document.getElementById('ObjectListViewport_TD_Entries'),"").height;
-               table_footer  = getComputedStyle(document.getElementById('ObjectListViewport_TD_Footer'),"").height;
-
-               table_h                 = parseInt(table.replace(/px/,''));
-               table_header_h  = parseInt(table_header.replace(/px/,''));
-               table_entries_h = parseInt(table_entries.replace(/px/,'')); 
-               table_footer_h  = parseInt(table_footer.replace(/px/,''));
-                       
-               calc = (OVP_h  - ( table_header_h + table_footer_h ));
-               document.getElementById('ObjectListViewport_Entry_Cover').style.height= calc + 'px' ;
-
-               OVP_T = getComputedStyle(document.getElementById('ObjectListViewport_Table'),"").width;
-               OVP_T_w = parseInt(OVP_T.replace(/px/,'',OVP_T));
+
+<!--
+
+/* Register resize event to force redraw of all 
+ *  displayed lists 
+ */
+window.onload = updateObjectListViewportSize;
+window.onresize = updateObjectListViewportSize;
+
+       function updateObjectListViewportSize() {
+
+               var dbg = document.getElementById('debug');
+               dbg.value ="";
                
-               document.getElementById('ObjectListViewport_Entry_Table').style.width = (OVP_T_w - 16) + 'px';
+               /* Somehow IE do not need to be resized 
+         *  So skip the following part if the client uses ie
+         */
+               if(document.all){
+                       var all = getElementsByStyleClass('ObjectListViewport_Entry_Cover');
+                       for (var i = 0; i < all.length; ++i){
+                               document.getElementById(all[i].id).style.height= "100%";
+                       }
+                       return;
+               }
+       
+               var all = getElementsByStyleClass('ObjectListViewport');
+               for (var i = 0; i < all.length; ++i){
+
+                       var id_pref = all[i].id.replace(/[^0-9]*/,"");
+
+                       /* Set Viewport to min height, to ensure 
+                        *  that resize will work correctly in konqueror 
+                        */
+                       document.getElementById('ObjectListViewport_Entry_Cover' + id_pref).style.height= "50px";
+
+                       /* Get values of displayed header and footer heights to be 
+                        *  able to recalculate the Viewport 
+                        */
+                       var viewport    = getObjectHeight('ObjectListViewport_Table' + id_pref);
+                       var header      = getObjectHeight('ObjectListViewport_TD_Header' + id_pref);
+                       var footer      = getObjectHeight('ObjectListViewport_TD_Footer' + id_pref);
+
+                       /* Calculate the new visible entry part height. */
+                       var calc = (viewport  - ( header + footer ));
+                       document.getElementById('ObjectListViewport_Entry_Cover' + id_pref).style.height = calc;
+
+                       /* Reduce width of entry list, we need some space to 
+                        *  display the scrollbar without breaking the layout
+                        */
+                       dbg.value += " " + calc;
+                       var viewport = getObjectWidth('ObjectListViewport_Table' + id_pref);
+                       document.getElementById('ObjectListViewport_Entry_Table' + id_pref).style.width = (viewport - 16) + 'px';
+               }
+       }
+
+       
+       /* Return all elements of a specific class */   
+       function getElementsByStyleClass (className) {
+               var all = document.all ? document.all : document.getElementsByTagName('*');
+               var elements = new Array();
+               for (var e = 0; e < all.length; e++)
+                       if (all[e].className == className)
+                               elements[elements.length] = all[e];
+               return elements;
+       }
+
+
+       /* Return integer value of style attribute width for specified ID  */
+       function getObjectWidth(obj){
+               obj = getComputedStyle(document.getElementById(obj),"").width;
+               return(parseInt(obj.replace(/px/,''))); 
        }
+
+       /* Return integer value of style attribute height for specified ID  */
+       function getObjectHeight(obj){
+               obj = getComputedStyle(document.getElementById(obj),"").height;
+               return(parseInt(obj.replace(/px/,'')));
+       }       
+
+-->
 </script>
 </head>
-<body style="height:100%;position:relative" id='body'>
+<body>
 <input type='text' id='debug' value="" style='width:100%;'>
-       <table style='height:100%;width:100%;background-color:#6788FF;border: solid 5px #000000;'>
+       <table style='height:90%;width:90%;background-color:#DDDDDD; border: solid 1px;'
+               cellspacing=0 cellpadding=0>
                <tr>
-                       <td style='width:30%;height:20%;background-color:#AAA006;'>
+                       <td style='width:30%;height:30%;background-color:#EEEEEE;'>
                                hallo<br>
                                hallo<br>
                                hallo<br>
@@ -112,27 +170,24 @@ window.onresize = setHeight;
                                hallo<br>
                                hallo<br>
                        </td>
-                       <td style='background-color:#660099;'>
-                               <?php
-                               echo passthru("./test");
-                               ?>
+                       <td style='background-color:#EEEEEE;'>
+                               <?php echo passthru("./test"); ?>
                        </td>
                </tr>
                <tr>
-                       <td style='background-color:#999777;'>
-                               hallo<br>
-                               hallo<br>
+                       <td style='height:30%;background-color:#999777;'>
+                               <?php echo passthru("./test"); ?>
                        </td>
                        <td style='background-color:#AAA006;'>
-                               hallo<br>
-                               hallo<br>
+                       </td>
+               </tr>
+               <tr>
+                       <td style='background-color:#999777;'>
+                       </td>
+                       <td style='background-color:#999777;'>
+                               <?php echo passthru("./test"); ?>
                        </td>
                </tr>
        </table>
-<script type="text/javascript">
-//     document.getElementById('ObjectListViewport_Entry_Cover').style.height= document.getElementById('ObjectListViewport').height;
-//             document.getElementById('body').style.height = getComputedStyle(document.getElementById('body'),"").height;
-       document.getElementById('ObjectListViewport_Entry_Cover').style.height= "200px";
-</script>
 </body>
 </html>