Page 1 of 1

Want to Show a Popup on ListItem Cick and to show over The Origin List Item

Posted: Mon Feb 09, 2015 11:20 am
by Shubham Kumar

In my page list Items are being generated dynamically so their is no particular dsid
as it is coming like
mail_mobilelistitem_52_0
mail_mobilelistitem_52_1
mail_mobilelistitem_52_2

and I want to so a popup on click of the item and position to respective List Item
but the id is dynamic how can I set the dsid property in Position to Property of PopUp


Want to Show a Popup on ListItem Cick and to show over The Origin List Item

Posted: Mon Feb 09, 2015 3:11 pm
by Evgene Karachevtsev

Hello Shubham,

You have two ways:
I) make it programmaticaly
1) On click event please add js code that finds offset height
2) Height
3) Find your popup
4) Set a position
5) Show a popup

II) with help of mapping
1) fill array with values
2) set localstorage variable value with this array
3) map an array to list

Next tutorial makes exactly the same as in this list of steps
http://blog.bismallion.com/map-appery...


Want to Show a Popup on ListItem Cick and to show over The Origin List Item

Posted: Tue Feb 10, 2015 2:22 pm
by Shubham Kumar

let me try.


Want to Show a Popup on ListItem Cick and to show over The Origin List Item

Posted: Wed Jun 22, 2016 4:37 am
by Taiye

Yes, I know this is coming very late. Let me just share how I achived the same purpose:

Apperyio("popup_name").popup("open",{positionTo:position})

popup_name is the name of your popup.
positon is the desired position of the popup. In this particular case of listitems, I computed my position as follows:

$(this).find('.listitem-entry-initials')[0]

where

$(this): refers to the clicked element of the list
listitem-entry-initials: is a classname assigned to a component of the list entries. In my case, I used a label component. You may also want to play with tolerance option so you can properly place the popup as disired, especially if you are using arrows. tolerance level can be set on the appery builder or you may choose to supply it with the options. see https://demos.jquerymobile.com/1.2.0/...

See sample screenshot below:

Image