I am working with a grails app, and would like to use a modal grails UI dialog box to hold my loading image. I would then control the closing of the box from JavaScript when my event returns (or a timeout happens). I am already using Grails UI dialog box on the page, so I thought I would do this with another dialog box that holds the loading image. Is it possible to have a Grails UI dialog box without buttons at the bottom?
I went the route of using CSS to hide the close container and footer dialog. Given that my dialog had an id of loading; adding the following CSS keeps the user from having a way to close the dialog:
#loading.yui-panel .container-close {
background-image: none;
visibility: hidden;
}
#loading div.ft {
display: none;
}
Related
In my phonegap application I have a page that contains form elements. The problem is that when I navigate from home page to this page (form page) a white screen appears and then the form page appears. This screen occurs only once, when I open the form page after launching the app. This problem happens only for the form page, since the other pages in the application are showed directly.
I have set all transitions to none in my app, and tried to use fastclick, but nothing worked for me! How can I solve this problem?
Any help would be greatly appreciated.
Home page .js
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady ()
{
setTimeout(function(){ navigator.splashscreen.hide();} ,3000);
$('#GoToForm_BTN').on('click', function(){
$(this).attr('href','formPage.html');
} );
I have used this code in my css file but the problem remains
.ui-page {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
overflow: hidden;
}
a, input, button {
-ms-touch-action: none !important;
}
*{
-webkit-transform: translateZ(0);
-webkit-transform:translate3d(0,0,0);
}
Without seeing any code it is difficult to locate the exact problem, if indeed there is a one. I believe that the problem can be located at the loading time of your application. If it is a multipage application (one html file), and depending on the size of the DOM tree created, it is natural that you are seeing this white screen. The DOM hasn't been fully loaded so you see a blank screen. The best thing you can do is to show a loading image when your application launches, and remove it when the page is ready.
Is it possible to show a loading icon on extreme right side inside the filter input before the "X" clear text icon when we are making a remote call in jquery mobile 1.3 autocomplete.
UPDATE:
The simplest approach would be to substitute delete icon of jQM search widget before making remote call and then return it back after you finished processing. And that IMHO makes even more sense, from the user experience, than adding a second icon.
First define class for our ajax icon
.ui-icon-ajax {
background-image: url(http://code.jquery.com/mobile/1.3.0/images/ajax-loader.gif);
background-size: 18px 18px;
}
Second before we make ajax call replace icons
$("form.ui-listview-filter a span.ui-btn-inner span.ui-icon")
.removeClass("ui-icon-delete")
.addClass("ui-icon-ajax");
Third return delete icon back
$("form.ui-listview-filter a span.ui-btn-inner span.ui-icon")
.removeClass("ui-icon-ajax")
.addClass("ui-icon-delete");
Here is working jsFiddle example
in one of our grails appln we are printing some of the stuffs from jquery ui tabs. After applying grails ui-performance plugin I could not print the contents of all the tabs available in the webpage. Only the selected tab is being printed. We are using a "print.css" to print the contents of the page. Moreover in Dev mode I could print the tab contents as I wish...any pointer to solve this problem using a single 'print.css' will be highly appreciated. --- SiQH
Yes, you can use:
.ui-tabs-nav { display: none; }
.ui-tabs .ui-tabs-hide { display: block !important; }
in your print.css. It's not perfect, because you don't get the tab caption as a title.
I ran across this problem before and the best solution is use
#media print { .ui-tabs-nav {display:none !important;}
The print print preview will still only show the active tab but when its sent to the printer all the tabs will print.
how to remove default close button in dialog page in jquery mobile 1.0.
i'm using RC2 version.
thanks in advance.
Please put this in your page or stylesheet:
<style>
.ui-dialog .ui-header .ui-btn-icon-notext { display:none;}
</style>
<style>
.ui-dialog .ui-header .ui-btn-icon-notext { display:none;}
</style>
this doesn't work. at least with jquery.mobile-1.2.0
.ui-dialog .ui-header a[data-icon=delete] {
display: none;
}
but this way works
Now I'm using jQueryMobile 1.0.1. In this version no need to add this line in CSS file.
<style>
.ui-dialog .ui-header .ui-btn-icon-notext { display:none;}
</style>
If you have the situation that you want the close button refer to an arbitrary (not the last) page, you could also change the page to your desired close page first. Afterwards open the dialog like this:
// change to the "close" page first
$.mobile.changePage('#your_page_id_here');
now you can open the dialog and the close button will open #your_page_id_here
// for some reason you have to wrap it in a timeout
window.setTimeout(
function( data){
$.mobile.changePage('#dialog');
},
1
);
Advantages:
solution works for single dialogs rather than removing all close buttons from all dialogs
seamless integration on a single point of code
history manipulation is not recommended, see here
I have a jQuery dialog box on my website. I give a div on the page the "dialog" id it's contents become the contents of the dialog box. However, when the page is loading, this div appears at the top of the page and looks bad. Does anyone know how to deal with this?
Just hide your div via your CSS file:
#dialog {display: none}
This will not affect its actual display when the dialog is opened.
I tested to be sure, and this method worked with jQuery UI 1.7.2
Assuming that the dialog is changing the 'display' style [eg using .show() and .hide()] then all jQueryUI is doing is setting the display style. thus, you can set the div with the display:none by default, and that way it won't show when you load.