I’m wondering if anyone here has used the jquery plugin ‘fullscreenr’ with a wordpress theme before. I’ve noticed a weird bug that I’m sure anyone who has used this before for a wordpress build would have come across.. It’s a niche problem so bear with the explanation. I’ll be as succinct as possible.
Fullscreenr is a jQuery plugin that allows you to have a scalable fullscreen bg image. For reference: http://nanotux.com/blog/fullscreen/
The problem I’m having is a weird bug involving using html anchors that target a location that is near the bottom of the target page. This forces the BG to resize below the original window size. Everything looks great at first, but if the user attempts to scroll back up, the scrollbar gets ‘stuck’ and a good 200 pixels of the BG get stuck as well.
You can see the scalable bg working here: http://dev.citylightphilly.com/html (try zooming out and resizing the window.)
To witness the problem I’m having – click “Our Blog” (the only working link on the test page)
Normally, I would say – “oh well, if I really want the scalable BG, I just won’t use anchors below a certain point on the target page.” However, for a wordpress blog it becomes very necessary semantically to link directly to the #respond tag for comments, which are always at the bottom of the page!
Any thoughts? I don’t know jQuery well enough to code in a workaround.. Help!
The plugin determines the width and height of the viewport on page load, but it’s using $(window).height() which looks at the size of the viewport and then absolutely positions the content div over the image, relative to the viewport/window.
Because the page isn’t loading at the top of the document, the content is absolutely positioned incorrectly, and at that point, there’s no way to get it back down. (The scroll bar issue is bizarre, but I guess just a side effect.)
The plugin needs to check scrollPosition somehow, and adjust the dimensions accordingly. I’m still thinking about exactly how that would work…
OK Smock and I just talked. Try changing the #bg div from position: absolute; to position: fixed; and see if that solves your problem. You might lose iPad functionality at that point, FYI, but it should fix the weird anchor problem. Then it’s your call how to handle it.
Also, we both suggest: maybe don’t use this plugin if you can help it cause it’s a nightmare of positioning hassles that will never stop tormenting you. 😀