CBE iFrame Demo

The Mini Browser

Note: This does not work in Opera or NN4

On this page there is a positioned element with an embedded iFrame. The following pages will open in the iFrame that has focus.

CBE Docs

Getting Started

CBE Object Model

CBE Event Model

CBE Examples

Inner Solar System

Menu 3 Template

Menu 4 Template

PHP Example

php Calendar

test

MiniBrowser Constructor and Event Listeners.

function MiniBrowser(uN, uW, uH) {
  // Properties:
  this.titleHeight = 18;
  this.mainMargin = 2;
  this.titleColor = '#ffffff';
  this.titleBgColor = '#0000cc';
  this.mainBgColor = '#999999';
  this.eMain = document.getElementById('idMB'+uN);
  this.eTitle = document.getElementById('idMBT'+uN);
  this.eIContainer = document.getElementById('idMBC'+uN);
  var oIframe = document.getElementById('idMBF'+uN);
  if (oIframe && oIframe.contentWindow) // ie6 and Moz
    this.eIframe = oIframe.contentWindow;
  else
    this.eIframe = document.frames['idMBF'+uN]; // ie5
  // Methods:
  this.replace = function(url) {
    this.eIframe.location.replace(url);
  }
  // Setup Main Container:
  with (this.eMain.cbe) {
    background(this.mainBgColor);
    resizeTo(uW+(2*this.mainMargin), uH+this.titleHeight+(2*this.mainMargin));
    moveTo('center');
    show();
  }
  // Setup Titlebar
  with (this.eTitle.cbe) {
    color(this.titleColor);
    background(this.titleBgColor);
    resizeTo(uW, this.titleHeight);
    moveTo(this.mainMargin, this.mainMargin);
    addEventListener('dragStart', mbDragStartListener, false);
    addEventListener('drag', mbDragListener, false);
    addEventListener('dragEnd', mbDragEndListener, false);
    show();
  }
  // Setup iFrame Container
  with (this.eIContainer.cbe) {
    resizeTo(uW, uH);
    moveTo(this.eTitle.cbe.left(), this.eTitle.cbe.top()+this.eTitle.cbe.height());
    show();
  }
} // end MiniBrowser Constructor

function mbDragStartListener(e) {
  mb1.eIContainer.cbe.hide();
}
function mbDragListener(e) {
  mb1.eMain.cbe.moveBy(e.dx, e.dy);  
}
function mbDragEndListener(e) {
  mb1.eIContainer.cbe.show();
}

Here's the CSS for the Mini Browser.

.clsMB {
  position:absolute; visibility:hidden; overflow:hidden;
  width:100%; height:100%; clip:rect(0,100%,100%,0);
  margin:0px; padding:0px;
}
.clsMBT {
  position:absolute; visibility:hidden; overflow:hidden;
  font-family:georgia,"times new roman",serif; font-size:12px; font-weight:bold;
  color:#ffffff; background:#0000cc; margin:0px; padding:2px 0px 1px 4px;
  width:100%; height:100%; clip:rect(0,100%,100%,0);
  cursor:move;
}

Here's the HTML for the Mini Browser.

<div id='idMB0' class='clsMB'>
  <div id='idMBT0' class='clsMBT'>CBE iFrame Demo</div>
  <div id='idMBC0' class='clsMB'>
    <iframe
      src='menu1_template.html'
      id='idMBF0' name='idMBF0'
      width='600' height='200'
      marginwidth='0' marginheight='0'
      scrolling="auto" frameborder="0">
      <p>Your browser doesn't support (or has disabled) iFrames.</p>
    </iframe>
  </div>  
</div>