Solved

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

Posted on 2006-06-19
10
1,836 Views
Last Modified: 2012-05-05
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
Comment
Question by:rnicholus
  • 4
  • 4
  • 2
10 Comments
 
LVL 63

Expert Comment

by:Zvonko
ID: 16935573
What do you try to get? Don't you get zero and zero in Mozilla?
0
 
LVL 7

Accepted Solution

by:
geordie007 earned 250 total points
ID: 16935619

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
 

Author Comment

by:rnicholus
ID: 16935719
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
 
LVL 7

Expert Comment

by:geordie007
ID: 16935799

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
 

Author Comment

by:rnicholus
ID: 16936227
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
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 7

Expert Comment

by:geordie007
ID: 16937731
"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
 
LVL 63

Expert Comment

by:Zvonko
ID: 16937958
Could it be that you expect window position on users screen, and not the window scroll position?
0
 

Author Comment

by:rnicholus
ID: 16944582
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
 
LVL 7

Expert Comment

by:geordie007
ID: 16949525

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
 

Author Comment

by:rnicholus
ID: 16951817
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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
This article discusses how to create an extensible mechanism for linked drop downs.
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…

705 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

16 Experts available now in Live!

Get 1:1 Help Now