Entry
IE have iframe which is working very well, how about NN4, I did try on iLayer but i have a lot of problem, pls HELP.
Jan 23rd, 2001 15:25
Ian Grant, eric ooi,
Although IFRAME and ILAYER seem similar at first, they are actually
quite different. IFRAMEs are essentially frames separated from their
framesets and that also follow the flow of the document. ILAYERS are
layers that also follow the flow of the document, much like a
relatively positioned LAYER.
As you can see they are quite different. IFRAMES allow you to use all
the benefits of a frame, such as scrollbars, etc. ILAYERS don't have
these features. If you want to make ILAYER behave more like IFRAMES,
you'll have to script your own scrollbars and scrolling. This will
require event handling, CSS-P and clipping in Javascript.
<script language="javascript" type="text/javascript">
<!-- Hide Javascript from older browsers
// Do your browser detection first and assign to isNN4, isIE4, isNN6
var scrollPosition = 0; // initial position of a fresh page load
var buttonDown = false; // if mouse button down, equals true
var MAXHEIGHT = 290; // clip height of scroll window
var SCROLL = 10; // scroll 10 pixels at a time
// change the SRC attribute in NN4, IE4+, and NN6
function changeFrameSrc(frameID, sourceURL) {
if (isNN4) {
eval("document." + frameID + ".src=" + sourceURL);
} else if (isIE4) {
eval(frameID + ".location.href=" + sourceURL);
} else if (isNN6) {
var obj = document.getElementsByTagName('iframe');
obj[frameID].setAttribute("src", sourceURL);
}
}
// scroll the contents of the frame in NN4 and IE4+ (not NN6) 8^(
// to scroll horizontally, use clip.left and clip.right in NN4 and
// scroll(horizontal, vertical) in IE4+
function scrollWin(frameID, scr) {
if (isNN4) {
var obj = document.layers[frameID];
var pos = obj.clip.top - scr;
obj.clip.top=scr
obj.clip.bottom -= pos;
obj.top += pos;
} else if (isIE4) {
eval("window." + frameID + ".scroll(0," + scr+ ")");
} else if (isNN6) {
// I am currently working on a technique to do this in NN6
}
}
// if button is pressed down continually, repeatedly scroll
function scrollUp(frameID) {
if (buttonDown) {
scrollPostition -= SCROLL;
if (scrollPostition >= 0) {
scrollWin(frameID, scrollPostition);
setTimeout("scrollUp()", 30);
} else {
scrollPostition = 0;
scrollWin(frameID, 0);
}
}
}
// watch out for the bottom of the page
function scrollDown(frameID) {
if (buttonDown) {
scrollPostition += SCROLL;
scrollHeight = getFrameHeight('myLayer', 'myIFrame') -
MAXHEIGHT;
if (scrollHeight < 1) return;
if (scroll <= scrollHeight) {
scrollWin(frameID, scrollPosition);
setTimeout("scrollDown()", 30);
} else {
scrollPostition = scrollHeight;
scrollWin(frameID, scrollPosition);
}
}
}
// every time a mouse button is pressed, check if it's over a button
// I haven't finished writing the routine for NN6 yet... 8^(
function mouseDown(evt) {
// in NN4 you must check every layer against the event X and Y
if (isNN4) {
var testElem;
var xPos = evt.pageX;
var yPos = evt.pageY;
var elementName = null;
for (i = document.layers.length - 1; i >= 0; i--) {
testElem = document.layers[i]
if ((xPos > testElem.left) &&
(xPos < testElem.left + testElem.clip.width) &&
(yPos > testElem.top) &&
(yPos < testElem.top + testElem.clip.height)) {
elementName = testElem.id;
break;
}
}
if (elementName == null) return true;
} else if (isIE4) {
// in IE4, you only have to ask which element triggered the
event
elementName = event.srcElement.name;
}
if (elementName) {
if (elementName.indexOf('upbutton') != -1) {
buttonDown = true;
scrollUp(elementName);
return false;
}
if (elementName.indexOf('downbutton') != -1) {
buttonDown = true;
scrollDown(elementName);
return false;
}
}
return true;
}
// if the user releases the button, reset the flag
function mouseUp(evt) {
buttonDown = false;
return false;
}
// return the calculated height of the external HTML source
function getFrameHeight(frameID, frameName) {
if (isNN4) {
return document.layers[frameID].document.height;
} else if (isIE4) {
obj = eval(frameID);
return obj.document.body.scrollHeight;
} else if (isNN6) {
return window.frames[frameName].document.body.offsetHeight;
}
}
// reset to top of document (onload)
function setScrollPosition(frameID) {
scrollPosition = 0;
scrollWin(frameName, 0);
}
// NN4 requires that you set up event capturing first
if (isNN4) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);
document.onmousedown=mouseDown;
document.onmouseup=mouseUp;
// End of hiding Javascript -->
</script>
</head>
<body>
<ilayer id="myLayer"
src="index.html"
height="290"
width="600"
clip="0,0,600,290"
z-index="1"
onLoad="setScrollPosition('myLayer')"></ilayer>
<!-- hide <IFRAME> from Netscape 4; IE ignores the <ILAYER> tag -->
<nolayer>
<!-- make <IFRAME> behave like <ILAYER> for compatability -->
<iframe id="myLayer"
name="myIFrame"
src="index.html"
height="290"
width="600"
frameborder="0"
hspace="0"
vspace="0"
marginwidth="0"
marginheight="0"
scrolling="no"
onLoad="setScrollPosition('myLayer')"></iframe>
</nolayer>
<!-- use your own graphics for up and down scroll buttons -->
<span id="upbutton"><img src="upbutton.gif" width="15" height="15"
alt=""></span>
<span id="downbutton"><img src="downbutton.gif" width="15"
height="15" alt=""></span>
</body>
I hope that my code is mostly complete (with the exception of the
missing NN6 routines). I wrote most of this from memory, but I had to
refer back to my original source code from time to time. If you are
having difficulties making this code work please drop me a line.
(Hopefully by the time you do, I will have my code working in Netscape
6 as well... 8^)
I suppose there is some room for improvement in my code, but I think
you'll get the idea once having examined it. I hope this helps you.
Ian Grant
idgrant@pandi.20m.com
