Link to home
Start Free TrialLog in
Avatar of garyennis
garyennis

asked on

Help with code in NN6

I have a page which uses a couple of javascript/dhtml effects on one page...  Everything works as expected in IE4+, NN3, but not NN6.

On NN6, The "magnifier" effect does not work....

can anyone look and advise how to fix the code.

zip file at: http://garethennis.com/help.zip

Thanks
Gary
Avatar of ckosloski
ckosloski

Hi Gary,

Replace your code in magnify.js with the following:

var isNav = false;
var isIE = false;
var isNav6 = false;
var offsetX, offsetY
var selectedObj

var enlargefactor=2.037

var largewidth = 550
var largeheight = 270
var largeleft = 599
var largetop = 112

var thumbwidth = Math.floor(largewidth/enlargefactor)
var thumbheight = Math.floor(largeheight/enlargefactor)
var thumbleft = 316
var thumbtop = 110

var mglasswidth = 48
var mglassheight = 48
var mglassleft = 605
var mglasstop = 270

var difleft= largeleft-thumbleft
var diftop= largetop-thumbtop

var clippoints

var cliptop = (thumbheight-mglassheight)*enlargefactor
var clipbottom = cliptop+(mglassheight*enlargefactor)
var clipleft =(thumbwidth-mglasswidth)*enlargefactor
var clipright = clipleft+(mglasswidth*enlargefactor)


isIE = (navigator.appName.indexOf("Microsoft")!=-1);
ns = (navigator.appName.indexOf("Netscape") != -1);

isNav= (ns && navigator.appVersion.indexOf("5") == -1);
isNav6= (ns && navigator.appVersion.indexOf("5") != -1);

function setZIndex(obj, zOrder) {
      obj.zIndex = zOrder
}

function shiftTo(obj, x, y) {
      if (isNav) {
            obj.moveTo(x,y);
      } else if(isNav6){
            obj.style.left = x + "px";
            obj.style.top = y + "px";
      } else {
            obj.pixelLeft = x;
            obj.pixelTop = y;
      }      
      cliptop = (y-thumbtop)*enlargefactor
      clipbottom = cliptop+(mglassheight*enlargefactor)
      clipleft = (x-thumbleft)*enlargefactor
      clipright = clipleft+(mglasswidth*enlargefactor)

      
      if (document.all) {
            clippoints ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
            document.all.large.style.posTop=largetop-cliptop
            document.all.large.style.posLeft=largeleft-clipleft
            document.all.large.style.clip=clippoints
      }
      if (document.layers) {
            document.large.top=largetop-cliptop
            document.large.left=largeleft-clipleft
            document.large.clip.left = clipleft
            document.large.clip.right = clipright
            document.large.clip.top = cliptop
            document.large.clip.bottom = clipbottom
      }
      if (document.getElementById){
            document.getElementById("large").style.top=largetop-cliptop
            document.getElementById("large").style.left=largeleft-clipleft
            clippoints ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")";      
            document.getElementById("large").style.clip=clippoints
      }
}

function setSelectedElem(evt) {
      if (isNav) {
            var testObj
            var clickX = evt.pageX
            var clickY = evt.pageY
            for (var i = document.layers.length - 1; i >= 0; i--) {
                  testObj = document.layers[i]
                  if ((clickX > testObj.left) && 
                        (clickX < testObj.left + testObj.clip.width) && 
                        (clickY > testObj.top) && 
                        (clickY < testObj.top + testObj.clip.height)) {
                              selectedObj = testObj
                              setZIndex(selectedObj, 100)
                              return
                  }
            }
      } else if(isIE ){
            var imgObj = window.event.srcElement
            if (imgObj.parentElement.id.indexOf("mglass") != -1) {
                  selectedObj = imgObj.parentElement.style
                  setZIndex(selectedObj,100)
                  return
            }
      } else if(isNav6){
            var imgObj = evt.target;
            if (imgObj.parentNode.id == ("mglass")) {
                  selectedObj = imgObj.parentNode
                  setZIndex(selectedObj,100)
                  return
            }
      }
      selectedObj = null
      return
}

function dragIt(evt) {
      if (selectedObj) {
            if (isNav) {
                  shiftTo(selectedObj, (evt.pageX - offsetX), (evt.pageY - offsetY))
            } else if(isNav6){
                  shiftTo(selectedObj, (evt.clientX - offsetX), (evt.clientY - offsetY))
            }else {
                  shiftTo(selectedObj, (window.event.clientX - offsetX), (window.event.clientY - offsetY))
                  return false
            }
      }
}

function engage(evt) {
      setSelectedElem(evt)
      if (selectedObj) {
            if (isNav) {
                  offsetX = evt.pageX - selectedObj.left;
                  offsetY = evt.pageY - selectedObj.top;
            } else if(isNav6){
                  offsetX = evt.clientX - selectedObj.left;
                  offsetY = evt.clientY - selectedObj.top;            
            }else {
                  offsetX = window.event.offsetX;
                  offsetY = window.event.offsetY;
            }
      }
      return false
}

function release(evt) {
      if (selectedObj) {
            setZIndex(selectedObj, 0)
            selectedObj = null
      }
}

function setNavEventCapture() {
      if (isNav || isNav6) {
            document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)
      }
}

function adoinit() {

      if (document.layers) {
            document.large.left=largeleft
            document.large.top=largetop
            
            document.thumb.left=thumbleft
            document.thumb.top=thumbtop
      
            document.mglass.left=mglassleft
            document.mglass.top=mglasstop
            
            document.large.clip.left = 0
            document.large.clip.right = 0
            document.large.clip.top = 0
            document.large.clip.bottom = 0
            
            setNavEventCapture()
      }

      
if (document.all) {
            document.all.large.style.posLeft=largeleft
            document.all.large.style.posTop=largetop
            
            document.all.thumb.style.posLeft=thumbleft
            document.all.thumb.style.posTop=thumbtop
      
            document.all.mglass.style.posLeft=mglassleft
            document.all.mglass.style.posTop=mglasstop
            document.all.large.style.clip="rect(0 0 0 0)"
      }
      
if(document.getElementById){
            document.getElementById("large").left=largeleft
            document.getElementById("large").top=largetop
            
            document.getElementById("thumb").left=thumbleft
            document.getElementById("thumb").top=thumbtop
      
            document.getElementById("mglass").left=mglassleft
            document.getElementById("mglass").top=mglasstop
            
            //document.getElementById("large").clip.left = 0
            //document.getElementById("large").clip.right = 0
            //document.getElementById("large").clip.top = 0
            //document.getElementById("large").clip.bottom = 0
            document.getElementById("large").style.clip="rect(0 0 0 0)"
            setNavEventCapture();
}
      document.onmousedown = engage
      document.onmousemove = dragIt
      document.onmouseup = release
}

Corey
Avatar of garyennis

ASKER

MMmmmm...

In NN6 it sort of works now...  However, when you click on the magnifiing glass for a 2nd time, it jumps back to the initial starting point.

Also (even worse), it now does not work in NN4 at all!!
(and don't know if this is related, but the "sliding text" panels is really slow....)

Can you revisit?
Thanks
Gary
ASKER CERTIFIED SOLUTION
Avatar of ckosloski
ckosloski

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
With your new code, The magnifying glass still does not work in NN4 (it won't drag at all).  In fact, something in the code causes NN4 to crash everytime!!!

Everything works fine in ie4 and nn6 now (excellent), but considering it used to work in NN4 there must be something wrong...

I'm more than happy to increase points once its all sorted.

G
What version of NN4 are you using?  I am using NN4.7 and it works fine.
Netscape® Communicator 4.79
I think I have NN4.79 at home.  I'll have to look at it there tonight.
Gary,

I just tried the code on NN4.79 on my ME machine and it worked fine.

Corey
OK.. I'll trust you with the NN4 issue ;)

The points (increased) are yours!
Thanks Gary,

Maybe you just need to reinstall NN4.79?  Or you could try it on another machine if you have one available to make sure it works.

Corey
More help needed!!!!
https://www.experts-exchange.com/jsp/qManageQuestion.jsp?ta=javascript&qid=20315425

500 points up for offer!!!

Thanks Gary