Page 1 of 1

Javascript Image Resize

Posted: Fri Jan 19, 2007 7:19 pm
by a.heresey
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:

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;
		}
				
		
	}
The CSS for the sidebar and the display area:

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;
}
The problem in person:
http://www.members.cox.net/ashleyhill/p ... phlet.html

Appreciating any assistance.

H.

Posted: Fri Jan 19, 2007 7:24 pm
by nickvd
The trick is to feed internet explorer (google search: conditional comments) a different stylesheet with the width of the right side (or left side) a few pixels smaller than the rest of the browsers (google search: ie box model bugs)

Posted: Fri Jan 19, 2007 7:31 pm
by Kieran Huggins
also Ashley: you're saving your pages as UTF-8 while the content type is set to iso-8859-1. The "" at the top of the page is called a "byte order mark" and will disappear when you've set the character encoding properly.

Byte order

Posted: Fri Jan 19, 2007 7:56 pm
by a.heresey
Thanks Kieran, I was wondering what that thingy was...

conditional comments...

Posted: Fri Jan 19, 2007 8:07 pm
by a.heresey
didn't work. I tried feeding IE 10px less on the display area width and the frame around the image, no worky.

The problem only show's up after the resize function is called. If an image is loaded that is not resized, then the page pops back into it's correct place. I was thinking maybe there's something I should reset in the code?

Posted: Fri Jan 19, 2007 9:32 pm
by Kieran Huggins
instead of element.width try element.style.width

Posted: Sat Jan 20, 2007 4:19 am
by Ollie Saunders
btw: IE 6 and earlier don't support min-width, max-width, min-height and max-height.

IE7

Posted: Sat Jan 20, 2007 6:38 am
by a.heresey
I originally wrote the code to use element.style.width and it broke...
In IE.

I am testing in IE7. It appears that IE7 doesn't support min/max correctly either.

Posted: Sat Jan 20, 2007 8:21 am
by Kieran Huggins
You could use jquery... it handles browser diffs for you AND it massages your feet while it takes out the trash!




Well... it does the cross browser stuff anyway.

Posted: Sat Jan 20, 2007 8:22 am
by feyd
Kieran loves jquery.

Maybe too much. :P

Posted: Sat Jan 20, 2007 8:27 am
by Kieran Huggins
I'm not ashamed of my jquery perversion! It makes me feel soooo.....

*Kieran check himself into therapy*

And the truth comes out...

Posted: Sat Jan 20, 2007 8:47 am
by a.heresey
jquery is a php library, yes?

Well, cough, cough, the server I'm using, cough...

Won't let me use PHP! :oops:

Hence the jumpy javascript-ness of the design.

I'm thinking I'll have make a "special" version of the page for IE with no sliding. :banghead:

Posted: Sat Jan 20, 2007 8:58 am
by Kieran Huggins
http://jquery.com is a javascript library (and my lover)

You should get that cough looked at.. it's going around!