This has really driven me up the wall. I've been writing JS for corporate sites since IE 3.0, and recently found myself confronted with Firefox - which doesn't act anything like IE. Safari and Opera are having fits too, each doing something different. I have several issues (not the least of which is a growing hatred for Firefox):
Firefox doesn't accept window.event at all. So, I try to use arguments[0] in place of window.event, but that doesn't work either (even though there is supposed to be an implicit event object passed to event handlers as argument[0], or so I've read). Ok, so I try passing an event object, but of course that causes IE to throw fits. Opera and Safari seem to agree with IE, both accepting window.event as valid, though they both misbehave in other ways. OKAY then. I get Firefox to accept an event object passed as a parameter, but it will NOT hand over the object that was actually clicked. The extremely LAME workaround is to pass the clicked element id as a variable. I WILL NOT do that, because I am not going to set onlick="..." for each and every image. I set it once in the <table> element and have done with it. Now, I know I can force it to work the hard way, but it makes my code really hard to manage (making sure onclick="showPicture('
imgID')" is right for each and every image, and there are literally hundreds of little thumbnails). So, how can I get #&$^%$ FireFox to cough up the id of the element that was clicked on without breaking IE support in the process (and, hopefully, without testing useragent all over the place).
Second, I have a function that keeps the popped-up picture-div 24 pixels off the top of the document, even when scrolling. I didn't write it, it's been passed around the internet for a long time. It doesn't work in Firefox. It works in IE, Opera, and Safari.
Third, Opera doesn't resize the picture div (id: photopop, var: divPop) all the time. It does it some of the time, but for no apparent reason, it sometimes fails to resize the div when a different picture is selected.
Fourth, Safari doesn't show the photopop div at all, though it does show the img and the close button which is a child of the photopop div. Weird.
Finally, I would just resort to Flash and say screw all this incompatible browser nonsense, but my target audience browses from work, and a lot of companies don't have flash or allow users to install it, so I'm stuck dealing with this madness. If it weren't for the fact that Firefox is aggressively campaigning to replace IE for "security" reasons, I wouldn't worry about it at all. Anyway, can somebody please help an old IE coder deal with these "other" browsers?
Oh yeah... Why does Firefox tell me that cursor:hand (in CSS) is not valid? Stupid.
//Here is some of the dhtml
<div id="photopop" style="margin:24px; padding:10px; background:#C7E5ED; border-style
utset;width:1px; height:1px; top:0; left:0; position:absolute; display:none; overflow:visible; z-index:9999;">
<img id="imgpop" />
<table width="100%">
<tr><!-- use a table to force alignment, and for future placement of image name -->
<td align="right">
<button onclick="javascript:hidePicture()">Close</button>
</td>
</tr>
</table>
</div>
//And some more
<table cellspacing="2" cellpadding="2" width="95%" border="0" onclick="showPicture()">
<tbody>
<tr><!-- Row 1 -->
<td valign="middle" align="center"><!-- Image 1 Cell-->
<img alt="Smiling Bride" src="gallery/thumbnails/DSCF0080.jpg" border="0" />
<br /><!-- caption -->
</td>
<td valign="middle" align="center"><!-- Image 2 Cell-->
<img alt="flowers-004" src="gallery/thumbnails/flowers-004.jpg" border="0" />
<br /><!-- caption -->
</td>
... ... ... ... ... ... ... This table goes on like this for quite a while ... ... ... ... ... ... ... ...
//found in a script block in <head>
window.onscroll = OnScroll;
function showPicture()
{
var se = window.event.srcElement;
var body = document.getElementById("main_body");
var divPop = document.getElementById("photopop");
var imgPop = new Image();
if(se.src == "" || se.src == null){return;}
var strSrc = se.src.replace(/thumbnails/, "images");
imgPop.src = strSrc;
divPop.style.display = "block";
imgPop.src = strSrc;
imgPop.onload = OnImgLoad;
}
function OnImgLoad()
{
var se = window.event.srcElement;
var divPop = document.getElementById("photopop");
divPop.style.width = se.width;
divPop.style.height = se.height + 24;
}
function OnScroll()
{
document.getElementById("photopop").style.top = getScrollY();
}
function hidePicture(e)
{
var divPop = document.getElementById("photopop");
divPop.style.display = "none";
}
var getScrollY = function()
{
if (typeof window.pageYOffset == 'number')
{
getScrollY = function()
{
return window.pageYOffset;
};
}
elseif ((typeof document.compatMode == 'string') &&
(document.compatMode.indexOf('CSS') >= 0) &&
(document.documentElement) &&
(typeof document.documentElement.scrollTop == 'number'))
{
getScrollY = function()
{
return document.documentElement.scrollTop;
};
}
elseif ((document.body) &&
(typeof document.body.scrollTop == 'number'))
{
getScrollY = function()
{
return document.body.scrollTop;
};
}
else
{
getScrollY = function()
{
return NaN;
};
}
return getScrollY();
}
