Take the 2-minute tour ×

I posted previously (Adjusting horizontal offset for an image gallery in Mobile Safari) about using Javascript to find the x-offset of a viewport in Mobile Safari and then apply that as a px-based value to an element's inline CSS.

The post was a little long-winded and specific to that application, so I'll ask the real question here:

Is there a way to determine the viewport's x-offset in Mobile Safari, and then apply it to an element as an inline style?

This will be necessary, not just to place the image gallery overlay properly, but also to use named anchors throughout the site. It's my understanding that some JS trickery is required, as Mobile Safari doesn't support the usual methods of determining the x-offset of an object (or the viewport).

share|improve this question

2 Answers 2

I'm not exactly sure if I understand your question but in javascript on mobile safari (asuming Iphone,Ipod,Ipad) using jquery I use the following lines to position div layers with z-index on top of each other.

var left1 = jQuery("div#Layout_Border_div").offset().left;
var top1 = jQuery("div#Layout_Border_div").offset().top;
  css( { position: "absolute","left": (left1) + "px","top": (top1) + "px" } );

if you can give me some sample of code I can help more.

share|improve this answer
You can see the rough mock-up here: partnersios.bigsweaterdesign.com/testing. My problem isn't a stacking order (z-index); my problem is, it's a horizontally-scrolling site with a lightbox-like script. Without scrolling, the lightbox appears fine; but if you scroll to the right and then activate the lightbox, it sticks to the left of the document (instead of the viewport). Which is fine, on a vertical site, but not horizontal. I'm trying to get the lightbox to stay with the viewport, rather than the document. Try it on an iOS device/emulator, as it's not built for desktop. Make sense? –  bigsweater Apr 22 '11 at 22:27

I managed to come up with an almost-solution: I added marginLeft: window.pageXOffset + "px", to all four references of the positioned wrapper divs in photoswipe.js.

So now, clicking a photo results in the photo viewer appearing inside the viewport, if it's been scrolled at all.

However, it's not ideal: I'm manually editing photoswipe.js source, first of all, and second of all, the gallery doesn't actually follow the user's scroll (so, when the user scrolls further to the right and clicks another image, the gallery appears where its first position was).

This is close to being fixed. How can I make the photo gallery follow the user's scroll dynamically, preferably without editing photoswipe.js source code?

share|improve this answer

Your Answer


