Javascript Image Resize
Posted: Fri Jan 19, 2007 7:19 pm
I have a page that consists of a series of slideshows. When an image loads onto the page, it is resized to fit the slideshow space. I've displayed this page in safari, firefox, and netscape with no problem, but when I run it in IE, the resize function upsets the balance of things.
The page is laid out using CSS, with sidebar that should float left of the display area which has a fixed width. However, when the resize function is called, the display area shifts down under the sidebar. Because the problem only occurs in IE, I suspect it has something to do with the min-width vs. width or padding+border+content=width wierdness of IE making the display area shift down, but I'm out of ideas as to how to fix it.
The Image & Resize code:
The CSS for the sidebar and the display area:
The problem in person:
http://www.members.cox.net/ashleyhill/p ... phlet.html
Appreciating any assistance.
H.
The page is laid out using CSS, with sidebar that should float left of the display area which has a fixed width. However, when the resize function is called, the display area shifts down under the sidebar. Because the problem only occurs in IE, I suspect it has something to do with the min-width vs. width or padding+border+content=width wierdness of IE making the display area shift down, but I'm out of ideas as to how to fix it.
The Image & Resize code:
Code: Select all
//shows image
function _vImage(viewNumber){
var iPlace = _pName+"Image";
var iContent = new Image();
iContent.src = _vArray[viewNumber].getAttribute('swfImageFilename');
vImage = document.getElementById(iPlace);
nImage = document.createElement('img');
nImage.id = iPlace;
nImage.src = iContent.src;
nImage.className = 'viewimage';
nImage.onload = _myResize;
vImage.parentNode.replaceChild(nImage,vImage);
nImage.onload();
}
//resizes the image
function _myResize(){
iName= this.id;
imageStyle=document.getElementById(iName);
oWidth = imageStyle.width;
if (oWidth >530){
scale = (530/oWidth);
nHeight = imageStyle.height*scale;
nWidth = oWidth *scale;
imageStyle.width = nWidth;
imageStyle.height = nHeight;
}
}
Code: Select all
.sidebar{
margin-left:34px;
float:left;
position:fixed;
top:130px;
border:0px;
padding-top: 30px;
}
#showspace{
background-color:#a6cf55;
border-left:3px solid #7cb746;
margin-top:20px;
margin-bottom:100px;
margin-left:194px;
padding-left:15px;
padding-right:15px;
width:550px;
min-height:400px;
}
http://www.members.cox.net/ashleyhill/p ... phlet.html
Appreciating any assistance.
H.