jQuery Forum

Hi,

  Has anyone tried using jQuery Mobile (inside a hybrid application) on iPhoneX? I'm trying to use the safe areas and set headers, content and body styling but it does not seem to be working. I'm using following styles following this link: Safe area constants:

1. .ui-page .ui-header {

       /* Status bar height on iOS 10 */

       padding-top: 20px;

    

       /* Status bar height on iOS 11.0 */

       padding-top: constant(safe-area-inset-top);

    

       /* Status bar height on iOS 11+ */

       padding-top: env(safe-area-inset-top);

    

       padding-right: constant(safe-area-inset-right);

       padding-left: constant(safe-area-inset-left);

    

   }

2. 
   

   .ui-content {

       padding-left: constant(safe-area-inset-left);

       padding-right: constant(safe-area-inset-right);

   }

3. .ui-page .ui-footer {

      padding-left: constant(safe-area-inset-left);

           padding-right: constant(safe-area-inset-right);

           padding-bottom: constant(safe-area-inset-bottom);

    

   }

Not sure what I'm missing. Anybody else got it working that way? 

Thanks in advance and regards

Hi,

   I have a jQM multi-page template in a single html where each page has one or two divs as popup as per this example: http://demos.jquerymobile.com/1.4.5/popup-image-scaling/ . It works just fine on Android and also on desktop but somehow only on iOS, while popup shows okay, when closing the popup it flashes intermittently. I have tried various things: such as move popup div just after the link that opens the popup, make popup div sibling of the page header, popup with animation disabled, disable data transitions on all links but the problem persists, no matter what, and only on iOS webview somehow.

Has anybody encountered this and, if so, has any suggestions?

Thanks in advance and regards

Hi,

Hi,

  I want to show a random message of the day page as soon as the first page is loaded and then only go to my main page. Is that something that is possible and hopefully is there a quick example to refer?

Thanks in advance and regards

Hi,

  I am trying to use a popup as a tooltip following the example here: http://demos.jquerymobile.com/1.4.5/popup/.

It works fine. Only thing is the i icon in the button seems to have some right padding as one could see in the demo. So, if in a line I need to show tooltip for two different texts the i icon for each has space and so appears visually a bit weird.

It will be good to have the icon as close to the text as possible. Is there a way?

I tried removing padding something like below but does not seem to work:

.ui-btn.my-tooltip-btn,

.ui-btn.my-tooltip-btn:hover,

.ui-btn.my-tooltip-btn:active {

    background: none;

    border: 0;

    padding-right: 0px;

    padding: 0px;

}

      

     .my-tooltip-btn  .ui-btn-inner {

    padding-right: 0px;

         padding: 0px;

}

Thanks in advance and regards

Hi,

  Has anybody got any success in using bootstrap library along with jQuery mobile? Specifically, using its carousel in even a separate  non jQM html file which is then used in a jQM popup. Or, it is not a good idea after all.

Thanks and regards

Hi,

Hi,

  Is it possible to generate a jQuery mobile icon (normal as well as 2x) from an existing image? Or one must really need to build it using an image editor such Photoshop or any other.

Thanks in advance and regards

Hi,

  I wonder if anybody has a recommendation for a good carousel plug-in specifically for jQuery mobile with possibly a working example? I have tried a couple but they don't seem to work very well.

Thanks in advance and regards

Hi,

  Is there a way to have "mini" listview that has minimal height? Consider a listview that is inside a panel which is then shown as sidemenu?

Thanks in advance and regards

Hi,

  I'm facing a weird issue. I used a "easy-tabs-to-accordion" responsive plugin with jQM 1.4.5 and, while it works fine on desktop, but on Android and iOS slows down the jQM page loading on which it is present when there seems to be more entries and/or each entry has longer content. I tried a different plugin ("tabber") with the same result. I wonder whether somebody has come across that and has some advice. Basically, I need vertical accordion for mobile but want to change it to horizontal for tablets so as to make full use of tablet screen real estate.

Does jQM has that feature inbuilt (if at all) without the need to use any other plug-in? Any pointers and/or examples appreciated.

Thanks in advance and regards

Hi,

   When using and linking multiple jQM separate HTML pages - that may have one or multiple jQM pages - with or without ajax, is it required to include jQM css and js files in each page? It looks like when NOT including jQM css and js in each HTML page, that may have separate jQM or jQquery plug-ins, the pages are not enhanced properly by jQM. Only when jQM css and js are loaded in each HTML page and without AJAX , all is good but each page transition (even when off) looks slower on Android and iOS in a hybrid App.

I wonder people can share real-world experience and advice as it is not entirely clear from the documentation and searching the Web yields conflicting information :(

Thanks in advance and regards

Hi,

  In jQuery mobile page is there a way to conditionally include certain files (CSS, javascript) based on whether browser is iOS based or Android? If so, is there such an example?

Thanks in advance and regards

Hi,

  Has anybody able to remove the tap highlight that appears with jQuery mobile? Tried couple of suggestions (via CSS only: -webkit-tap-highlight-color:rgba(0,0,0,0);) doesn't seem to work on iPhone or Android.

Thanks in advance and regards

Hi,

 I want to have back to button that appears itself when long text content (in a collapsible, accordion tab, page or others) is more than the viewport and then hide itself when content is scrolled to the top. Is there a way to do that?

 I tried the approach in this link: http://www.developerdrive.com/2013/07/using-jquery-to-add-a-dynamic-back-to-top-floating-button-with-smooth-scroll/ . It works fine with jQuery mobile + phonegap in iOS but in Android, once the "Back to Top" button appears, it does not hide.

Probably the scroll event of a page needs to be handled and not of the window? Any pointers welcome!

Thanks in advance and regards

Hi,

   Is there a best responsive tiles plugin for jQuery mobile along with a working example? Web searches gives some like masonry and others. Wonder whether somebody can share real-word experience when using with jQuery mobile in a hybrid application?

Thanks in advance and regards

Hi,

  Is there a way to have a background image in a jQuery Mobile page? The idea is to have a nice  image (say a flower) that is shown as background of a page including that of any listviews, tables, grids and other controls on the same page. Is that possible and, if so, is there an example of doing that (w/o plug-in)?

Thanks in advance and regards

Hi,

   I have been using with 1.4.0? I was wondering jQuery Mobile 1.4.5 compatible with that (based on practical experience) before we do upgrade?

Thanks in advance and regards

Hi,

  Is there a way to show readonly calendar on demand with with specific date selected and all others disabled? Use case is: For a date, shown as a label, clicking it needs to show that date in a nice calendar single month view but in readonly mode. That is, no date should be selectable or clicking any other should not cause the date to be changed. Is that something possible and, if so, is there a quick example for reference ?

Thanks in advance and regards

Hi,

  I'm seeing a weird issue on some pages. I use http://x1024.github.io/jquery-fastbutton/ to eliminate click delays. On some HTML pages (that have multiple jquery mobile pages and so are "multipage" templates") loaded without Ajax, somehow the first page is navigated automatically as soon as the HTML page is loaded. It is intermittent and it happens only on Android. On iOS it works fine.

I'm using jQuery mobile 1.4.0 still.

Has somebody seen this? Any pointers appreciated.

(I tried to use FastClick.js but somehow when using that it breaks jQuery Popup panel.)

Thanks in advance and regards

Hi,

  Seeing various posts in the forum, blogs, etc., there seems to be some issues with jQuery mobile transitions in a hybrid mobile app (such as using phonegap and others) and general recommendation seems to be don't use them (i.e. use the default transition of 'none' to avoid flickering.) Once for all, can please somebody confirm the below then:

1. Is that still the case?
2. If (1) is true, is there any simple workaround if at all  (probably use CSS transformations, some plugins?) and link to it?
   

Appreciate any and all feedback and experiences when using jQuery mobile transitions in a hybrid mobile app for a newbie.

Thanks in advance and regards