Subtle Javascript Problem In Firefox

[The Googler]

Here is the site in question:

http://dev.unmeaningflattery.com/

Open it in Firefox (this problem does not occur in IE).

Click on one of the image thumbnails to see the larger image appear
(works by changing "display" property). Note how you can arrow up and
down the page or (if you have it) use your mouse scroll button to move
up and down the page.

Click the CLOSE button next to the larger image that appeared.

Once it disappears, see how you can't scroll anymore? If you click
again inside the browser window, you can scroll just fine.

Somewhat annoying.

I think what's happening is when you click the close button (you can
also click the larger image to close it as well), it's "display"
property is set to "none" and then because the last object with focus
is now no longer displayed, Firefox gets confused about its
context/position on the page and doesn't allow you to scroll up and
down until you click inside the window and reset the focus on a visible
part of the page.

Do you guys agree? Anyone have any thoughts on how I can fix this?

I've tried adding an additional last line in the function that toggles
the display value. That extra line sets the focus to just the window,
but it doesn't seem to fix the bug.

Thanks for any ideas you have that might allow me to fix this
admittedly minor but annoying bug.

-peter

 

[Stephen Chalmers]

Here is the site in question:

http://dev.unmeaningflattery.com/

Open it in Firefox (this problem does not occur in IE).

Click on one of the image thumbnails to see the larger image appear
(works by changing "display" property). Note how you can arrow up and
down the page or (if you have it) use your mouse scroll button to move
up and down the page.

Click the CLOSE button next to the larger image that appeared.

Once it disappears, see how you can't scroll anymore? If you click
again inside the browser window, you can scroll just fine.

Somewhat annoying.

I think what's happening is when you click the close button (you can
also click the larger image to close it as well), it's "display"
property is set to "none" and then because the last object with focus
is now no longer displayed, Firefox gets confused about its
context/position on the page and doesn't allow you to scroll up and
down until you click inside the window and reset the focus on a visible
part of the page.

Do you guys agree? Anyone have any thoughts on how I can fix this?

I've tried adding an additional last line in the function that toggles
the display value. That extra line sets the focus to just the window,
but it doesn't seem to fix the bug.

Thanks for any ideas you have that might allow me to fix this
admittedly minor but annoying bug.

-peter

Check the JS console. Using Mozilla, I get this :
Error: document.elements has no properties
Source File: http://dev.unmeaningflattery.com/
Line: 274

 

[The Googler]

That error is left over from me trying to fix this problem. I've now
removed the error-producing code but the bug is still there.
Sorry for the confusion.

 

[Grant Wagner]

That error is left over from me trying to fix this problem. I've now
removed the error-producing code but the bug is still there.
Sorry for the confusion.

It might just be the way the browsers work. However, this _might_ have
something to do with it (and you should change it regardless, since the
use of the javascript: psuedo-protocol is not recommended <url:
http://jibbering.com/faq/#FAQ4_24 />):

<A HREF="Javascript:changeImages('CLOSE18',
'images_ssi/close_off.gif');showhide2('IMG5FULL');" ...>

Change that to:

<a href="#" onclick="
changeImages('CLOSE18', 'images_ssi/close_off.gif');
showhide2('IMG5FULL');
return false;
" ...>

(split across lines to make it readable)

-
Grant Wagner <[email protected]>
comp.lang.javascript FAQ - http://jibbering.com/faq

 

[The Googler]

Thanks for the tip, Grant!
I fixed the HREF formatting but the problem still remains.

-peter

 

[sunami]

it seems like it's a browser thing ... but may be this trick will help
(only tested it against Firefox 1.0)

here's a modifiied version of your showhide2 function:

function showhide2(objShowHide){
d=document;layer="";
if(d.getElementById)layer1=d.getElementById(objShowHide).style;
else if(d.layers)layer1=document.layers[objShowHide];
//else return 1;

//alert(layer1.style);
if(layer1.display=="")layer1.display="none";
//if(layer1.display!="none")layer1.display="none";
//else layer1.display="block";
else layer1.display = "";

d.forms[0].xxx.focus();
}

I cleaned it up a bit for clarity. Also, the last line gives the focus
to a hidden input field. That means, you should put all your page
content inside a <form> tag and create an <input type="hidden"
name="xxx"> field (name it whatever). The idea is to give the focus
back to an element in the page (has to be a form control).
hope that helps.