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

window.pageXOffset and window.pageYOffset don't work in Internet explorer 7.0 ?

Hello,

I'm trying to call window.pageXOffset and window.pageYOffset in I.E. 7.0 but it doesn't work. It gives me "undefined" value. I tested the same code in Mozilla 1.5.04 and it works fine.

I wonder if I did something wrong or this is how the browser works. If this is how I.E 7.0 responds to it, I'm looking for alternatives to get X and Y position.

This is what I have:
<html>
<head>
<script type="text/javascript">
function test()
{
var xVal = window.pageXOffset;
var yVal = window.pageYOffset;
alert(" --> xVal: " + xVal + " --> yVal: " + yVal);
}
</script>
</head>

<body onload="test()">
</body>

</html>

~ Thanks in advance for the help ~
0
rnicholus
Asked:
rnicholus
  • 4
  • 4
  • 2
1 Solution
 
ZvonkoSystems architectCommented:
What do you try to get? Don't you get zero and zero in Mozilla?
0
 
geordie007Commented:

internet explorer doesn't support the pageXOffset or pageYOffset properties. i guess this is to do with window scrolling? if so, you can use document.documentElement.scrollLeft document.documentElement.scrollTop, and Internet Explorer is fine with that. so you can do something like:


if (self.pageYOffset) {
// browsers other than internet explorer
      the_x = self.pageXOffset;
      the_y = self.pageYOffset;
}else if (document.documentElement && document.documentElement.scrollTop){
// internet explorer 6      
        the_x = document.documentElement.scrollLeft;
      the_y = document.documentElement.scrollTop;
}else if (document.body){
 // all other internet explorer versions
      the_x = document.body.scrollLeft;
      the_y = document.body.scrollTop;
}

hope this helps.
0
 
rnicholusAuthor Commented:
Yes, this is something to do with window scrolling.
This is the thread where I described my original problem:
http://www.experts-exchange.com/Web/Web_Languages/HTML/Q_21891150.html

geordie007, I tried your solution in Internet Explorer version 7 and it doesn't work.
It still gives me 0 for both the_x and the_y.
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
geordie007Commented:

really? i've just tried this in ie7, and it worked fine:

<script type="text/javascript">
<!--
function test(){
var the_x, the_y;
      if (self.pageYOffset) {
      // browsers other than internet explorer
             the_x = self.pageXOffset;
             the_y = self.pageYOffset;
      }else if (document.documentElement && document.documentElement.scrollTop){
      // internet explorer 6    
                  the_x = document.documentElement.scrollLeft;
             the_y = document.documentElement.scrollTop;
      }else if (document.body){
       // all other internet explorer versions
             the_x = document.body.scrollLeft;
             the_y = document.body.scrollTop;
      }
alert("x = " + the_x + ", y = " + the_y);
}
//-->
</script>

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><a href="javascript:test();">test</a></p>

are you sure it's not something else in your code?
0
 
rnicholusAuthor Commented:
I do the method call in the body tag like this:
<body onload="test()">

I tried your sample code and it works fine. I wonder why the onload doesn't work.
0
 
geordie007Commented:
"I do the method call in the body tag like this:
<body onload="test()">

I tried your sample code and it works fine. I wonder why the onload doesn't work."

surely if you're calling it when the page loads, no scrolling has occurred, which means the result is 0 0? the page has to be scrolled before it registers a figure over 0. that's why i have all the empty paragraphs in my code - so that you have to scroll the page, and then make the call.

if you doing it without scrolling the page, it should give you 0 for both the_x and the_y.
0
 
ZvonkoSystems architectCommented:
Could it be that you expect window position on users screen, and not the window scroll position?
0
 
rnicholusAuthor Commented:
Hi geordie007,

I implemented your idea and it works great except I couldn't able to get these lines below working in mozilla 1.5, so I commented it and it works fine.

if (self.pageYOffset) {
// browsers other than internet explorer
     the_x = self.pageXOffset;
     the_y = self.pageYOffset;
}

Could you please suggest why this line doesn't work in mozilla? Could it be something wrong in my code?
0
 
geordie007Commented:

hi rnicholus

i've just tested the script again, with these alerts included:

<script type="text/javascript">
<!--
function test(){
var the_x, the_y;
      if (self.pageYOffset) {
            // browsers other than internet explorer
            alert("moz");
            the_x = self.pageXOffset;
            the_y = self.pageYOffset;
      }else if (document.documentElement && document.documentElement.scrollTop){
            // internet explorer 6    
            alert("ie6");
            the_x = document.documentElement.scrollLeft;
            the_y = document.documentElement.scrollTop;
      }else if (document.body){
            // all other internet explorer versions
            alert("other ie");
            the_x = document.body.scrollLeft;
            the_y = document.body.scrollTop;
      }
alert("x = " + the_x + ", y = " + the_y);
}
//-->
</script>

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><a href="javascript:test();">test</a></p>

as well as ie, i've tested in in FF 1.5 (1.5.0.4 to be exact) and it works fine - i get alerted "Moz" and then told what my scroll coordinates are. see if that works for you. if it does, but your code still isn't working, post it and i'll take a look.

cheers
0
 
rnicholusAuthor Commented:
Hi geordie007, thanks for the ongoing help.

I have these two javascript function below and in my body tag i did: <body onload=load() onunload=unload()>.
and in my head tag i put these two lines to make the page automatically refresh :
<meta http-equiv="refresh" content="60">
<meta http-equiv="expires" content="0">

These below are the alerts that appear:
---> LOAD: 0,0
---> other IE load
after 1 minute, i move the scroll to the middle (let's say Yoffset = 60)
---> UNLOAD
---> mozilla unload
---> LOAD: 0, 60
---> mozilla load
---> Exception occurs in load(): undefined. Please click OK to continue;

But when i put the scroll position at the very top (position = 0,0), i don't get the error since
When it's loading it will go to "other IE load" instead of "mozilla load". This I also don't understand.

/**
 * Scroll back to the current scroll position when the page loads ("onload" event).
 */
function load()
{
      var xCoordinate = getCookie('xCoord');
      var yCoordinate = getCookie('yCoord');

      try
      {
            if ( xCoordinate == null )      xCoordinate = 0;
            if ( yCoordinate == null )      yCoordinate = 0;
            
            if ( isNaN(xCoordinate) || isNaN(yCoordinate) )
                  return;
      
            alert("LOAD: " + xCoordinate + "," + yCoordinate);
            
            if (self.pageYOffset)
            {
                  alert("mozilla load");
                  // browsers other than internet explorer
                self.pageXOffset = xCoordinate;
                 self.pageYOffset = yCoordinate;
            }
            else if (document.documentElement && document.documentElement.scrollTop)
            {
                  // internet explorer 6    
              document.documentElement.scrollLeft = xCoordinate;
                 document.documentElement.scrollTop = yCoordinate;
            }
            else if (document.body)
            {
                  alert("other IE load");
                   // all other internet explorer versions
                 document.body.scrollLeft = xCoordinate;
                 document.body.scrollTop = yCoordinate;
            }
      }
    catch(ex)
    {
        var exceptionMessage =
              "Exception occurs in load(): " +
                    ex.description + "\n";
        exceptionMessage += "Please click OK to continue;";
        alert(exceptionMessage);
    }
} // end load()

/**
 * Save the current scroll position when the page unloads("onunload" event)
 */
function unload()
{
      try
      {
            alert("UNLOAD");
      
            if (self.pageYOffset)
            {
                  alert("mozilla unload");
                  // browsers other than internet explorer
                xCoordinate = self.pageXOffset;
                 yCoordinate = self.pageYOffset;
            }
            else if (document.documentElement && document.documentElement.scrollTop)
            {
                  // internet explorer 6    
              xCoordinate = document.documentElement.scrollLeft;
                 yCoordinate = document.documentElement.scrollTop;
            }
            else if (document.body){
                  alert("other ie unload");
                   // all other internet explorer versions
                 xCoordinate = document.body.scrollLeft;
                 yCoordinate = document.body.scrollTop;
            }
            
            setCookie("xCoord", xCoordinate);
            setCookie("yCoord", yCoordinate);
      }
    catch(ex)
    {
        var exceptionMessage =
              "Exception occurs in unload(): " +
                    ex.description + "\n";
        exceptionMessage += "Please click OK to continue;";
        alert(exceptionMessage);
    }
} // end unload()
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.

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