No Scroll bars,when image is scaled to fit in frame in Mozilla firefox/netscape [Archive]

techyadu

10-17-2005, 08:54 AM

I am scaling an image which gets loaded into a frame.The Frame can be resized.
I am calculating the frame width and height and assigning this to image's width and height.But the requirement is there should be no scrollbars.
but this is working fine in IE but not in MozillaFirfox/Netscape.
below is the code i am using:

var oSlide;
var nSlideWidth;
var nSlideHeight;
var oCanvas;
var oImg;
var origWidth = null;
var origHeight = null;

function Init()
{
oSlide = document.getElementById("slide_img");
oCanvas = document.getElementById("canvas_div");
centerImg();

}
function centerImg()
{
if (!origWidth)
{
window.setTimeout("centerImg()", 500);
return;
}

var cltWidth = document.body.clientWidth;
var cltHeight = document.body.clientHeight;
var widthRatio = (1.0*cltWidth)/origWidth;
var heightRatio = (1.0*cltHeight)/origHeight;

if (widthRatio < heightRatio)
theRatio = widthRatio;
else
theRatio = heightRatio;

var newWidth=origWidth*theRatio;
var newHeight=origHeight*theRatio;

var s = oSlide.style;
s.posWidth=newWidth;
s.posHeight=newHeight;
s.posLeft=(cltWidth-newWidth)/2;
s.posTop=(cltHeight-newHeight)/2;

nSlideWidth = newWidth;
nSlideHeight = newHeight;
var c = oCanvas.style;

c.posWidth = cltWidth;
c.posHeight= cltHeight;
}

function slideloaded()
{
origWidth = oImg.width;
origHeight = oImg.height;
}

</script>
</HEAD>
<BODY bgcolor="#999999" onclick="setTimeout('DropMenu()',2250);" oncontextmenu="PopupMenu(event?event:window.event);return false;" scroll="no" onresize="centerImg()" onload="Init()">

<script LANGUAGE="JAVASCRIPT">
var oImg = new Image();
oImg.src = "<%=SlideUrl%>";
oImg.onload = slideloaded;
slideloaded();
</script>
<div id="slide_img" STYLE="position:absolute; background-color:black; height:0px; width:0px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='<%=SlideUrl%>', sizingMethod='scale');">
</div>

<div id="canvas_div"
style="position:absolute;left:0;top:0">
</div>

I have changed accordingly in another file for Mozilla/Netscape which can be called for the browser:

var oSlide;
var nSlideWidth;
var nSlideHeight;
var oCanvas;
var oImg;
var origWidth = null;
var origHeight = null;
function Init()
{
oSlide = document.getElementById("slide_img");
oCanvas = document.getElementById("canvas_div");
centerImg();

}

function centerImg()
{
if (!origWidth)
{
window.setTimeout("centerImg()", 500);
return;
}

var cltWidth = document.body.clientWidth;
var cltHeight = document.body.clientHeight;

if (window.innerWidth){
if (document.body.offsetWidth){
if (window.innerWidth!=document.body.offsetWidth)
cltWidth = document.body.offsetWidth;
}
cltWidth = window.innerWidth;
}

if (window.innerHeight){
if (document.body.offsetHeight){
if (window.innerHeight!=document.body.offsetHeight)
cltHeight = document.body.offsetHeight;
}
cltHeight = window.innerHeight;
}
var widthRatio = (1.0*cltWidth)/origWidth;
var heightRatio = (1.0*cltHeight)/origHeight;

if (widthRatio < heightRatio)
theRatio = widthRatio;
else
theRatio = heightRatio;

var newWidth=origWidth*theRatio;
var newHeight=origHeight*theRatio;

var s = oSlide.style;
s.width=newWidth;
s.height=newHeight;
s.left=(cltWidth-newWidth)/2;
s.top=(cltHeight-newHeight)/2;

nSlideWidth = newWidth;
nSlideHeight = newHeight;
var c = oCanvas.style;
c.width = cltWidth;
c.height= cltHeight;
}

function slideloaded()
{
origWidth = oImg.width;
origHeight = oImg.height;
}

</script>
</HEAD>
<BODY bgcolor="#999999" onclick="setTimeout('DropMenu()',2250);" oncontextmenu="PopupMenu(event?event:window.event);return false;" scroll="no" onresize="centerImg()" onload="Init()">

<script LANGUAGE="JAVASCRIPT">
var oImg = new Image();
oImg.src = "<%=SlideUrl%>";
oImg.onload = slideloaded;
slideloaded();
</script>

<table border="0" cellspacing="0" cellpadding="6" bgcolor="#999999" align="left">
<TR>
<TD align="center" valign="middle" >
<IMG id="slide_img" style="position:absolute;top:-2000;left:-2000;WIDTH:100%;HEIGHT:100%;" SRC="<%=SlideUrl%>" border="0" galleryimg="no" />

</TD>
</TR>
</table>

<div id="canvas_div" style="position:absolute;left:-2000;top:-2000;overflow:hidden">
</div>