Solved

Help with code in NN6

Posted on 2002-04-29
11
232 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
11 Comments
 
LVL 4

Expert Comment

by:ckosloski
ID: 6980920
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
ID: 6980967
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
ID: 6981499
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
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

 
LVL 1

Author Comment

by:garyennis
ID: 6982851
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
ID: 6983210
What version of NN4 are you using?  I am using NN4.7 and it works fine.
0
 
LVL 1

Author Comment

by:garyennis
ID: 6983931
Netscape® Communicator 4.79
0
 
LVL 4

Expert Comment

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

Expert Comment

by:ckosloski
ID: 6985050
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
ID: 6985428
OK.. I'll trust you with the NN4 issue ;)

The points (increased) are yours!
0
 
LVL 4

Expert Comment

by:ckosloski
ID: 6985933
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
ID: 7103342
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

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…
Suggested Courses

630 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