radiantbill
March 21st, 2003, 03:31 PM
I've inherited a project which requires backwards compatibility with Netscape 4. In the GUI there is a div that scrolls its content fine in IE4+, and Netscape 6. In NS4, since I can't tell it to scroll the overflow, I've created a workaround which displays <div> tags containing a mock scrollbar. What I'm finding is that I can scroll the layer, but the text is still not visible. I'm moving the layer vertically, in increments of 10 pixels every time a button is clicked, and then moving the clip area by incrementing the clip.top and clip.bottom area with every movement. What I'm finding is that clip.bottom won't increase beyond the height of the div set in the stylesheet.
Code below:
<script language="JavaScript">
if( document.images && document.layers ) {
document.NN4SliderTop.visibility = "show";
document.NN4SliderBackground.visibility = "show";
document.NN4SliderBottom.visibility = "show";
//document.contentContainer.clip.height = 357;
document.contentContainer.clip.top = 0;
document.contentContainer.height = document.contentContainer.document.height;
//document.contentContainer.clip.bottom = 357;
//document.contentContainer.height = document.contentContainer.document.height;
//alert(document.contentContainer.document.height);
}
function swapImage(imgName,fileName) {
if( document.images ) {
switch(imgName) {
case 'upButton':
document.layers[1].document.images[0].src = eval("'assets/images/" + fileName + "'");
break;
case 'downButton':
document.layers[3].document.images[0].src = eval("'assets/images/" + fileName + "'");
break;
}
}
}
var currTop, currBottom, currHeight, dir;
function scrollLayer(dir) {
currTop = document.layers["contentContainer"].clip.top;
currBottom = document.layers["contentContainer"].clip.bottom;
currHeight = document.layers["contentContainer"].height;
// set the increment to move up or down
var inc = (dir == "up") ? 10 : -10;
// Don't do anything if either already at top or bottom
if( ( currTop <= 0 && dir == "up" ) || ( currBottom >= currHeight && dir == "down") ) {
inc = 0;
}
//Adjust the visible area
switch(dir) {
case 'up': // Movin' on up
document.layers["contentContainer"].clip.top = currTop - 10;
//document.layers["contentContainer"].clip.bottom = currBottom + 10;
break;
case 'down':
document.layers["contentContainer"].clip.top = currTop + 10;
document.layers["contentContainer"].clip.bottom = currBottom - 10;
break;
}
//Shift the layer
document.contentContainer.moveBy(0,inc);
}
</script>
Code below:
<script language="JavaScript">
if( document.images && document.layers ) {
document.NN4SliderTop.visibility = "show";
document.NN4SliderBackground.visibility = "show";
document.NN4SliderBottom.visibility = "show";
//document.contentContainer.clip.height = 357;
document.contentContainer.clip.top = 0;
document.contentContainer.height = document.contentContainer.document.height;
//document.contentContainer.clip.bottom = 357;
//document.contentContainer.height = document.contentContainer.document.height;
//alert(document.contentContainer.document.height);
}
function swapImage(imgName,fileName) {
if( document.images ) {
switch(imgName) {
case 'upButton':
document.layers[1].document.images[0].src = eval("'assets/images/" + fileName + "'");
break;
case 'downButton':
document.layers[3].document.images[0].src = eval("'assets/images/" + fileName + "'");
break;
}
}
}
var currTop, currBottom, currHeight, dir;
function scrollLayer(dir) {
currTop = document.layers["contentContainer"].clip.top;
currBottom = document.layers["contentContainer"].clip.bottom;
currHeight = document.layers["contentContainer"].height;
// set the increment to move up or down
var inc = (dir == "up") ? 10 : -10;
// Don't do anything if either already at top or bottom
if( ( currTop <= 0 && dir == "up" ) || ( currBottom >= currHeight && dir == "down") ) {
inc = 0;
}
//Adjust the visible area
switch(dir) {
case 'up': // Movin' on up
document.layers["contentContainer"].clip.top = currTop - 10;
//document.layers["contentContainer"].clip.bottom = currBottom + 10;
break;
case 'down':
document.layers["contentContainer"].clip.top = currTop + 10;
document.layers["contentContainer"].clip.bottom = currBottom - 10;
break;
}
//Shift the layer
document.contentContainer.moveBy(0,inc);
}
</script>