clientX failing on Firefox?

[Hadean Dragon]

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!

 

[Gérard Talbot]

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-developer/faq.html#stylenotworking


" 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-developer/upgrade_2.html#dom_manip

Gérard

 

[RobG]

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!

 

[Hadean Dragon]

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/multimedia/3049/270/gallery.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).

 

[Martin Honnen]

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.onclick = function(e)
instead of
piclinks.onclick=function()
in the dyngallery function.

 

[jason.boudreau]

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...