CBE iFrame Demo #2

Note: This does not work in IE5<, Opera nor NN4.

The Mini Browser

The MiniBrowser object is dynamically created. You can have as many as memory permits. The URL and title can be changed at any time. They are draggable, minimizable, and "come to top" when focused. When minimized, they float in the lower left corner when the page is scrolled. Just click to restore.

The following links will open pages in the MiniBrowser that has the focus.

CBE Docs

Getting Started

CBE Object Model

CBE Event Model

CBE Examples

Menu 3 Template

Menu 4 Template

PHP Example

php Calendar

 

windowOnload()

function windowOnload() {

  new MiniBrowser('cen', 0, 500, 300, "CBE Menu 1", 'menu1_template.html');
  
  new MiniBrowser('se', 0, 400, 200, "CBE Menu 2", 'menu2_template.html');
  
  window.cbe.addEventListener('scroll', winScrollListener);

}

The MiniBrowser Constructor

function MiniBrowser(uX, uY, uW, uH, sTitle, sUrl) {
  
  /* Add this mb to the array mbAll */
  if (!window.mbAll) {
    window.mbAll = new Array();
    window.mbHiZ = 0;
    window.mbFocus = this;
  }
  this.index = mbAll.length;
  mbAll[this.index] = this;
  this.init = true;
  /* Argument properties */
  this.x = uX;
  this.y = uY;
  this.width = uW;
  this.height = uH;
  this.title = sTitle;
  this.url = sUrl;
  /* Default properties
     you can change these then call paint() */
  this.minVis = 125; // amount visible when minimized
  this.titleHeight = 18;
  this.mainMargin = 2;
  this.titleColor = '#ffffff';
  this.titleBgColor = '#0000cc';
  this.mainBgColor = '#999999';
  this.border = 1;
  
  /* Create elements */

  this.eMain = document.cbe.createElement("DIV");
  this.eMain.id = 'idMBM' + mbAll.length;
  document.cbe.appendChild(this.eMain);
  this.eMain.cbe.addEventListener('click', mbMouseDownListener, false);
  this.eMain.cbe.mb = this;

  this.eTitle = document.cbe.createElement("DIV");
  this.eTitle.id = 'idMBT' + mbAll.length;
  this.eMain.cbe.appendChild(this.eTitle);
  this.eTitle.innerHTML = "MB"+mbAll.length;
  with(this.eTitle.cbe) {
    addEventListener('dragStart', mbDragStartListener, false);
    addEventListener('drag', mbDragListener, false);
    addEventListener('dragEnd', mbDragEndListener, false);
  }

  this.eCtrl = document.cbe.createElement("DIV");
  this.eCtrl.id = 'idMBC' + mbAll.length;
  this.eTitle.cbe.appendChild(this.eCtrl);
  this.eCtrl.innerHTML =
    "<img title='Minimize' width='14' height='14' src='../../images/cb_x.gif' border='0'>";

  this.eBody = document.cbe.createElement("DIV");
  this.eBody.id = 'idMBB' + mbAll.length;
  this.eMain.cbe.appendChild(this.eBody);

  this.eIframe = document.createElement("IFRAME");
  this.eIframe.id = this.eIframe.name = 'idMBI' + mbAll.length;
  this.eBody.appendChild(this.eIframe);
  
  /* Methods */

  // REPLACE
  this.replace = function(url, sTitle) {
    this.eIframe.src = url;
    this.url = url;
    if (sTitle) {
      this.title = sTitle;
      this.eTitle.firstChild.nodeValue = this.title;
    }
  }
  // FOCUS
  this.focus = function() {
    if (!mbFocus || this.minimized) return;
    mbFocus.eBody.cbe.hide();
    mbFocus.eTitle.cbe.color('#999999');
    mbFocus = this;
    mbFocus.eMain.cbe.zIndex(++mbHiZ);
    mbFocus.eTitle.cbe.color(this.titleColor);
    mbFocus.eBody.cbe.show();
  }
  // CLOSE
  this.close = function() {
    this.eMain.cbe.hide();
  }
  // MINIMIZE
  this.minimize = function() {
    if (!this.minimized) {
      this.minimized = true;
      this.x = this.eMain.cbe.pageX() - document.cbe.scrollLeft();
      this.y = this.eMain.cbe.pageY() - document.cbe.scrollTop();
      this.eBody.cbe.hide();
      this.eMain.cbe.resizeTo(
        this.eMain.cbe.width(),
        this.eTitle.cbe.height() + (2*this.mainMargin) + (2*this.border)
      );
      this.eMain.cbe.moveTo(
        this.minVis - this.eMain.cbe.width(),
        document.cbe.scrollTop() + document.cbe.height() - ((this.index+1)*24)
      );
      this.clientOffset = this.eMain.cbe.pageY() - document.cbe.scrollTop();
    }
    return false;
  }
  // RESTORE
  this.restore = function() {
    if (this.minimized) {
      this.minimized = false;
      this.eMain.cbe.moveTo(
        this.x + document.cbe.scrollLeft(),
        this.y + document.cbe.scrollTop()
      );
      this.paint();
    }  
  }
  // PAINT
  this.paint = function() {
    /* Init main cbe */
    this.eMain.style.border = 'solid '+this.border+'px '+this.titleBgColor;
    with (this.eMain.cbe) {
      background(this.mainBgColor);
      resizeTo(
        this.width+(2*this.mainMargin)+(2*this.border),
        this.height+this.titleHeight+(3*this.mainMargin)+(2*this.border)
      );
      show();
    }

    /* Init titlebar cbe */
    if (this.title) this.eTitle.firstChild.nodeValue = this.title;
    with (this.eTitle.style) {
      color = '#999999';
      backgroundColor = this.titleBgColor;
      fontFamily = "verdana,arial,helvetica,sans-serif";
      fontSize = "12px";
      fontWeight = "bold";
      padding = "1px 4px 1px 4px";
      textAlign = 'right';
    }  
    with (this.eTitle.cbe) {
      resizeTo(this.width, this.titleHeight);
      moveTo(this.mainMargin, this.mainMargin);
      show();
    }

    /* Init control menu */
    with (this.eCtrl.cbe) {
      background(this.titleBgColor);
      resizeTo(this.titleHeight, this.titleHeight);
      moveTo(0, this.mainMargin);
      show();
    }

    /* Init iframe container */
    with (this.eBody.cbe) {
      resizeTo(this.width, this.height);
      moveTo(this.eTitle.cbe.left(), this.titleHeight+(2*this.mainMargin));
      hide();
    }
    /* Init iframe */
    with (this.eIframe) {
      width = this.width;
      height = this.height;
      marginWidth = 0;
      marginHeight = 0;
      frameBorder = 0;
      scrolling = 'auto';
    }  

    // Initial position
    if (this.init) {
      this.eMain.cbe.moveTo(this.x, this.y);
      this.eIframe.src = this.url;
      this.init = false;
    }

    /* Init floating offset */
    this.clientOffset = this.eMain.cbe.pageY() - document.cbe.scrollTop();
    
    this.focus();

  } // end paint()

  // Paint it
  setTimeout("mbAll["+(mbAll.length-1)+"].paint()", 125);
  
} // end MiniBrowser Constructor

The Event Listeners

function mbMouseDownListener(e) {
  if (e.cbeTarget.mb) {
    e.cbeCurrentTarget.mb.focus();      
  }
}

function mbDragStartListener(e) {
  if (e.cbeTarget.parentNode.mb) {
    var mb = e.cbeTarget.parentNode.mb;
    mb.focus();      
    if (!mb.minimized) mb.eBody.cbe.hide();
  }
}
function mbDragListener(e) {
  if (e.cbeTarget.parentNode.mb) {
    var mb = e.cbeTarget.parentNode.mb;
    mb.eMain.cbe.moveBy(e.dx, e.dy);  
  }
}
function mbDragEndListener(e) {
  if (e.cbeTarget.parentNode.mb) {
    var mb = e.cbeTarget.parentNode.mb;
    if (!mb.minimized) mb.eBody.cbe.show();
    mb.clientOffset = mb.eMain.cbe.pageY() - document.cbe.scrollTop();
    if (mb.minimized) mb.restore();
  }
  if (e.cbeTarget.id.indexOf('idMBC')!=-1) {
    if (e.cbeTarget.contains(e.pageX, e.pageY)) {
      if (e.cbeTarget.parentNode.parentNode.mb) {
        var mb = e.cbeTarget.parentNode.parentNode.mb;
        if (mb.minimized) mb.restore();
        else mb.minimize();
      }
    }  
  }
}
function winScrollListener() {
  for (var i=0; i<mbAll.length; ++i) {
    if (mbAll[i].minimized)
      mbAll[i].eMain.cbe.slideTo(
        mbAll[i].eMain.cbe.left(),
        document.cbe.scrollTop() + mbAll[i].clientOffset,
        500
      );
  }
}