Getting 'Event.clientX' in Mozilla FF

**TonyLoco23** · 03-10-2009, 02:15 PM

1) Script Title: DHTML Window

2) Script URL (on DD):

http://www.dynamicdrive.com/dynamici...htmlwindow.htm

3) Describe problem:

Ok I have modified the code of the load window to load the window at the location of the x and y co-ordinate. It works like a real gem in IE. However it just gives me a blank grey window in Mozilla FF.

The reason for this is that mozilla does not seem to understand "event.clientx" (if I get rid of that line the window will appear in Mozilla)

So i have 2 questions:

1) How can i adequately test for whether the browser is Mozilla? (there is already functionality in teh code to test for IE5 and Netscape 6), how can I adjust it to also test for Mozilla FF?

2) How can I get the equivalent of clientX for Mozilla users?

Here is the relevant snippet of the code:

Code:

function loadwindow(sURL){
var url = "http://www.google.com"
var width = 320
var height = 310
if (!ie5&&!ns6)
window.open(url,"","width=width,height=height,scrollbars=1")
else{
document.getElementById("dwindow").style.display=''
document.getElementById("dwindow").style.width=initialwidth=width+"px"
document.getElementById("dwindow").style.height=initialheight=height+"px"
document.getElementById("dwindow").style.left=event.clientX+"px"
document.getElementById("dwindow").style.top=ns6? window.pageYOffset*1+event.clientY+"px" : iecompattest().scrollTop*1+event.clientY+"px"
//document.getElementById("dwindow").style.top=ns6? window.pageYOffset*1+30+"px" : iecompattest().scrollTop*1+30+"px"
document.getElementById("cframe").src=url
}
}

Question 1 is more important really, I am happy to just have the window appear centered but not error for the 20% of users that use Mozilla FF.

**codeexploiter** · 03-10-2009, 02:19 PM

Mozilla does not understand "event.clientx" but "event.clientX"

**jscheuer1** · 03-10-2009, 02:58 PM

First of all you shouldn't be sniffing browsers for something that's so easily checked for using feature detection. And, since we cannot see the associated markup or the rest of the code, it's hard to say what the exact problem(s) is or are.

However, Mozilla does do event.clientX, though it is often more efficient to use event.pageX (which IE doesn't do) because it already compensates for the horizontal scroll state of the page if any.

I think the main problem with your code though is that there is apparently no event passed to it. In IE, the browser will use window.event (which often can be expressed simply as event). There is no window.event in most other browsers. You either have to pass the event directly:

Code:

<a href="#" onclick="doSomething(this, event);return false;">Example</a>

Where event will be the click event itself and available to all browsers as the second argument of the doSomething() function. Or you can pick it up as automatically passed to a function:

Code:

function myClick(e){
 e = e || window.event;
 alert(e.clientX);
}

window.onclick = myClick;

In this second example (which will work in all modern browsers, including Mozilla and IE), all but IE will use the implied passed event object. IE will need to fall back to window.event.

Edit: I just noticed that the script you are using is out of date. Use:

DHTML Window widget (v1.1)

instead.

**TonyLoco23** · 03-10-2009, 09:08 PM

Hi John,

I am a little lost with what you mean by there being no event passed in. The loadwindow is triggered by a 'mouse-over' in my code. I tried to just paste the snippets of code that I thought were relevant to save people from having to read through a bunch of code.

But I am totally new to java script so maybe that is exactly what the problem is, that there is no "event" as you put it. I cannot seem to get the code to detect if the browser is a mozilla ff.

I have been doing some further research on this problem and have been trying to get this code below to work to detect the browser, once again it works in IE6 but I just get a blank page in mozilla. Is this because there is no "event passed to it"??

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function detectBrowser(){

var sBrowser;

var e=(!e)?window.event:e;//IE:Moz
if (e.pageX){//Moz
sBrowser = "Mozilla";
}
else if(e.clientX){//IE
if(document.documentElement){//IE 6+ strict mode
sBrowser = "IE6";
}
else if(document.body){//Other IE
sBrowser = "Older IE";
}
}
else{//old browsers
sBrowser = "Older Browsers";
}

document.write("your browser is " + sBrowser);
}
</script>
</head><body onload="detectBrowser()">
<BR><br>hello
</body>
</html>

I just noticed that the script you are using is out of date. Use:

DHTML Window widget (v1.1)

instead.

I tried that later version, but it does not seem to work. I downloaded all the code but it says there's an error when I try run it from dreamweaver. Furthermore the running online demo does not work either, everytime I close the window and try to re-open it, it says "The DHTML window has been closed so nothing to show, blahblahblah". In contrast the older version seems to work great in both IE and Mozilla.

**jscheuer1** · 03-11-2009, 12:12 AM

The script you are using is out of date. Use:

DHTML Window widget (v1.1)

instead.

**TonyLoco23** · 03-13-2009, 04:40 PM

Originally Posted by jscheuer1

The script you are using is out of date. Use:

DHTML Window widget (v1.1)

instead.

I have downloaded the latest version and tried to play around with it. The latest version seems to be much more complex than the older one, it seems that you really need to have expert knowledge of java script to implement it.

In the demo, everytime I close the window and try to re-open it, it says "The DHTML window has been closed so nothing to show, blahblahblah".

In contrast the older version is ready to plug and play for anyone. It has a very simple close window function called "closeit2". I cannot seem to work out the equivalent close window function in the new one.

It seems that it would take me weeks of studying to get the latest one to work where as the old one was simply a matter of copying and pasting. What is the reason for the update? What are the problems associated with the old one? I need to know to determine if it is really worthwhile for me to invest the neccesary time to learn how to use the new one.

**jscheuer1** · 03-13-2009, 06:07 PM

The older version is out of date because it doesn't always function properly and has some fundamental problems. The newer version isn't so much more complicated as different and much more versatile, a basic implementation is fairly easy - many folks have no problem, and I'm not talking about expert coders. If you get that error message, it simply means that you have to open it again. Using show is a little misleading, it only brings the window to the foreground again if it has gotten behind other windows or has been minimized.

Take the time to familiarize yourself with the newer version and I'm sure you will find yourself preferring it.

Play with all of the various demo windows on the demo page to see what all they can/will do.

Thread: Getting 'Event.clientX' in Mozilla FF

Thread Tools

Search Thread

Getting 'Event.clientX' in Mozilla FF

Bookmarks

Bookmarks

Posting Permissions