• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 164
  • Last Modified:

offsetY issue

http://www.nwcms.co.uk/default.aspx

Hi,

On that page I have shown an example of my problem.  The construct is originally 2 div. The outer container which you see the border and an inner DIV.  The outer container is overflow:hidden.  The inner Div is 6000px high and 1000px wide. now to debug this if you mouse over it anywhere, the right hand textbox should show the offsetY. now it does only I need it to always be the offsetY of the InnerDIV that large one.  It only shows the offsetY of the large div when you mose is between the brick sections, so to visualise the CEMEMENT lol.  How can I get the offsetY to always remained focused to the innerDIV and not lose it once over a nested element

Thanks in advance

Andrew
0
REA_ANDREW
Asked:
REA_ANDREW
  • 3
  • 3
1 Solution
 
Michel PlungjanIT ExpertCommented:
You mean like it does in firefox when you change the code to

            document.getElementById("TextBox1").value = (window.event)?e.offsetX:e.clientX;
            document.getElementById("TextBox2").value = (window.event)?e.offsetY:e.clientY;
0
 
ZvonkoSystems architectCommented:
Does this help:

        function MoveIt(e)
        {
            var e = e || window.event;
            var theDiv = document.getElementById("InnerContainer");
            var xOff = theDiv.offsetLeft;
            var yOff = theDiv.offsetTop;
            document.getElementById("TextBox1").value = e.clientX - xOff // e.offsetX;
            document.getElementById("TextBox2").value = e.clientY - yOff // e.offsetY;
        }



0
 
ZvonkoSystems architectCommented:
Or this version:


        function MoveIt(e){
            var e = e || window.event;
            var theDiv = (e.target)?e.target:e.srcElement;
            var xOff = 0;
            var yOff = 0;
            if(theDiv.parentNode.id=="InnerContainer"){
              var xOff = theDiv.offsetLeft;
              var yOff = theDiv.offsetTop;
            }
            document.getElementById("TextBox1").value = xOff + e.offsetX;
            document.getElementById("TextBox2").value = yOff + e.offsetY;
        }




0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Michel PlungjanIT ExpertCommented:
And for FF?
0
 
ZvonkoSystems architectCommented:
For Michel ;-)


        function MoveIt(e){
            var e = e || window.event;
            var theDiv = (e.target)?e.target:e.srcElement;
            var xOff = 0;
            var yOff = 0;
            if(theDiv.parentNode.id=="InnerContainer"){
              var xOff = theDiv.offsetLeft;
              var yOff = theDiv.offsetTop;
            }
            document.getElementById("TextBox1").value = xOff + ((e.offsetX)?e.offsetX:e.layerX);
            document.getElementById("TextBox2").value = yOff + ((e.offsetY)?e.offsetY:e.layerY);
        }




0
 
Michel PlungjanIT ExpertCommented:
great :)
0
 
REA_ANDREWAuthor Commented:
haha perfect. Thankyou very much!!

Andrew
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

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