Firefox Javascript needs lots of help

[lwenkel]

I am trying to make the following code cross platform compliant. It works in IE, but I also want it to work in other browsers. So far I have not been successful in cleaning up the code to either locate the thumbnail and large images correctly on the page nor have I been able to correct the drag code. I suspect it is my confusion about what is Firefox acceptable code.

Pardon the commented out alerts. I was trying to track down the source of the "undefined" variables. I successfully succeded in confusing myself!

Basically there is a dragable "magnifying glass" over the thumbnail that puts the portion of the image under it in the large image. As the magnifying glass is dragged on the thumbnail, the large image changes accordingly.

Thanks in advance for any help.

Here is the code:

// CREDITS:
// MapBlaster by Urs Dudli and Peter Gehrig
// Copyright (c) 2001 Peter Gehrig and Urs Dudli. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at:
// http://www.designerwiz.com/24fun/utilmapzoomer/utilmapzoomer2.html
// 03/07/2001
// IMPORTANT:
// If you add this script to a script-library or script-archive
// you have to add a link to http://www.24fun.com on the webpage
// where this script will be running.
// CONFIGURATION:
// Go to www.24fun.com (http://www.24fun.com), open category 'utility' and download
// the full-version of this script as ZIP-file with
// step-by-step instructions for non-programmers.
var isNav, isIE, isFF;
var offsetX, offsetY;
var selectedObj;
var largewidth = 0;
var largeheight = 0;
var thumbwidth = Math.floor(largewidth/shrinkfactor);
var thumbheight = Math.floor(largeheight/shrinkfactor);
var dragimgwidth = Math.floor(clipwidth/shrinkfactor);
var dragimgheight = Math.floor(clipheight/shrinkfactor);
var dragimgleft = thumbleft+3;
var dragimgtop = thumbtop+3;
var difleft= largeleft-thumbleft;
var diftop= largetop-thumbtop;
var clippoints;
var cliptop=0;
var clipbottom=cliptop+clipheight;
var clipleft=0;
var clipright=clipleft+clipwidth;
function setZIndex(obj, zOrder) {
obj.zIndex = zOrder;
}
function shiftTo(obj, x, y) {

alert("PosLeft= " + document.getElementById("thumb").style.posLeft + ".");
if(x<=document.getElementById("thumb").style.posLeft) {x=document.getElementById("thumb").style.posLeft};
if(x>=(document.getElementById("thumb").style.posLeft+thumbwidth-dragimgwidth-2)) {x=document.getElementById("thumb").style.posLeft+thumbwidth-dragimgwidth-2};
if(y<=document.getElementById("thumb").style.posTop) {y=document.getElementById("thumb").style.posTop};
if(y>=(document.getElementById("thumb").style.posTop+thumbheight-dragimgheight-2)) {y=document.getElementById("thumb").style.posTop+thumbheight-dragimgheight-2};
obj.pixelLeft = x;
obj.pixelTop = y;

cliptop = (y-thumbtop)*shrinkfactor;

clipbottom = cliptop+clipheight;

clipleft = (x-thumbleft)*shrinkfactor;

clipright = clipleft+clipwidth;

clippoints ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")";
document.getElementById("large").style.posTop=largetop-cliptop;
document.getElementById("large").style.posLeft=largeleft-clipleft;

document.getElementById("large").style.clip=clippoints;

}
function setSelectedElem(evt) {
var imgObj = (evt.imgObj) ? evt.imgObj : evt.srcElement;
// var imgObj = (evt.imgObj) ? evt.target : evt.imgObj;
alert("evt.imgObj = " + evt.imgObj + ".");
alert("imgObj = " + imgObj + ".");
if (imgObj.parentNode.id.indexOf("dragimg") != -1) {
selectedObj = imgObj.parentNode.style;
setZIndex(selectedObj,100);
return;
}
selectedObj = null;
return;
}
function dragIt(evt) {
if (selectedObj) {
shiftTo(selectedObj, (evt.clientX - offsetX), (evt.clientY - offsetY));
// alert("SelectedObj = " + selectedObj + ".");
// alert("Evt.clientX = " + evt.clientX + ".");
// alert("OffsetX = " + offsetX + ".");

// shiftTo(selectedObj, ((window.event) ? window.event :clientX - offsetX), ((window.event) ? window.event : clientY - offsetY));
return false;

}
}
function engage(evt) {
alert("evt Event = " + evt + ".");
setSelectedElem(evt);
if (selectedObj) {
// offsetX = (window.event) ? window.event : offsetX;
// offsetY = (window.event) ? window.event : offsetY + 150;

offsetX = evt.pageX - selectedObj.left
offsetY = evt.pageY - selectedObj.top
}
return false;
}
function release(evt) {
if (selectedObj) {
setZIndex(selectedObj, 0);
selectedObj = null;
}
}

function init() {

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

document.getElementById("large").style.Left=largeleft;
alert("Largeleft " +largeleft+ "." );
document.getElementById("large").style.Top=largetop;
alert("Largetop " +largetop+ "." );
alert("Imagetop " +document.getElementById("large").style.Top+ "." );
document.getElementById("thumb").style.Left=thumbleft;
document.getElementById("thumb").style.Top=thumbtop;

document.getElementById("dragimg").style.Left=dragimgleft;
document.getElementById("dragimg").style.Top=dragimgtop;
clippoints ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")";

document.getElementById("large").style.clip=clippoints;
document.getElementById("large").style.visibility="visible";

document.onmousedown = engage;
document.onmousemove = dragIt;
document.onmouseup = release;
}
window.onload=init;

[noTime]

IMO your task is complex enough to be evaluated by real money. :)

[Anogar]

Aye, that code is ugly and long enough that you're going to have to offer a bit of an incentive, especially as this is your first post. Try isolating exactly the part that doesn't work and just posting that, you'll have better luck.

[ramie]

I think it's because the onLoad event at the bottom of that script is fired at the wrong time, note the code window.onload=init; at the bottom, have a look at the link below and see if that helps.

http://dean.edwards.name/weblog/2005/09/busted/

Welcome to KF btw, you should wrap code in a code tag when you post, like (code) some code (/code), use square brackets [ not (, thats just to show you.

[lwenkel]

I appreciate the help. I will get better at posting my problems. This is a new process for me. I thought about the fact I had not outlined the problem in the middle of the night!

Thanks again for the tips.