HowTo:

HowTo: Build Outlook Like Bar seen on left hand...

    <script language="JavaScript" src="crossbrowser.js" type="text/javascript">
    </script>
    <script language="JavaScript" src="outlook.js" type="text/javascript">
    </script>

    <SCRIPT>

    // ---------------------------------------------------------------------------
    // Example of howto: use Outlook Like Bar
    // ---------------------------------------------------------------------------

      //create OutlookBar-Object:
      //              Name
      //              x-position
      //              y-Position
      //              width
      //              height
      //              background-color
      //              page background-color (needed for OP5)
      //(screenSize object is created by 'crossbrowser.js')
      //

      var o = new createOutlookBar('Bar',0,0,screenSize.width,screenSize.height,'#606060','white') // OutlookBar
      var p

      //create first panel..
      p = new createPanel('al','Anwendungen');

      //add buttons:
      //             image name
      //             label text
      //             onClick JavaScript code
      //

      p.addButton('netm.gif','Netmanage','alert("NetM")');
      p.addButton('news.gif','News','alert("News")');
      p.addButton('word.gif','Word','alert("Word")');
      p.addButton('peditor.gif','Editor','alert("Editor")');
      p.addButton('mail.gif','Mail','alert("Mail")');
      o.addPanel(p);

      //create second panel...
      p = new createPanel('p','Postfächer');
      p.addButton('mail.gif','Mail 2','alert("Mail2")');
      p.addButton('peditor.gif','Personal<BR>Editor','alert("Personal Editor")');
      p.addButton('word.gif','Projekte','alert("Projekte")');
      p.addButton('news.gif','Adresse','alert("Adresse")');
      p.addButton('mail.gif','Postausgang','alert("Postausgang")');
      p.addButton('mail.gif','Posteingang','alert("Posteingang")');
      p.addButton('news.gif','Information aus<BR>erster Hand','alert("Infos")');
      p.addButton('peditor.gif','Gelbe Post','alert("Gelbe Post")');
      p.addButton('word.gif','Schreiben','alert("Schreiben")');
      o.addPanel(p);

      //create two empty panels...
      p = new createPanel('l','Leeres Panel');
      o.addPanel(p);

      p = new createPanel('l2','Leeres Panel 2');
      o.addPanel(p);

      o.draw();         //draw the Outlook Like Bar!

    //-----------------------------------------------------------------------------
    //functions to manage window resize
    //-----------------------------------------------------------------------------
    //resize OP5 (test screenSize every 100ms)
    function resize_op5() {
      if (bt.op5) {
        o.showPanel(o.aktPanel);
        var s = new createPageSize();
        if ((screenSize.width!=s.width) || (screenSize.height!=s.height)) {
          screenSize=new createPageSize();
          //need setTimeout or resize on window-maximize will not work correct!
          //benötige das setTimeout oder das Maximieren funktioniert nicht richtig
          setTimeout("o.resize(0,0,screenSize.width,screenSize.height)",100);
        }
        setTimeout("resize_op5()",100);
      }
    }

    //resize IE & NS (onResize event!)
    function myOnResize() {
      if (bt.ie4 || bt.ie5 || bt.ns5) {
        var s=new createPageSize();
        o.resize(0,0,s.width,s.height);
      }
      else
        if (bt.ns4) location.reload();
    }

    </SCRIPT>

    </head>
    <!-- need an onResize event to redraw outlookbar after pagesize changes! -->
    <!-- OP5 does not support onResize event! use setTimeout every 100ms -->
    <body onLoad="resize_op5();" onResize="myOnResize();">