Page Navigation Issues under IOS9 (beta)
After receiving complaints from several users, I loaded up IOS9 (beta) to test my existing app that works fine under IOS8.4. Much of it works but I seem to be having some serious page navigation issues with the headers that were not present in IOS 8.x. I'm running JQuery mobile 1.4.4. The bulk of the problems appear to be with navigation header buttons using 'data-rel="back"': <div data-role="header" data-position="fixed"> <h1>Edit Stuff</h1> <a href="#" data-icon="back" data-rel="back">Cancel</a>
JQuery Mobile 1.4.4 - Attempting to build a return/search function.
Hey there, I am sort of stuck. I have to build a search function in the tool Appery.io, which is normally drop n drag, but it doesn't serve the purpose in this instance. The details are: I will post some screen's to help flesh it out- So, in order there is a 'search input field' 'search button' 'select button' & in the background (backend REST/GET API) the Database with 6 fields that must be searchable & return results appropiately, these fields are: tradingName | phoneNumber | dealerAddress | dealerSuburb
inline text boxes in popup
Hi, First post here, hit a roadblock with this over several days. Im trying to create a popup, with a form, but have the text in-line. This is the code I've got that as far as i know should work <div data-role="popup" id="popup-AP-edit" data-theme="a" class="ui-corner-all"> <form> <div style="padding:10px 20px;"> <h3>Edit AP</h3> <fieldset data-role="fieldcontain"> <div class="ui-field-contain"> <label for="flip-AP">Enable:</label>
Height of content div
Hi guys, I wrote a jquery mobile page with header and content div. I set the height of content div at 100% so that it fills the remaining page after the header div but it overflows from the viewport. Why do this? I googled but I didn't find an explanation!
About Mobile jquery Theme roller
hello sir, I Have One Problem in Mobile jquery theme roller I want to select diffrent color in Read-only list item and Text Input in jquery mobile 1.4.5 example if i select red color for read only list Item so that time i want to able to select Text Input Background color yellow so that time , what should i do for like this problem, In sort i want fill both color different in my web site theme So please give me any suggestion for further process because my process stop at this step .
please help
I started to use jquery mobile recently, I built my first project, it was working fine, after I updated my ios to ios 9 every thing is disappeared as if I'm not using jquery mobile. I started to use my project by google chrome which is on the iphone, a week ago google chrome has been updated, after the update every thing is disappeared if I'm not using jquery mobile. this is the header of my pages. <head> <!-- Include meta tag to ensure proper rendering and touch zooming --> <meta name="viewport"
.popup('open') not working after navigate next page
1) My start up page is 1.aspx and i am using .popup('open') on this page and popup working fine. 2) I navigate to 2.aspx page using $.mobile.changePage( "2.aspx", {transition: "slide"}); 3) back to 1.aspx page using $.mobile.changePage( "1.aspx", {transition: "slide"}); 4) Now .popup('open') function not working. please suggest me solution. I am using jquery.mobile-1.2.0-alpha.1.js
Buttons don't work after submit or clicking link
Hi Forum, i have a problem, i use the code attached. After i load the page the buttons for power, plus and minus are working as expected, but after i submitted the form or i clicked one of the "a href" buttons the power, plus and minus buttons are not working anymore. Can anyone help me to solve this issue ?! Thanks in advance !!! <!DOCTYPE html> <html> <head> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <title>LED-Control
Jquery mobile 1.2.0
I am using jquerymobile 1.2.0.js and jquery mobile datebox plugin.In my page one input field is popup from jqm1.2.0 and other field has datebox .onclick of datebox it opens datepicker and the selected date got displayed.After selecting the date ,onclick of popup fields popup opens and its showing the datebox improperly without making me to select the popup content.This is happening only on ios9 .Do anyone have any idea for this?
JQuery multiple select filter bug
I have a multiple select with a filter. Filtering works properly, but when you select a filtered item it does not change to the selected state (there is no tick in the box of the selected item). I followed the instructions of the offical JQuery Mobile page. The only difference is that they do not use a multiple select. Is there a workaround to have the filter functionality with multiple select boxes? Official JQuery Mobile filter select My select: <form> <div class="ui-field-contain">
Jelly Bean
What video format is supported in android version 4.2. Trying to get a video to play using .play(); function - the format I'm using is h.264 with AAC audio but it's not playing when I click a play button. Any advice would be helpful.
href in popup listview: jquery selector not selecting intended element
In the following html block in a jqm app, I cannot select "DEF" (which is in the second <li> element): <div data-role='popup' id='popupSwitchView' data-theme='none'> <ul data-role='listview'> <legend>Choose a view</legend> <li><a href='javascript:;' data-role='button' data-transition='fade' data-mini='true' class='ui-btn-active switchview' id='ABC' name='theView' value='ABC'>ABC</a> </li> <li><a href='http://google.com' data-role='button' data-transition='fade' data-mini='true' class='switchview'
Need general advice
I have seen in several posts users being discouraged from using multi page documents beyond a very limited number of pages. Could someone take a few seconds to explain why ? Is it for performance (of the browser or JQM) reasons, because of limits JQM ability ? The reason I am asking now is because I have always used multi page docs with something like 15-20 pages/popups etc and never had issues. This was necessary as the app needed to run offline (saving data entered in the browser "filesystem"
jQuery Mobile removing
I'm having an issue where jQuery mobile appears to be removing events with datatables after calling enhanceWithin(). Below is a sample of the issue, try to use the search: https://jsfiddle.net/Ls70bh0q/ Datatables has events bound to the text input, and as soon as I call enhanceWithin these seem to no longer fire. If you remove the enhanceWithin call the search works fine, but the page doesn't render with the jQuery Mobile styles that I need.
Audio not playing in the mobile (works only in desktop navigator)
Hi, I'm having a problem playing an audio when I test my application in the mobile. I have a simple audio element like the following in the DOM: <audio id="audioID"> <source src="audio.mp3" type="audio/mp3" preload="auto" /> <source src="audio.ogg" type="audio/ogg" preload="auto" /> </audio> Then I play it using: $("#audioID")[0].play(); This works fine in my computer, using Chrome, but when trying it in my application (phonegap app, or directly in the Chrome browser from Android) it
Set height of multiple select menu
I have a custom multiple select with a lot of entries. When I open it, it opens a dialog with a very long list, so that I have to scroll down the entire page. How can I open it in a smaller dialog with scrollbars? < div class = "ui-field-contain" > < label for = "select-custom-1" >Basic:</ label > < select name = "select-custom-1" id = "select-custom-1" data-native-menu = "false" > < option value = "1" >The 1st Option</ option > < option value = "2" >The 2nd Option</ option
admob on jquery mobile
hi, i created an app with jequery mobile and phone gap. added an admob plugin of cranberrygame . the admob banner is shoen but it always scroll with the page. no matter if it posiosion at the end of the page or at the bottom of the scrren. every Suggestion helpful !
jqeury mobile pagecontainer change not working on swipe
I am working with jqm 1.4.5. I want pages to change when user to swipes left and right. So I created this code: $(document ).on( "pageinit", ".my-page", function() { $( document ).on( "swipeleft swiperight", ".my-page", function( e ) { var prevLink = <some url>; var nextLink = <some url>; if ( e.type === "swipeleft" ) { $( ":mobile-pagecontainer" ).pagecontainer( "change", nextLink, { reloadPage: true}); } else if ( e.type === "swiperight" ) {
How to use an IFrame in a mobile app?
HI guys, I am kind of new to Mobile apps and I am trying my best to catch up with different stuff that could be done creating an app. I am working on a test app which in it I want to use an IFrame to display a webpage, and to create that path I have used the IFrame inline code but when I open it the page is not showing correctly and not acting responsive. I have tried all kinds of auto or 100% on both height and width of it ... it just becoming more confusing and time consuming, Could anyone please
Redirect to an application page Not on the same server after login
I have a HTML5 app with a log in screen. When I enter the details, it goes out to an external server, runs a php file called login.php and check the details. If the details are correct I need it to redirect back to the HTML5 app to the page with id #home on the index.html file. If the index.html and login.php are both sitting together on the server, a header method going to work fine. But now, the html file is resting on a mobile phone as a HTML5 app, which reaches out to the server (which is possible
New page events not working properly.
I have been trying to update my JS to get ready for the newer versions as they come out (I hope). The br_smsDetails page is an edit page used to edit a single row in the parent page. What I need is to have the hide event run some code that refreshes the parent page after an edit. I ran into a problem with the pagecontainerhide event that I don't understand. The comments in the code below explain my problem. How do I get the new hide event to work like the pagehide event? Thanks. $(document).on('pagecreate',"#br_smsDetails",function(){
Jquery mobile panel list scroll not working on tabs and mobile devices.
Hi, I have a side panel with long list. clicking on any list item it goes to the specific div on the page. For connecting panel with div I am using swiper plugin swiper plugin The problem is- 1. Panel list scroll is not working on tablets and mobile devices. 2. I want panel and page to be scroll independently. when panel open i don’t want page to be scrolled. Only after panel closed page can be scrolled. 3. when opening panel second time page scrolls to top before selecting any new item from the
Removing a page from the DOM after appending to it.
Hi, if I append to a page using: newPage.appendTo($.mobile.pageContainer); And that page has the id="added_page". What code would I use to then remove it from the DOM at a later stage?
Tabs in many columns
Hi! I'm using jQuery Mobile tabs, and i implemented the following css trick, to show more than 5 tabs in 5 columns: .mytab { width: 20% !important; clear: none !important; } But if i have more tabs, the result is very strange, between some tabs is a hole: http://lnk.bz/tabs.php What is the problem, and how can i fix it? Thank you! Lay
textbox scrolling problem
in my jquery pages which is used inside application in webview, if there are 4/5 text boxes, the last 2 text boxes, even though visible after full keyboard is displayed, are still scrolled up, where as in native i have full control over what to scroll and when. why is this not so in jqm ? are there any work around ? also i see that using data-position=fixed makes my hader not to scroll, but it becomes invisible for sometime and then becomes visible, is it a known bug ? regards jags
Upload File
Hi, I am using for the first time upload file. My application is regarding jquery mobile phonegap. Suggest me the steps for upload file regarding jquery mobile app only.
Button with link only works once
Hi Folks, i am new to this, and i am helpless. I designed my website for my RGB-LED Control with query mobile. It looks nice and works fine. But my buttons only work once. For example: i push the dim up button, it dims the led up. i push the dim up button again, nothing happens, there will be no ne http request registered by my controller. i push any other button, then the dim up button again, and it works again for one click. It seems so me that a link is only clickable once and then marked as
Changing the back-btn-text on press of a button.
Hi, if I have a back button in the header like this: <div data-role="header" data-add-back-btn="true" data-back-btn-text="Yahoo"> Is it possible to change the back-btn-text on the press of a button? Thanks in advance.
jQm ajax pages
Hi, I am doing a hybrid app. So I need to add pages dynamically. But for some reason it does not work. Could you please check and help me fix the problem? Here is the frame of the main page where I want to inject the jQm page. index.html <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
Conversion from older version of JQuery to newer not working.
Hi, can anyone help me with the following? I want to implement the following navigation as seen on this jsfiddle: https://jsfiddle.net/a4poster/MGdm2/42/ . However, I want it to run on jquery-1.11.0.js or later, I have tried but I am getting nowhere so any help would be greatly appreciated. Thanks -A4.
Old JQuery codes in Dreanweaver cs6
Hi Guys. I recently started with Mobile Apps using Dreamweaver which kind of makes things easier but I found out the codes which Dreamweaver is using are all outdated and needed to change Jquery and JS and related css files. Since I replaced them all the icons are gone. What am I doing wrong ? <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>moapp</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="jquery-mobile/jquery.mobile-1.4.5.min.css" rel="stylesheet"
How to center jQuery Mobile Popup with scrolled contents?
All Popups have the data-position-to="window" style. The body has style="overflow-x: scroll !important;". And the viewport is set to: meta name="viewport" content="width=device-width, initial-scale=1" If the user did not scroll all Popups are nicely centred in the browser window. But after a horizontal scroll the Popups are no longer centred and are partial or completely invisible. They can only made visible after scrolling back. Any suggestions how to fix this?
page change jump after transition but only first time
Hi all, searching the web I have seen a lot of similar posts, but all of them very old and without aproper answer: I have a jquery mobile application and I use phonegap build to deploy it. if I specify a page change transition ( I'm using pop ) I can notice a 'jump' in the transition, but only the first time a certain page is loaded. I can see it both on prepared pages ( already present as they are on the index.html file ) and pages that I fill and enhance after an ajax request. I notice the problem
Back Button Broken in iOS App
It appears that iOS 9 and the last version of iOS 8 broke the back button in jQueryMobile. The back button works on a site while in Safari and Chrome browsers. However, the minute you save it to the Home screen (to lose the browser chrome), its back buttons fail in the Web app. Example: http://newmaterial.com/backbutton Short of a custom JavaScript button, is there any workaround strictly within jQuery Mobile? Thanks.
Getting the EQ from dynamic list.
Hi, can anyone help me with the following, I have created a fiddle, https://jsfiddle.net/a4poster/zd6uwmp5/ . When a user clicks on the list the eq() of the list is displayed in the alert box. Thanks in advance.
Using Jqurey Mobile without the Ajax/caching stuff?
I like the jQuery mobile, but new to it and new to jQuery. I am having issues with the caching. Ive used $('a').live('click', function() { var $this = $(this); if ( !$this.attr('rel') || $this.attr('rel') != 'external' ) $(document.getElementById( $this.attr('href') )).remove(); }); to disable it, but it does work all the time. Ive also had trouble setting up default transitions, I put in $.mobile.defaultTransition('none'); without any effect. With these 2 key issues, I just want to turn
Strange width change to all elements after a form that won't submit
I have 2 problems on a page that may be related somehow. 1) The first form on this page simply will not submit. 2) All of the elements immediately after the form are slightly wider on the screen than anywhere else on the page. http://m.publicmissiles.com/page1AF.aspx Please help! ---Frank
Input file iOS 9 display issue
Hello, I have an issue on IOS 9 when I click on input type file when I build my app on phonegap but when I execute my code on safari then it works OK. Attached the issue (on left safari browser on IOS 9 iphone 6s, on right phonegap build app on IOS 9 iphone 6s) When i click on: '<input type="file" name="myFile" accept="image/*;capture=camera" id="myFile">' For information, it was working fine with jquery mobile 1.2 on phonegap, now I passed on jquery mobile 1.4.5 and it is not working anymore
Optimization for Small Screens iPhone iPod
Optimization for Small Screens. I'm currently working on an app that will play animated videos. Clicking onto any of the image in the carousel will take you to an animated video http://orain-na-cloinne-bige.e-storas.com My question is there a way of overlay a div on the video when it's in full screen mode on iPhone?
jquery mobile change on Chrome
Hello, I have an issue when I'm using changePage on Chrome (it is working fine on firefox) Issue I have two pages in one. I use changePage with "slide" attribute. When I slide to page B from page A. It is OK When I slide back to page A from page B then the page is displayed and hidden few milliseconds after When I use "none" instead of "slide" to go on page B from page A then it is wokring fine The code to test it : http://jsfiddle.net/sz9pjbcv/ Thank you for your help.
Next Page