CODEWITHSUNDEEP
mobilepopupcss-positionnavbarpopupmenu
Livinda
Livinda

Reputation: 186

How to positioning popup on Jquery Mobile?

I've made a listview menu with using popup (Jquery Mobile), but when the navbar was clicked, the position of popup was displayed to origin. I want my listview menu when it clicked will looks like a dropdown menu. I've set the position on my css and the javascript, but it didn't affect the display. So, could anybody help me to make the display position looks like a dropdown menu?

Here's the screenshoot:

image menu

How to make the popup was below the navbar so it could see like a dropdown?

Here's the css:

div#popupMenu{
    float: left;
    max-width: 100%;
    min-height: 100%;
}

I'm using the javascript too, but didn't affect:

$( ".selector" ).popup( "open", x:0, y:200 );

Upvotes: 0

Views: 5544

Answers (1)

Salman Arshad
Salman Arshad

Reputation: 272236

I am struggling with popup positioning too. I got close using this markup:

<!-- menu trigger -->
<a data-icon="gear"
   data-iconpos="notext"
   href="#menu"
   data-rel="popup"
   data-position-to="#menu-anchor"
   data-transition="slidedown">Menu</a>

<!-- menu position helper -->
<div id="menu-anchor"></div>

<!-- menu -->
<div id="menu" data-role="popup">
    <ul data-role="listview" data-inset="true">
        <li><a href="/">Link 1</a></li>
        <li><a href="/">Link 2</a></li>
        <li><a href="/">Link 3</a></li>
    </ul>
</div>

The trigger and menu can go anywhere. However, the anchor must go somewhere near the top of the page. jQM tries to align the center of #menu with the center of #menu-anchor but since the anchor is at the top of the screen it tries to align the top with top of the screen giving you almost expected result.

Demo here

Upvotes: 1

Related Questions