473,327 Members | 2,112 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,327 software developers and data experts.

clientX failing on Firefox?

I'm trying to create a simple image gallery that has a floating image
that popups up when the user clicks on a thumbnail. So far so good.
Now, when I tried to align the popup image so it's near the cursor,
things get a little screwy: it works fine for Internet Explorer 6
(although always appears near the top for a long page) but completely
fails with Firefox (causing it to ignore the rest of the JavaScript).
Can someone help explain why? The code that's causing the problem
(which is used to calculate the x and y positions) is:

var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY)
{
nc.style.left = e.pageX * 0.6;
nc.style.top = e.pageY * 0.5;
}
else if (e.clientX || e.clientY)
{
nc.style.left = (e.clientX + document.body.scrollLeft) * 0.6;
nc.style.top = (e.clientY + document.body.scrollTop) * 0.5;
}
I appreciate any help you can offer!

Jul 23 '05 #1
5 6013
Hadean Dragon wrote :
I'm trying to create a simple image gallery that has a floating image
that popups up when the user clicks on a thumbnail. So far so good.
Now, when I tried to align the popup image so it's near the cursor,
things get a little screwy: it works fine for Internet Explorer 6
(although always appears near the top for a long page) but completely
fails with Firefox (causing it to ignore the rest of the JavaScript).
Can someone help explain why? The code that's causing the problem
(which is used to calculate the x and y positions) is:

var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY)
{
nc.style.left = e.pageX * 0.6;
nc.style.top = e.pageY * 0.5;
}
else if (e.clientX || e.clientY)
{
nc.style.left = (e.clientX + document.body.scrollLeft) * 0.6;
nc.style.top = (e.clientY + document.body.scrollTop) * 0.5;
}
I appreciate any help you can offer!

var posx = 0;
var posy = 0;
if (window.event) {var e = window.event;};
if (typeof e.pageX == "number")
{
nc.style.left = e.pageX * 0.6 + "px";
nc.style.top = e.pageY * 0.5 + "px";
}
else if (typeof e.clientX == "number")
{
nc.style.left = (e.clientX + document.body.scrollLeft) * 0.6 +
"px";

/*
You're most likely in backward compatible rendering mode because of your
use of document.body.scrollLeft. In standards compliant rendering mode
you would need instead document.documentElement.scrollLeft value. */

nc.style.top = (e.clientY + document.body.scrollTop) * 0.5 + "px";
};

left, top, width and height all require unit length according the CSS1
and CSS2.1 parsing rules. Your mistake is a very frequently encountered one.

CSS 2.1 parsing rules:
http://www.w3.org/TR/CSS21/syndata.html#parsing-errors

"Lengths other than zero should be followed by a proper unit without a
space between the number and the unit (eg. 1.2em)."
Mozilla Web Author FAQ
http://www.mozilla.org/docs/web-deve...tylenotworking
" The values returned by the W3C DOM2 style.left and style.top
properties are strings that include the CSS unit suffix (such as "px"),
(...) CSS1 and CSS 2.x specifications require that non-zero values must
be specified with a length unit; otherwise, the css declaration will be
ignored."
Using Web Standards in Your Web Pages
http://www.mozilla.org/docs/web-deve...html#dom_manip

Gérard
--
remove blah to email me
Jul 23 '05 #2
Hadean Dragon wrote:
I'm trying to create a simple image gallery that has a floating image
that popups up when the user clicks on a thumbnail. So far so good.
Now, when I tried to align the popup image so it's near the cursor,
things get a little screwy: it works fine for Internet Explorer 6
(although always appears near the top for a long page) but completely
fails with Firefox (causing it to ignore the rest of the JavaScript).
Can someone help explain why? The code that's causing the problem
(which is used to calculate the x and y positions) is:

var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY)
{
nc.style.left = e.pageX * 0.6;
nc.style.top = e.pageY * 0.5;
}
else if (e.clientX || e.clientY)
{
nc.style.left = (e.clientX + document.body.scrollLeft) * 0.6;
nc.style.top = (e.clientY + document.body.scrollTop) * 0.5;
}
I appreciate any help you can offer!


It seems you've been reading quirksmode! ;-)

When you set top and left you must specify a unit - I guess you are
using pixels (px). Also, you should be using whole numbers (integers)
not decimals which will almost certainly result from multiplication by
0.5 & 0.6. New browsers will handle decimals OK most of the time (but
no consistently), older ones wont and left & top are supposed to be
integers, so stick to the rules.

If simple truncation is required, try:

nc.style.left = ( (e.pageX * 0.6) | 0 ) + 'px';
nc.style.top = ( (e.pageY * 0.5) | 0 ) + 'px';
...
...
...
nc.style.left = (((e.clientX + document.body.scrollLeft)*0.6) | 0 )
+ 'px';
nc.style.top = (((e.clientY + document.body.scrollTop) *0.5) | 0 )
+ 'px';
...

The bitwise '|' operator forces the truncation.
Untested, but it should work!

--
Rob
Jul 23 '05 #3
Thank you and RobG for your help! It makes sense that I would need to
specify the unit type. I still can't seem to get it to work in
Firefox, though (both of your code snippets work fine in IE, though).

I guess it might help if I give you a link to the site in question:
http://collections.civilisations.ca/...lery.eggs.html

This is a simple gallery of early Ukrainian easter eggs that were
reproduced (in 2D form) for the museum. When you click an egg in IE,
the popup appears as it should (the image is pulled from the database
using information in the ALT and TITLE tags of the thumbnail). In
Firefox (the only other browser I have available at work), it simply
goes to the large JPG in a separate page.

Firefox works fine if I simply set the stylesheet left and right to
something like 10% each, but I'd like it if the user didn't have to
scroll up (some galleries are much longer then this one).

Thanks again, I really appreciate your help on this! (The code is
longish, since it does a bunch of other things as well, but if you'd
like that I post it I will).

P.S. And yes, RobG, QuirksMode's code seemed like it was the best I
could find (which proves I'm obviously new at this sort of thing).

Jul 23 '05 #4


Hadean Dragon wrote:

This is a simple gallery of early Ukrainian easter eggs that were
reproduced (in 2D form) for the museum. When you click an egg in IE,
the popup appears as it should (the image is pulled from the database
using information in the ALT and TITLE tags of the thumbnail). In
Firefox (the only other browser I have available at work), it simply
goes to the large JPG in a separate page.


Use the Firefox JavaScript console, it will show you a script error.
I think it will be corrected if you use
piclinks[i].onclick = function(e)
instead of
piclinks[i].onclick=function()
in the dyngallery function.


--

Martin Honnen
http://JavaScript.FAQTs.com/
Jul 23 '05 #5
Thanks, that worked perfectly! I didn't understand how that worked
initially, but after looking through it again it seems to make sense.
I most definitely appreciate your (and Gérard's and RobG's) help.

And now to the next problem... :-)

Jul 23 '05 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: TheKeith | last post by:
Can someone tell me why this isn't working? <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script...
5
by: chad.a.morris | last post by:
Hi everyone, I didn't know how to sum this up very well for the title, but hopefully the person(s) will come along who can help. I'm trying to use the window.event.clientX value for...
5
by: Steve JORDI | last post by:
Hi, I have a strange behavior when using IExplorer over FireFox. There is an html form that asks for the name of a city and has a dedicated field for that with a submit button next to it. In...
5
by: Peter Michaux | last post by:
Hi, I just did a bunch of testing and was surprised with the results. If anyone doesn't know this stuff here is what I found about event.clientX. The event.clientX property in Safari is in...
1
by: jobs | last post by:
I'm trying to understand this and don't get it... I found some code that looks like it's going to work if I can make sense of how to position the div. The code displays a div with some data...
2
by: musclehead | last post by:
I have a fairly basic Javascript that is taking a selected value in a select and making a div on the page visible when selected, hiding it when unselected. It works great in IE, but Firefox is not...
3
by: Head In A Pan | last post by:
Hello - Yes - I know floating/persistent layers can be yucky - but for this project it is only tiny and contains some xy mouse coordinates for a map... buy anyway - here's my problem: I have a...
1
by: mschaafs | last post by:
Good day, I am having an interesting issue with Firefox... I have an onclick function that won't run, but it works in IE. Here are the relevant parts: <script type="text/javascript"> function...
1
by: shiznit | last post by:
ClientX on safari gives the mouse coordinates relative to the whole document. Is there an solution for getting the mouse coordinates relative to the client's browser on safari?
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: Shćllîpôpď 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.