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.

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>

CBE iFrame Demo

CBE Docs

CBE Examples

PHP Example

MiniBrowser Constructor and Event Listeners.