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

  • Yeah - I just couldn't find a better way to do this with the BG. There are some CSS3 methods, but they don't degrade gracefully at all. I'm a little boxed in with the giant BG image / design as well since there is no fade (can't just use a solid color for large screens). So far, this has been the only issue I've found. – timshutes Jun 21 '11 at 14:14
  • In terms of iPad and mobile, I'm already going to need to use media queries or serve up a different stylesheet entirely for them. citylight was working on a budget and this is the design we got - big and beautiful, but not great for good clean responsive design. – timshutes Jun 21 '11 at 14:17
  • this worked! Thanks guys.. brilliant.. don't know why I didn't think of that.. I wonder what other issues I'll run into with this.. it already completely borks mobile – timshutes Jun 21 '11 at 14:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.