fitz101
Posts: 0
Joined: Thu Aug 14, 2014 2:48 am

Position Popup Window to Origin and Resize

I would like to be able to position the popup at the origin (where i just clicked). Also I need the dimensions of the popup and its contents to re-size based on the screen dimensions.

M&M
Posts: 0
Joined: Tue Nov 11, 2014 6:59 am

Position Popup Window to Origin and Resize

well, on the mobile devices "clicks" don't really exist but taps do. Going by the way the mobile apps are built (or call it the limitation) you won't really see popups popping up all over the place - well, at least that is not too common.

This can be vallid if it's a map and you are tapping somewhere on it with a definitive reason - perhaps to add a marker or something....again I dun really see the the need to move the input boxes / dialogs around. After all it is such a small screen...anything centralised should seem ok to most humans

fitz101
Posts: 0
Joined: Thu Aug 14, 2014 2:48 am

Position Popup Window to Origin and Resize

Well I have a list item component that is pulling a lot of items and when a specific popup item is clicked (tapped) I want the popup screen to be right below it. If i tap the first item at the top of the page and the popup screen showing the details is in the middle of the screen it might look like it is talking about another list item. I would like the popup screen to re-size based on the screen because when your on an Iphone 4s it might look nice but when you get on a Galaxy Note the really small popup screen looks dumb.

Yurii Orishchuk
Posts: 0
Joined: Fri Feb 14, 2014 8:20 am

Position Popup Window to Origin and Resize

Hi Fitz101,

Here is a solution to open and set below the clicked listitem popup component:

  1. Add list-item "click/tap" event handler.

  2. Set action as "RunJavascript".

  3. Populate it with following JS code:

    pre

    //Find root element on which use was click.
    var listItem = jQuery(this).closest("li");

    //Get currentElement offset.
    var offset = listItem.offset();

    console.log(offset);

    var goalTop = offset.top + listItem.height();

    //Where "mobilepopup_239" is your popup component name.
    var popup = Appery("mobilepopup_239").popup("open").closest(".ui-popup-container");
    popup.css("top", goalTop + "px");

    /pre

    In the same way you can control(if you need size (width and height) of this popup.

    Regards.

Return to “Issues”