CBE iFrame DemoThe 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 DocsCBE ExamplesPHP ExampletestMiniBrowser 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> |