I have a page that’s setup with an input text field hidden with “display: none” via JQuery toggle(), and an anchor tag located some distance beneath it. When I use the anchor tag, either by entering it in the url or by clicking a link referencing it, I usually expect it to take me right above where the anchor is, like this:
working as expected http://i.snag.gy/1UavI.jpg
However, when I view it on IE8, it looks something like this:
not working as expected http://i.snag.gy/dbyty.jpg
What I’d like to have is both the hidden input field there, and also correct anchor behavior.
When I remove the hidden input from the code, it fixed the spacing, which leads me to think that IE is taking the space used up by the hidden input into consideration where on the screen to scroll to for the anchor.
This was my best attempt to try and reproduce the issue on jsfiddle, but I unfortunately wasn’t successful. I can’t post the actual source code I’m seeing the error on, but I’ll try to provide any additional information I can.
I figured out what my problem was yesterday.
On IE8, if you use window.location.hash to navigate to a specific area on the screen, you have to make sure to do it AFTER all your JQuery .hide() or .toggle() calls are made. What was happening was, I was navigating to the anchor tag first, and then the hide() would occur. The hide would then reduce the amount of space on the page, thereby pulling the whole page up with it.
By simply having the page perform the hide’s before the window.location.hash, I fixed my problem. I’m not quite sure why this spacing issue didn’t happen on Firefox or Chrome though.