[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 240
  • Last Modified:

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
0
garyennis
Asked:
garyennis
  • 6
  • 5
1 Solution
 
ckosloskiCommented:
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
0
 
garyennisAuthor Commented:
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
0
 
ckosloskiCommented:
OK Gary,

To fix the speed of the pages flipping in Netscape 6 change the code in shift.js before the getObj function to:

      if(document.getElementById && !document.all){
            range1        = "getElementById(";
            range2        = ")";
            styleObj = ".style";
            doLayer = false;
            interval=25;
      } else if(document.all) {
            range1        = "all.";
            range2        = "";
            styleObj = ".style";
            doLayer = false;
      } else {
            range1        = "layers.";
            range2        = "";
            styleObj = "";
            doLayer = true;
            interval=5
            }
To fix the pages not flipping in Netscape 4 and the magnifying glass starting at it's original position in Netscape 6 and the magnifying glass was disapearing in Netscape 4 after releasing it, replace the code in magnify.js with:

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;
            obj.style.top = y;
            obj.left = x;
            obj.top = y;            
      } 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)) {
                              if (testObj.id == "navbar"){
                                    document.layers.mark2.href;
                              }else{
                                    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(isNav){
            selectedObj = null
      }else {
            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").style.clip="rect(0 0 0 0)"
            setNavEventCapture();
}
      document.onmousedown = engage
      document.onmousemove = dragIt
      document.onmouseup = release
}

It would be nice if you increased the points a bit since I fixed a few more problems than was originally asked.
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
garyennisAuthor Commented:
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
0
 
ckosloskiCommented:
What version of NN4 are you using?  I am using NN4.7 and it works fine.
0
 
garyennisAuthor Commented:
Netscape® Communicator 4.79
0
 
ckosloskiCommented:
I think I have NN4.79 at home.  I'll have to look at it there tonight.
0
 
ckosloskiCommented:
Gary,

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

Corey
0
 
garyennisAuthor Commented:
OK.. I'll trust you with the NN4 issue ;)

The points (increased) are yours!
0
 
ckosloskiCommented:
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
0
 
garyennisAuthor Commented:
More help needed!!!!
http://www.experts-exchange.com/jsp/qManageQuestion.jsp?ta=javascript&qid=20315425

500 points up for offer!!!

Thanks Gary
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

  • 6
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now