I am using jQuery mobile. In my web page, I have created a div with data-role as header. Inside this, there is an image.
Now, I have created another div with data-role popup. When the page loads, the div with role popup is hidden as expected.
When the user clicks on the image, the popup is expected to be displayed.
It does. Problem is that it displays in a manner that overlaps with the header and immediately below the image which triggered the popup.
I am calling the popup method on the image selector by passing it the following options
$("#navBar").popup("open", {
x: 0,
y: 50,
transition: "reverse slide"
});
This does not do the trick. Instead, the popup is displayed immediately below the image which triggered it. If X and Y options are removed, then the popup is displayed in the center of the window.
Some more information -
Here is the code that jquery mobile has prepared:
<div class="ui-popup-container reverse slide in ui-popup-active" id="navBar-popup" style="max-width: 1271px; top: 30px; left: 15px;" tabindex="0">
Here it can be seen that jQuery Mobile has added the styling top=30px and left=15px.
To fulfill my needs, I want that top=40px and left=0px. I want to do this without overriding the base CSS. I was hoping that the X and Y options passed to the popup() method would do the trick but they are not working!
An Image of the issue to help in understanding.
popup by default tries to position directly on top of the element that opened it, in case you do it using API and specify x and y, it will try to center popup at given coordinates. But to avoid popup showing off screen jquery mobile also enforces a padding between popup dialog and the edge of the screen, and by default those padding margins are 30 vertical and 15 horizontal. So the reason your pup is positioned as it is is due to those tolerances.
To position popup to exact x and y you want, you will need to add half of popup's width to the desired x, and half of popup's height to desired y.
Related
I have a JQM 1.3 popup which I have set to data-dismissible="true" All is good until the screen is scrolled. The popup scrolls fine and I have a javascript event listener to center the popup when the scrolling stops. The problem is that the underlying -screen div (that jqm creates) does not follow the popup. So if I scroll to the bottom of the screen and then click anywhere outside of the popup it does not dismiss the popup. Using the dev tools I can see that the css for the -screen div never changes after the popup is displayed.
I want the -screen div to track my popup div so that regardless of where I scroll to - anywhere that I click outside of the popup it will dismiss it. Currently if I want to click outside the popup to dismiss it I have to scroll the screen back up to where the popup was first displayed.
I found the problem:
When I was appending the popup I was not appending it down far enough in the DOM. I was appending the popup to 'body' and instead it needs to be appended one level down to the div with data-role="page" or the div with class 'ui-page' set.
The popup is contained within a handlebars template:
$('body .ui-page-active').append(template());
I have a Panel in jQM 1.3.1 working on a page but I need to increase its width. I have applied this CSS:
.ui-pannel-inner {
width: 25em;
}
which does increase the width "visually" so the Panel is now "wide", but the framework creates a <div class="ui-panel-dismiss ui-panel-dismiss-position-right ui-panel-dismiss-display-push ui-panel-dismiss-open" data-panelid="PanelOptions"></div> whose width is apparently defined based on the default Panel width. This <div> serves as the "clickable" area that closes the Panel. Normally, this area would exactly match the area of the page not covered by the Panel but it actually covers of the Panel as well. As a result, (this is a "right side" Panel) if I click in the Panel near it's left edge (to click on, say, a radio button) I will click in the area covered by the <div class="ui-panel-dismiss... and the Panel closes. That is, <div class="ui-panel-dismiss covers part of the left side of the Panel.
I know I can add data-dismissible="false" to the <div data-role="panel" ... tag to prevent this behavior but then I lose the ability to close the Panel by clicking on the page.
I have tried the suggestions presented # jQuery Mobile panel width and they both do alter the "visible" panel width but neither one deals with the fact that <div class="ui-panel-dismiss... is still overlapping the additional width of the Panel.
How do I "correctly" alter the width of the Panel so that I don't have to use -dismissible="false"?
Thank you.
I was facing exactly the same issue as mentioned in the question.
So after setting the with of the panel I used the below to override the css property of the panel so that it does not close.
.ui-panel-dismiss-position-right.ui-panel-dismiss-open {
left: -20em!important;
right: 20em!important; }
The default is set to left:-17em and right:17em. You can increase the value as per the width you have set and check whether Panel is closing or not.
Hope this helps.
you can point the position of dismiss panel by override ui-panel-dismiss-position-left like this
.ui-panel-dismiss-position-left{
left: -240px;
right: 240px;
}
or you can dynamically modify the position after the panel was opened.
see http://view.jquerymobile.com/1.3.1/dist/demos/examples/panels/panel-styling.html#&ui-state=dialog
just add to your head section:
<style>
.ui-panel-dismiss-open.ui-panel-dismiss-position-left { left: 356px !important }
</style>
worked for me with jQuery Mobile 1.4.5
I am using jQuery mobile and trying to show jQuery pop on page load. But when the page is loaded popup is not appearing in center, instead popup's TOP LEFT corner is appearing in center.
But as soon as browser window size gets change popup automatically shifts to center (Even if I press F12 for developers tool). And then all frequent calls to $('#popupBasic').popup("open"); make it to appear in center of the screen.
But first time top left corner of the popup box appearing in center.
try this: data-position-to="window".
this is the source
You may try repositioning the popup on pageshow:
$( '#popupLogin' ).popup( 'reposition', 'positionTo: window' );
I reckon what you are experiencing is down to the positioning happening prior the page is fully drawn by the browser. You can overcome this by repositioning the popup like this:
$(document).on('pageshow', '.selector', function(){
$('#popupBasic').popup('reposition', 'positionTo: window');
});
$(document).on("popupafteropen", function() {
$('#popup').popup('reposition', 'positionTo: window');
});
You can use the custom pop up events to reposition it after opening
I was getting the same error. You only want to show the popup after the page has been painted.
Adding your code to listen to the pageshow event instead of the pageinit event will probably fix your problem. It fixed it for me.
This is a very vague question.
A few items you should provide:
What browser are you testing on and what version?
What version of JQM?
Are there any custom CSS interacting with JQM?
As of JQM 1.2, Popup options available:
default: "origin"
Sets the element relative to which the popup will be centered. It has the following values:
"origin" When the popup opens, center over the coordinates passed to the open() call (see methods page).
"window" When the popup opens, center in the window.
jQuery selector When the popup opens, create a jQuery object based on the selector, and center over it. The selector is filtered for elements that are visible with ":visible". If the result is empty, the popup will be centered in the window.
Source
It worked for me when I set the width of popup div manually; try:
$("#popupBasic").css("width","200px");
What I want to do is getting width and height of elements inside of the selected ui-tab-pane when user selects tab header.
But width and height are always zero because ui-tab-pane is still display:none even though user clicked tab header.
Is there any fancy way to get real size of ui-tab-pane?
I solved by myself.
Don't use 'tabsselect' event when you need to manipulate ui-tab-panel.
Use 'li a' click event as below
$('#tabs li a').click(function () {
// do something to manipulate ui-tab-panel
});
I am trying to put auto height and width to modal dialog box (provided by jQuery UI). But some how the position of my dialog is getting disturbed. It is not coming in center. Every time I click on the link to open the dialog box, the dialog opens at different position. Could anybody please suggest how to resolve this issue...
u can main
div
{
margin:0 auto;
}
or
{
margin:auto auto;
}
==========
Othervise u can set a left and top javascript dailog box position set...
thanks
suresh