Solved

Help with code in NN6

Posted on 2002-04-29
11
222 Views
Last Modified: 2008-02-01
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
Comment
Question by:garyennis
  • 6
  • 5
11 Comments
 
LVL 4

Expert Comment

by:ckosloski
Comment Utility
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
 
LVL 1

Author Comment

by:garyennis
Comment Utility
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
 
LVL 4

Accepted Solution

by:
ckosloski earned 400 total points
Comment Utility
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
 
LVL 1

Author Comment

by:garyennis
Comment Utility
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
 
LVL 4

Expert Comment

by:ckosloski
Comment Utility
What version of NN4 are you using?  I am using NN4.7 and it works fine.
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 1

Author Comment

by:garyennis
Comment Utility
Netscape® Communicator 4.79
0
 
LVL 4

Expert Comment

by:ckosloski
Comment Utility
I think I have NN4.79 at home.  I'll have to look at it there tonight.
0
 
LVL 4

Expert Comment

by:ckosloski
Comment Utility
Gary,

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

Corey
0
 
LVL 1

Author Comment

by:garyennis
Comment Utility
OK.. I'll trust you with the NN4 issue ;)

The points (increased) are yours!
0
 
LVL 4

Expert Comment

by:ckosloski
Comment Utility
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
 
LVL 1

Author Comment

by:garyennis
Comment Utility
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now