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());
Related
I use element ui's el-popover to show my popover. But when I click outside of the popover, the popover won't be closed. Maybe I blocked some events to body or some other elements used by popper.js. Please gime me some advices or is it possible to specify an element for popper.js to handle events for closing the popover?
Some element blocked click mouse event when propagation.
I have added a UIWebview to a view controller, can show a working html page that has draggable elements and a lot of javascript. The buttons work, links work, images load, javascript runs, all seems well. But the draggable elements don't drag. Instead the webview just scrolls within the view with bounces. A long tap just selects the whole web view.
How to I enable this web page to do a drag and drop instead of just scrolling it within the UIView?
If you load your HTML in Mobile Safari, does it also scroll the view rather than dragging elements? If so, you'll need to change your JavaScript so that it's compatible with touch-based dragging.
See: Javascript Drag and drop for touch devices
When you click on a JQuery UI slider that is disabled and the page has been scrolled down, the page goes back to the top.
This is happening because the slider widget is implemented with an anchor tag containing an Href of #.
This is my hack solution.
$(".ui-slider-disabled").on("click",
".ui-slider-handle",
function () {return false;});
It works well but, is there a native (API) way to stop this?
How about this (you may need to change the class, depending on how you set it up)
$(".ui-slider").click(function(e){
e.stopPropagation()
});
I'm using jQuery UI. When I drag element in the iframe and I move mouse out of the iframe, the element is still in the draggable state. So when I move mouse back to the iframe, I can still drag it, like I would had left mouse button down.
How to avoid it? So that if I start to drag element, it stops when I go out of the iframe in the last draggable position?
You need to trigger a mouseup() when your pointer leaves the iframe so that the element being dragged is no released.
$('body').one("mouseleave", function(){
$('body').mouseup();
});
There were more questions asked pertaining to my solution, so please refer my question posted here for more details
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");