Solved

Help with code in NN6

Posted on 2002-04-29
11
228 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
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
Are your AD admin tools letting you down?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

 
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

VMware Disaster Recovery and Data Protection

In this expert guide, you’ll learn about the components of a Modern Data Center. You will use cases for the value-added capabilities of Veeam®, including combining backup and replication for VMware disaster recovery and using replication for data center migration.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
ASP:Radiobuttonlist/asp:RadioButtonListItem custom styling 1 43
Converting dates in JavaScript 2 36
replace link with jQuery 4 15
Select case on click 3 16
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
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…

831 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