Javascript Image Resize

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
a.heresey
Forum Commoner
Posts: 59
Joined: Wed Dec 13, 2006 7:31 pm
Location: Chesapeake, VA, US

Javascript Image Resize

Post 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.
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post 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)
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post 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.
User avatar
a.heresey
Forum Commoner
Posts: 59
Joined: Wed Dec 13, 2006 7:31 pm
Location: Chesapeake, VA, US

Byte order

Post by a.heresey »

Thanks Kieran, I was wondering what that thingy was...
User avatar
a.heresey
Forum Commoner
Posts: 59
Joined: Wed Dec 13, 2006 7:31 pm
Location: Chesapeake, VA, US

conditional comments...

Post 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?
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

instead of element.width try element.style.width
User avatar
Ollie Saunders
DevNet Master
Posts: 3179
Joined: Tue May 24, 2005 6:01 pm
Location: UK

Post by Ollie Saunders »

btw: IE 6 and earlier don't support min-width, max-width, min-height and max-height.
User avatar
a.heresey
Forum Commoner
Posts: 59
Joined: Wed Dec 13, 2006 7:31 pm
Location: Chesapeake, VA, US

IE7

Post 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.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post 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.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

Kieran loves jquery.

Maybe too much. :P
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

I'm not ashamed of my jquery perversion! It makes me feel soooo.....

*Kieran check himself into therapy*
User avatar
a.heresey
Forum Commoner
Posts: 59
Joined: Wed Dec 13, 2006 7:31 pm
Location: Chesapeake, VA, US

And the truth comes out...

Post 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:
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

http://jquery.com is a javascript library (and my lover)

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