Javascript image positioning

[lwenkel]

I have a problem with Firefox not positioning a map image properly on initialization. I think I have determined that the coordinates of the location are being created properly, but Firefox does not move the image to that location. The IE version looks like this:

http://www.sacu.com/locations/locate.asp

Firefox leaves the thumbnail and small rectangle in the upper left corner of the window. The larger image is not positioned or clipped properly.

Here is the code I believe contains the error:

function init() {
	
	    var imageurl=document.largepic.src;
//	alert("imageurl =  " + imageurl + ".");
		largewidth=document.getElementById("large").offsetWidth;
//		alert("Largewidth " +largewidth+ "." );
		largeheight=document.getElementById("large").offsetHeight;
//	alert("Largeheight " +largeheight+ "." );
		thumbwidth = Math.floor(largewidth/shrinkfactor);
//	alert("thumbwidth " +thumbwidth+ "." );
		thumbheight = Math.floor(largeheight/shrinkfactor);
		document.getElementById("thumb").innerHTML="<IMG NAME='thumbpic' SRC='"+imageurl+"' width="+thumbwidth+"  height="+thumbheight+">";
//	alert("Thumb innerhtml = " + document.getElementById("thumb").innerHTML + "." );
		document.getElementById("dragimg").innerHTML="<IMG NAME='dragimgpic' border=2 SRC='dragimg.gif' width="+dragimgwidth+"  height="+dragimgheight+">";
//	alert("dragimg innerhtml = " + document.getElementById("dragimg").innerHTML + "." );

// this is what the format is:	left.top = 100 + “px”;

		document.getElementById("large").style.Left=largeleft + "px";
//	alert("Largeleft " +largeleft+ "." );
		document.getElementById("large").style.Top=largetop + "px";
//	alert("Largetop " +largetop+ "." );		
//	alert("Imagetop " +document.getElementById("large").style.Top+ "." );
		document.getElementById("thumb").style.Left=thumbleft + "px";
//	alert("ThumbLeft = " +document.getElementById("thumb").style.Left+ "." );	
		document.getElementById("thumb").style.Top=thumbtop +"px";
	
		document.getElementById("dragimg").style.Left=dragimgleft + "px";
		document.getElementById("dragimg").style.Top=dragimgtop + "px";
		clippoints ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")";
//	alert("Clippoints Just before = " +clippoints+ "." );		
	 
		document.getElementById("large").style.clip=clippoints;
//	alert("document...clip Large This = " +document.getElementById("large").style.clip+ "." );		
		document.getElementById("large").style.visibility="visible";


	document.onmousedown = engage;
	document.onmousemove = dragIt;
	document.onmouseup = release;
}

if (document.addEventListener) {
	document.addEventListener("DOMContentLoaded", init, false);
}

I will be happy to provide you any additional information you may need, just ask.

I appreciate any help. I have been fighting this for three weeks....

 

[dkdude]

This is probably not the (only) issue, but try changing left and top proiperty references to lowercase?!

You have:

(some DOM).style.Left = ...
Try:

(some DOM).style.left = ...

Regards

 

[cLFlaVA]

and i can't even get that far, because as soon as i click on anything i get this error:

[tt]Error: document.layers has no properties
Source File:

http://www.sacu.com/locations/utilmapzoomer.js

Line: 99[/tt]

which, of course, makes sense. since you're using javascript, why not take advantage of the javascript console? select tools > javascript console from FF's menu.



*cLFlaVA
----------------------------
[tt]somebody set up us the bomb![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[lwenkel]

Thank you cLFlaVA, changing the case from upper to lower on the "top" and "left" cured my image positioning problem. The url I gave above is for IE only. I am sorry I forgot to mention that. Firefox changes are not in that version.

I probably now have a similar case spelling problem in the dragit part of the program because it does not work. I do make extensive use of the Java Console in Firefox. It has helped a lot!

Thanks again for your help.