Please allow positioning of popups other than centered

[teo1978]

This is a feature request (though a feature so basic that its lack seems to me a design flaw).

I was looking at the documentation of the popup widget, and I thought something was missing because I could only find how to determine to what the popup is positioned, but not how it is positioned relative to that, i.e.: centered, to the right of, to the left of, to the bottom of, to the top of, etc.

I'm astonished to find out that's not a lack of documentation: it really can only be centered. Centered to whatever you want but only centered.

CENTERING is only one of at least 9 very commonly needed reasonable ways of positioning a popup relative to a point, and it is not even the most commonly needed positioning. And of course there are infinite less obvious posituonings.

When you open a popup positioned to the window, very often you will want to place it on top, bottom, left, right, top-right, bottom-left, etc of the window.

When you open it relative to the source (i.e. the clicked link that opens it) you ALMOST NEVER want it to be centered to it. Most of the time you'll want it to the right or to the top etc.

So, besides a position-to attribute, it should also have a "position" attribute, or maybe a "position-what" attribute (that is: WHAT is going to coincide with the position-to object? The center, the top-left corner, the bottom-right corner, the center of the right side, the point at 20% height of the right side, etc etc).
I'm not sure exactly what's the best api specification would be, but some more useful positioning scheme than JUST CENTERING definitely must be defined.

Maybe even 3 attributes are needed, because the "position-to" and "position" scheme ("position being something like "left", right, top, etc) only makes sense when the position-to is a POINT. But position-to is usually a box. So you must be allowed to align whatever part (i.e. top, bottom, left, right, xx-corner...) of the popup to whatever part of the position-to target.

The solution is not obvious, but it is evident that "always centering" cannot in any way solve even a significant fraction of the use cases.

[gabrielschulhof]

We are indeed considering adding such a feature. In the meantime, if you need custom positioning, you can always bind to the "popupbeforeposition" event and replace the coordinates in the options object:

$.mobile.document.on( "popupbeforeposition", "#myPopup", function( event, options ) {
  var destination = $( "#elementWhereToPutThePopup" ),
    dstOffset = destination.offset(),
    dstSize = {
      cx: destination.width(),
      cy: destination.height()
    };

  options.x = dstOffset.left;
  options.y = dstOffset.top + dstSize.cy;
});

[gabrielschulhof]

I've written an extension to help with aligning popups.

Here's the demo, and here's the extension.

[teo1978]

The api seems very counterintuitive, that can't be the definitive fix.
Correct me if wrong:
For x-align:
-1 => align popup's right to target's left
-0.5 => align popup's center to target's left
0 => align popup's left to target's left
0.5 => align popup's center to target's center <<< THIS should be called 0
1 => align popup's right to target's right
1.5 => align popup's center to target's right
+2 => align popup's left to target's right
And the same for Y

• values should be shifted of -0.5, so that the range would be symmetric, the center-to-center option would be called 0, and opposite numbers would represent vice-versa alignments
• I'm not user using number is a good idea at all, as it's counterintuitive and it may seem to suggest that the popup moves to the right as the x-align increases, while that is not (nor should it be) the case
• There are missing options, such as aligning the popup's left or right or top or bottom to the target's center.

Does the demo include all the code? Because at a quick glance I seem to be able to see the extension's code but I don't see how the sliders' values are bound to widget parameters, but that may be my fault.