Does event.pageX work in IE JQuery Question

I’m working on this site here:

http://the-best-free-games.com

Click on the Email or RSS Updates button (I promise i’m not trying to get subscribers)

And you can see my Jquery here:

$('.RSSClick').click(function(event){
				event.preventDefault();
				viewHeight=$(window).scrollTop();
				$('#RSSSubscription').fadeIn('medium');
				left=event.pageX-550;
				top=viewHeight+200;
				$('#RSSSubscription').css({left:left+'px', top:top+'px'});
										  
			});
			$('#closeSubscription').click(function(event){
						event.preventDefault();
						$('#RSSSubscription').fadeOut('medium');
			});

It works flawless in Mozilla Firefox but in Internet Explorer it opens up the Div in the top left, is it a problem with my CSS or the JQuery,

I’m guessing that Internet Explorer doesn’t get the event.pageX right. As I was typing this I actually realized I could capture the variables values for event.pageX i’ll try that and post it here:

Thanks for any help.

Alright I got it working, here’s the deal.

Internet Explorer uses clientX instead of mouseX

so you can do this:

if(event.mouseX)
leftPos=event.mouseX-540;
else
leftPos=event.clientX-540;

Or I also read how you can do

if(!event.mouseX)
event.mouseX=event.clientX;

which would allow you to use event.mouseX everywhere

Also don’t use left and top as variable names as that throws Internet Explorer off (not Firefox).

Is there any other browsers which have their own naming for the MouseX and MouseY variables (such a pain in the butt!?)

Well hopefully this can help any other hapless victims.

Is there any other browsers which have their own naming for the MouseX and MouseY variables

Here’s what I’ve been using for a long time: xEvent. The following is a fragment. xDef is an “isDefined” function and the others do what you’d expect.


  if (xDef(e.pageX)) {
    this.pageX = e.pageX;
    this.pageY = e.pageY;
  }
  else if (xDef(e.clientX)) {
    this.pageX = e.clientX + xScrollLeft();
    this.pageY = e.clientY + xScrollTop();
  }
  if (xDef(e.offsetX)) {
    this.offsetX = e.offsetX;
    this.offsetY = e.offsetY;
  }
  else if (xDef(e.layerX)) {
    this.offsetX = e.layerX;
    this.offsetY = e.layerY;
  }
  else {
    this.offsetX = this.pageX - xPageX(this.target);
    this.offsetY = this.pageY - xPageY(this.target);
  }

Which browsers wont work with the method I displayed above?

http://quirksmode.org/dom/w3c_cssom.html#mousepos

Wow, that sucks. JQuery is supposed to ensure you don’t have to worry about browser differences. Mootools has event.client.x/y cross browser FTW

http://mootools.net/docs/core/Native/Event

I’m actually thinking JQuery Does do that but I might of messed up somewhere else though. You’re right though if you always have to worry about that it is a major pain.

Cool so according to that all I really need is clientX instead of pageX

It depends on whether you need the mouse position relative to the viewport or relative to the event target element.

clientX != pageX :wink: