6 Replies - 791 Views - Last Post: 04 May 2009 - 06:33 AM

#1 myles007  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 19
  • Joined: 11-April 09

IE Problems

Posted 29 April 2009 - 09:35 PM

I haven't done a lot of programming in Javascript and I've run into a problem.

Below is the function which is causing the problem:

function blendimage(divid, imageid, imagefile, millisec, waitTime, width, height)
{ 
	width = parseInt(width);	   //This was an attempt to fix my problem and is not needed for FireFox, Chrome,...
	height = parseInt(height);	///Same as above.

	var speed = Math.round(millisec / 100); 
	var timer = 0;
	 
	//set the current image as background
	document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";
	document.getElementById(divid).style.width = width +"px";
	document.getElementById(divid).style.height = height +"px";
	
	//make image transparent 
	changeOpac(0, imageid); 
	 
	//make new image 
	document.getElementById(imageid).src = imagefile;

	//fade in image 
	for(i = 0; i <= 100; i++) { 
		setTimeout("changeOpac(" + i + ",'" + imageid + "')",(timer * speed)); 
		timer++; 
	} 
	
	var nextImageInfo = getNextImage();
	var nextImage = nextImageInfo[0];
	var nextHeight = nextImageInfo[1];
	var nextWidth = nextImageInfo[2];
	setTimeout("blendimage('" + divid + "', '" + imageid + "', '" + nextImage + "', " + millisec +", " + waitTime + ", "
						   + nextWidth + ", " + nextHeight +")", waitTime);


This function is part of some Javascript that creates a slideshow which fades between images. It works as planned in Firefox and Chrome, but IE is not happy. The problem is here:

document.getElementById(divid).style.width = width +"px";
	document.getElementById(divid).style.height = height +"px";


For some reason the only way IE recognizes what I'm trying to do here is if I hardcode in a number. I used a typeof and found that width and height were coming in as undefined, hence the parseInt() above, but it didn't fix anything (or break anything in the other browsers).

Surely there is a way around this problem... does anyone know what it might be?

Is This A Good Question/Topic? 0
  • +

Replies To: IE Problems

#2 Astano  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 27
  • Joined: 09-July 07

Re: IE Problems

Posted 30 April 2009 - 04:18 AM

I've not had chance to look through this properly, but just a quick thought.

As soon as you add "px" onto the numbers for width and height you will be changing the numbers to a string so using parseInt is not really achieving anything.

Will have a look on my lunch break if I get chance and reply further.
Was This Post Helpful? 0
  • +
  • -

#3 myles007  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 19
  • Joined: 11-April 09

Re: IE Problems

Posted 30 April 2009 - 06:17 AM

View PostAstano, on 30 Apr, 2009 - 03:18 AM, said:

I've not had chance to look through this properly, but just a quick thought.

As soon as you add "px" onto the numbers for width and height you will be changing the numbers to a string so using parseInt is not really achieving anything.

Will have a look on my lunch break if I get chance and reply further.


That is a very good point.... That is something I completely overlooked (and shouldn't have...).

I was adding the 'px' because I was thinking it was necessary. Turns out it is not, but it also doesn't fix the problem. Removing the + "px" effected nothing for Chrome/Firefox, but IE still doesn't work (unless I just hardcode in a number... just the number without the px).

Thanks for your advice. If you come up with anything else, please send it my way.
Was This Post Helpful? 0
  • +
  • -

#4 SoLi  Icon User is offline

  • andydust.com

Reputation: 41
  • View blog
  • Posts: 1,438
  • Joined: 27-January 02

Re: IE Problems

Posted 01 May 2009 - 11:24 AM

if width and height are undefined for IE, then the problem most likely lies outside the scope of this function, seeing as these variables are arguments to the function. Please post the code where you are calling the function and the assignment of the width and height values.
Was This Post Helpful? 0
  • +
  • -

#5 myles007  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 19
  • Joined: 11-April 09

Re: IE Problems

Posted 02 May 2009 - 10:41 AM

View PostSoLi, on 1 May, 2009 - 10:24 AM, said:

if width and height are undefined for IE, then the problem most likely lies outside the scope of this function, seeing as these variables are arguments to the function. Please post the code where you are calling the function and the assignment of the width and height values.


The typeof function returns undefined in IE (unless I use parseInt), but regardless of whether or not I use parseInt alert statements in IE (along with the other browsers) will display the appropriate number value.... IE just won't use the value for the assignment. In my code below you might notice the test and test2 variables. This was an attempt to fix the problem. It works if I hard code those variables to a certain value, but still fails if I assign them to width and height.

I'm thinking that if I just make two global variables, width and height, that I set before calling the function again (instead of passing width and height as arguments) things will work, but I haven't gotten a chance to test it yet.

Anyway, here is the code:

//Javascript Document
 var interval = 1500; 
 var random_display = 0; 
 var image_dir = "New Folder/";
 var ImageNum = 0; 
 imageArray = new Array(); 
 imageArray[ImageNum++] = new imageItem(image_dir + "1.jpg", 448, 300);  //path, name, and dimensions
 imageArray[ImageNum++] = new imageItem(image_dir + "2.jpg", 448, 300); 
 imageArray[ImageNum++] = new imageItem(image_dir + "3.jpg", 448, 300);
 imageArray[ImageNum++] = new imageItem(image_dir + "4.jpg", 448, 300);
 imageArray[ImageNum++] = new imageItem(image_dir + "5.jpg", 448, 300); 
 imageArray[ImageNum++] = new imageItem(image_dir + "6.jpg", 448, 300);
 imageArray[ImageNum++] = new imageItem(image_dir + "7.jpg", 448, 300); 
 imageArray[ImageNum++] = new imageItem(image_dir + "8.jpg", 448, 300);
 
 
 var number_of_image = imageArray.length; 
 
function blendimage(divid, imageid, imagefile, millisec, waitTime, width, height)
{ 
	var test = width;		  //An attempt to fix the problem... works if a number is hard coded.
	var test2 = height;	   //Same as above.
	var speed = Math.round(millisec / 100); 
	var timer = 0;
	 
	//set the current image as background
	document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";
	document.getElementById(divid).style.width = test;
	document.getElementById(divid).style.height = test2;
	
	//make image transparent 
	changeOpac(0, imageid); 
	 
	//make new image 
	document.getElementById(imageid).src = imagefile;

	//fade in image 
	for(i = 0; i <= 100; i++) { 
		setTimeout("changeOpac(" + i + ",'" + imageid + "')",(timer * speed)); 
		timer++; 
	} 
	
	var nextImageInfo = getNextImage();
	var nextImage = nextImageInfo[0];
	var nextHeight = nextImageInfo[1];
	var nextWidth = nextImageInfo[2];
	setTimeout("blendimage('" + divid + "', '" + imageid + "', '" + nextImage + "', " + millisec +", " + waitTime + ", "
						   + nextWidth + ", " + nextHeight +")", waitTime);
} 

//change the opacity for different browsers 
function changeOpac(opacity, id) { 
	var object = document.getElementById(id).style; 
	object.opacity = (opacity / 100); 
	object.MozOpacity = (opacity / 100); 
	object.KhtmlOpacity = (opacity / 100); 
	object.filter = "alpha(opacity=" + opacity + ")"; 
}
 
function imageItem(image_location, imageWidth, imageHeight)
{
	 this.image_item = new Image(); 
	 this.image_item.src = image_location; 
	 this.image_item.width = imageWidth;
	 this.image_item.height = imageHeight
} 

function get_ImageItemLocation(imageObj)
{ 
	return(imageObj.image_item.src)
} 

function randNum(x, y) 
{
	var range = y - x + 1; 
	return Math.floor(Math.random() * range) + x;

} 
	
function getNextImage()
{ 
	if (random_display) 
	{ 
		ImageNum = randNum(0, number_of_image-1); 
	} 
	else 
	{
		ImageNum = (ImageNum+1) % number_of_image; 
	}
	
	var new_image = get_ImageItemLocation(imageArray[ImageNum]); 
	var imageHeight = getImageHeight(imageArray[ImageNum]);
	var imageWidth = getImageWidth(imageArray[ImageNum]);
	return [new_image, imageHeight, imageWidth]; 
} 

function getImageHeight(imageObj)
{
	return (imageObj.image_item.height);
}

function getImageWidth(imageObj)
{
	return (imageObj.image_item.width);
}


Was This Post Helpful? 0
  • +
  • -

#6 forest51690  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 58
  • View blog
  • Posts: 340
  • Joined: 20-March 09

Re: IE Problems

Posted 02 May 2009 - 01:17 PM

try renaming the variables width and height, because the names might be conflicting with possibly window.width and window.height.

This is just a guess, but see if it works
Was This Post Helpful? 0
  • +
  • -

#7 myles007  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 19
  • Joined: 11-April 09

Re: IE Problems

Posted 04 May 2009 - 06:33 AM

View Postforest51690, on 2 May, 2009 - 12:17 PM, said:

try renaming the variables width and height, because the names might be conflicting with possibly window.width and window.height.

This is just a guess, but see if it works



Thanks for the tip. I think I already tried that, but I'll test it just in case I'm wrong about that.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1