I have a jQuery UI Dialog, it is Modal and shows with a Bounce effect. I use a Theme where the background is dimmed with a striped image.
The first time the Dialog is opened, the striped background also covers the dialog during the bounce effect. Once the bounce effect has finished, the dialog becomes modal and appears in front of the striped background.
On the next opening, the dialog bounces in front of the background right away.
How can I make the dialog appear in front of the background right away?
Tom's answer pointed me in the right direction, and Firebug was very useful!
The dialog is wrapped in a <div class="ui-effects-wrapper"> which is generated in the createWrapper function in ui\effects.core.js
I added a parameter "z-index=1005" (just to be sure ;) there.
So in jquery-ui-1.7.2.custom.min.js it now looks like this
createWrapper:function(f){if(f.parent().is(".ui-effects-wrapper")){return f.parent()}var g={width:f.outerWidth(true),"z-index":1005,height:f.outerHeight(true),"float":f.css("float")};f.wrap('<div class="ui-effects-wrapper" style="font-size:100%;border:none;margin:0;padding:0;z-index:1002"></div>');
Not sure if it's the best way, but it works.
This sounds like the zIndex of the dialog is not assigned until after the animation. Try this in your CSS:
.ui-dialog {
z-index: 1002;
}
Dialogs usually have this CSS class, and the overlay usually has a zIndex of 1000 (at least in the version I am currently using). If this doesn't work, try to find out (using Firebug) what other classes are assigned only during the animation and assign a zIndex to those.
Related
The bug is described in detail here https://bugs.webkit.org/show_bug.cgi?id=134596
Relevant part is this:
Without Scrolling you should be able to click any of the radio buttons
Now scroll down the page
Trying to click any of the radio buttons on the left results in an
offset click. One of the radio buttons below your click will receive
the event.
Expected: The radio button I clicked on gets focus
Actual: The click event is offset the amount the iframe was scrolled.
Main difference is im not using an iframe, just a div, but the same problem.
If I remove either overflow:auto (but it wont let me scroll then) or -webkit-overflow-scrolling property the correct clicks happen. It looks like it was fixed in a nightly, but this has to work now and for backwards compatibility. Is there a hack to get this to work? My best idea so far is to just not have that -webkit-overflow-scrolling prop for iOS until it works, but that kinda sucks because momentum scrolling is what makes it feel much more like an app.
I'm building an iOS app that uses a webview in one place. When the user taps on an textarea and the keyboard appears the textarea get a shadowing highlight effect and then goes back to normal. Please note that I'm not talking about webkit-appearance och outline, but the shadow that covers the whole textarea being tapped.
I'm guessing this is some kind of accessibility feature. Still, it mess up my animation and makes the whole view look like crap.
Does anyone know if it's possible to remove this highlight shadow?
You can disable it by setting the css attribute -webkit-tap-highlight-color to rgba(0,0,0,0);
But as you mentioned it is a usability feature, so you should not turn it off. ;)
See:
http://www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/
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");
In jQuery-UI dialog box, the first button appears to be the default, therefore having focus set to itself.
But, this causes a frustrating effect, especially in Safari. Even in IE, you will see a rectangular selection mark around the button. Moreover, the hover effect will not be seen.
How can I set NONE of these buttons as default and therefore NOT having focus set on any of them?
Edit:
Examples can be seen at jqueryui demo pages and a snapshot using Safari is below.
I want to get rid of this blue selection.
I think it could be an css-class, that turns the button to "default".
Check with the Firebug Element Inspector what classes are applied to these buttons, and append the standard css class to all buttons of the form.
In an application I'm developing, I pop up Help in a modal jQueryUI dialog. For the most part, it works beautifully. There is one problem: if you try to use the arrow on the lower right of the dialog to scroll the help text, you can't, because it is in the same place as the mouse-drag resize for the dialog.
I realize this would not happen if I used the jQueryUI dialog "button" option to add a "Close" button at the bottom of the dialog, but that would be inconsistent with our style elsewhere in the application.
Anyone know a reasonable way around this? Ideally, I'd like something that would give me a small non-scrolled div at the bottom of this dialog, without affecting other dialogs, so that the mouse-drag resize would fall lower on the screen than the down-arrow.
Adding a bottom padding to the ui-dialog class in your jquery-ui.xxxx.css should result in the behavior you want:
.ui-dialog {
... Existing CSS...
padding-bottom: 15px !important;
}