Passing info to an iframe in jquery.mobile
I have used the map from the example here http://demos.jquerymobile.com/1.4.0/popup-iframe/#&ui-state=dialog If you look at map.html (which is the source of the iframe) it has lat/long co-ordinates How would I pass these co-ordinates from the parent page? I have tried lots of things but nothing. When the parent page loads - it loads the map.html page before I get chance in the creating page javascript to be able to pass in the lat/long I have also tried in the parent page, when I get the lat/long,
jQuery Mobile style doesn't affect the app after visiting an external link
I've created an mobile app using jQuery Mobile and Phonegap. When I visit my app features by pressing the buttons,jQuery styles works fine. But when I visit other web links through my app and come back to the app again, the app styles and interface appears with no jQuery mobile style. Here is the screen shot- Before visiting external web link: After visiting external web links through the app: Here is the code for this page- <body> <div data-role="page"> <div data-role="content"> <div data-role="header"
How do I create auto resizeable button and text using jQuery Mobile?
I am trying to create an android mobile application using phonegap and jQuery Mobile. I've created the interface of my app, created some buttons and some other basic stuffs. This runs into android flawlessly. The interface, buttons are fine in my tab. But when I installed it into another android device of lower screen size the interface became awkward. The button size was all ok, all the buttons had equal height and width but the button text was not fitted with the button width. Text of longer length
Using Jquery Mobile without data-role="page"
Hello everybody, I know, it is not a good idea to combine Bootstrap and Jquery Mobil. But I like the responsive layout features of bootstrap and its navbar and I also like the possibilities of jQuery mobile (style, including swipe events, listviews etc.) and transitions. But Jquery Mobile always needs the data-role="page"- container which doesnt allow me to use just the listview-widget of Jquery mobile. And I didn´t find a simple way to use the widgets without this page-Container. Can anyone help
jQuery lightbox chaining
Hi, I have the code below and I want to programmatically reproduce it with jQuery so that it can handle a variable number of photos from Flickr. I want to use jQuery.wrap() to wrap each tag in a link back to the original image on Flickr using method chaining. I want to set a unique ID attribute on each image. Its value is to be based on a loop counter in the for-each block ( using “ attr() ”). Then I want to refactor the code to pop open a lightbox style dialog when clicked, i.e. reuse the wrap()
DOM7011: Error on Dialog Close button. Please help
First of all jQuery Mobile is so amazing. Thanks jQuery Mobile Development. Im facing only one bug in IE 9 - I test it by IE Debug tool. When i try to close dialog. It display the following error: DOM7011: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337 Im searching everywhere and not able to find the solution. But otherside i test jQuery Mobile Documentation example dialog page. Its working perfectly fine in IE. Its
Popups flickering on multi-page template
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
Newbie: Duplicate clicks on Android?
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
Showing any page as a dialog?
Hi, Is there a way to show a JQM page (that is part of a jQM multipage template in a html and each jQM page has a id) file as a dialog using data-rel="dialog"? The idea is to use the destination html file as is and also popped up as a dialog to avoid defining a separate popup. Thanks in advance and regards
No bleeding out when using a JQM control on a page
Hi all, I have the following scenario: - a static index.html page that looks like this: <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> </head> <body> <script src="myscript.js"/> </body> </html> - at runtime I create a container <div id="container-uniqueid"></div> as a direct child of the body element - I dynamically load a jquery mobile control (e.g. slider) at the press of a button and place the jquery mobile control inside
Problem using Event when slider is changed
Hi! I am currently using the following jquery Mobile together with jquery. <link rel="stylesheet" href="themes/klaus-theme.min.css" /> <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css" /> <script src="jquery-1.10.1.min.js"></script> <script src="jquery.mobile-1.4.5.min.js"> I am trying to use the exakt same fiddle at this url, and no event is triggered after changing the slider in my code... Are there any problems with jquery mobile 1.4.5 with jquery 1.10.1 ? thanks, jsfiddle for my problem
callback and no navigation using submit.
I am using JQM 1.4.4. I am trying to submit a form using the default ajax call and I need to do two things that I can't figure out. First I need to stop all navigation and second I need to have a callback so I can notify the user if the save was successful or not. I know I can do this using ajaxSubmit ( options ) in the jquery form plugin but I was hoping I can do this with JQM. The last part of the action "savesharefees" is used to call a php save function that returns success of failure. Thanks.
throttledresize demo
The throttledresize demo found at: https://api.jquerymobile.com/throttledresize/ For me, it seems to work on Android and not iPhone. Is it best to just use orientationchange event since it falls back to throttledsize as a backup? Is this a known device difference that we just have to keep in mind? I don't think there's any other way to resize the screen other than an orientation change on iOS, is there?
Best practise to embedd video external source
Hi, I'm trying to build an app with phonegap. As frameweork I'm using jQuery mobile. In my app there are several pages (it's a multipage layout) with a video in it. I'm want to use vimeo for this. When I embedd the iframe it plays well, acts fast. But when I leave the page to go to the next one, the audio keeps playing. Because of this I'm using pagebeforehide, in that I'm clearing the source of the iframe. This works great, the audio stops also when leaving the page. But there is another problem
Linking internal .html pages in navbar with JQuery mobile 1.4.5
Is it a bad idea to link 4 different internal pages within your index.html navbar as .html files when your main data role has say for example 3 button links to other pages. I basically want 4 different pages in the navbar than whats on the main first page, but can't do it as # in navbar, they just won't link? what am i doing wrong here? also, when i refresh the width of the 3 buttons on main area go full width but I've set them to 60% in the css, sometimes it does that. Thanks! <div data-role="page"
Best GIS Icon to use?
Looking at the Icon set, I really don't see a good Icon for a GIS button, basically a "find my address" or invoke the Mobile GIS or a web-based GIS to find my address. Google uses the Pin button to "pin your current location". Another good GIS icon might be a "compass", or maybe a "a pair of binnoculars", or a "little antenna dish". Am I missing these icons? What are people using for an icon to institute a GIS search or to locate their address via the satellite so to speak? The location Icon doesn't
How can i put autocomplete suggestions 'on top' ?
See the examples here: http://demos.jquerymobile.com/1.4.5/listview-autocomplete/ http://demos.jquerymobile.com/1.4.5/listview-autocomplete-remote/ There is the search box, then there is a "View Source" button. When suggestions are displayed, they are inserted before the "View Source" button and thus, the page grows in length. I would like the suggestions to float on top of the rest of the page. I *think* I could play with zindex to make this happen but am not sure - my CSS is not the best. Anybody
Tap event handler
Hello everybody I am facing a problem related i think to event management and 300 ms delay between end tap action and real click event My scenario I write a on-tap handler and inside this handler i retrieve a value of an input field display in the page (but the value of the field is process and transform by the on change event of the field itself). My big problem is the delay between execution of the change event and tap event During execution of tap handler , the change event are not still triggered
enhanceWithin() not working .
Hello. am trying to populate a list view via ajax and jquery. after i have populated the data. the enhancement doesnt show. this is what i did. http://jsfiddle.net/mystro/zmhe575b/ now in the result pane are two different results. the first result labeled " Static".is what i want to acheive when i receive the data. and the second to the last one is what am getting instead. when i inspect the element in the browser there is a new class(ui-link) that is been added to the <a />. i tried to remove it
Jquery mobile page change jumps back to previous page
Hello, I've a big problem with a jQuery Mobile Application: I'm using changepage to switch the page with currentPage. There are no transitions included still it jump back to previous page. And declared $(document).bind("mobileinit", function(){ $.mobile.pushStateEnabled = false; $.mobile.defaultPageTransition = 'none'; }); Before the jquery mobile js loads. Any one can help me how can I solve this issue??
Tips on designing scaling icons
Howdy! I'm building an audio player with JQM and I'm now at the stage where I want to add pretty UI controls for the play button, skip button, etc. My question is, does anyone have any tips or guides on how to create responsive controls that scale to any size device, big or small? I have an idea that it will possibly require the creation of different sized icons with media queries applied in CSS to decide the most appropriate icon. However, I need a good starting point as to what sizes I would
Field Validation Will Not Work
I'm new to jquery mobile. My form works but none of the fields need to be filled in even though I have javascript validation. Here is the javascript part. I have it in my header. I believe I'm using jquery 1.3 I tried upgrading to the latest version and it really jacked up everything. I'm too far along to switch now. <script> $(document).on( "pageinit", function() { $('#checkpay checkform').validate({ rules: { dcs1: { required: true }, dcs2: {
ui-responsive-panel issue in windows 8 lumia 630 device
Hi, I have used responsive panel in my application, in portrait mode panel is fully expanded and when we change to landscape mode, left and side I am showing panel and right and side details. Left side panel always visible, for that I have used below function. function panelOpenDefault() { $( "#nav-panel" ).panel( "open"); } When I change from portrait to landscape mode header is moving little ride side, in browser and android device it is working fine, I am facing this issue only in windows phone,
multiple pagecontainers
I've been using a multi-page design successfully for a while now with JQM 1.4. I also have a persistent header that is working well. However I have a need to have a different persistent header depending on "groups" of pages. E.g., 3 pages should have persistent header A, and another three pages should have persistent header B. With the persistent header defined outside of the pages, but within the pagecontainer (body in the default case), the data-id attribute doesn't seem to do much if anything
document on change fired twice
Hi, I am looking for a solution for a jquery mobile events. I created a multi-page website. One Of them contain a list of slider elements created "on the fly". Each time I go to this page, I delete every li elements and I create a new time all of my li elements (and of course my input type=slider elements) because content can change. For instance , this is a element of the list : '<li data-role="list-divider">Element<label for="flip-'+key+'"></label><select name="flip-'+key+'" id="flip-'+key+'"
Absolutely positioned element invisible if within a grid
There is an element which is part of an autocomplete "popdown" list. It needs to be absolutely positioned, so it does not push other elements down as it fills out. This works fine in one place, but in another - where it is within a jQuery Mobile ui-grid-a grid construct - the element is invisible: http://jsfiddle.net/needlethread/kkpjq8ww/ The CSS can be edited to add the display:absolute style, then the topmost element vanishes. It is still placed there - the developer tools can see it and outline
Windows 8 & jQuery Mobile
Hi all, I have a MobileFirst ( Worklight ) project that is available on Android, iOS and as mobile web site. Now I'm trying to make a Windows 8 version but I'm facing an exception with jQuery Mobile ( 1.4.5 ) when I try to tap on a button that change the page. Seems that in "jquery.mobile-1.4.5.js" in the "handleTouchEnd" function the value of "getNativeEvent(event).changedTouches" [line 16] is undefined function handleTouchEnd( event ) { if ( blockTouchTriggers ) { return; } disableTouchBindings();
alert() replacement
Hi there, Here is my test app http://plnkr.co/edit/r7B4mck6kfRhuvjEKVrG?p=preview If you click on the Search Database button without selecting anything from Week 1 or Week 2 drop down I display an alert ("Nothing Selected") message. I installed this app on the phone and this default JavaScript looks ugly and is not theme. Is there any way I can theme or replace it with something else. Thanks Joe Green
How to set max visible width for text input ?
I have an 4 input tags and it displays each on its own line, full width. I expect an short input - five or six characters maximum. I can set the maximum input, but visibly, the box is still drawn full width. Other than putting each input tag inside the column of a table, how else can I force the input box to appear short (50px for example). I did try CSS of input.Num4 { width: 50px; text-align: right; } It limited the input, but the box that was drawn was full length. All help... greatly appreciated
Can I get the icon to show for a checkbox in a controlgroup?
jQuery Mobile 1.4.5 I find the default behavior where the "check" icon disappears when a checkbox is part of a horizontal control group to be visually inconsistent in some places. Any tips on how to get it to display?
how to hide results after selecting from listview filterable / autocomplete
Something that has troubled me for some time - I solved it just now and thought I would share... Using listview autocomplete http://demos.jquerymobile.com/1.4.5/listview-autocomplete/ I have a form for entering a business name and address. When the operator (user) enters a business name, I want it to list similar names already on file. Purpose: Give the operator the chance to either edit an existing record, or give them an idea the record already exists, or allow them to add a new record that is
JQM Select form button does not fire on first click
I am having a problem with a select button not opening on the first click. After that, it works fine. Just very annoying. It is the only select I have in the entire app. <select name="selectMenu" id="selectMenu" data-native-menu="false" data-theme="e"> <option value="0">Default</option> <option value="1">Blues</option> <option value="2">Mochaccino</option> <option value="3">Snow Day</option> <option value="4">Twilight</option> <option value="5">Tutti-Frutti</option>
How to add related text in line with an input button/field?
Let's say I have an input field where the user is typing a percentage. I want it to look like this: [text input] % Or indeed, I might want the label to be inline too: Discount: [text input] % Is there a good way to achieve this? Labels always seem to be placed above the field, and any text after the field is placed below, as the input field gets wrapped in a div, which displays as block. Currently my workaround is to make a controlgroup and add buttons with the text, and then deactivate them.
Listview - Remove area on the right including arrow
Hi all, I created a listview with an image on the left and some text, in addition I use a themeroller. An area on the right was created automatically, including an icon with an arrow. Because I have this image on the left, I indented each list element with padding-left: 80px; In doing so, the area with the arrow on the right, which was very small at the beginning, also changed and increased in size (also 80px). Has anyone a hint how I can get rid of this area on the right? I already tried to remove
Manage events pagecontainer change
Hi page_A.aspx $.mobile.pageContainer.pagecontainer("change", "page_B.aspx"); page_B.aspx none of these events is raised. why? what is the best practice to make the record events as you do with document.ready? $ (function () { alert ("go"); $ (". ButtonMenu"). bind ("tap" Go); }); $ (document) .on ("pagecontainerbeforeload", function () { alert ("pagecontainerbeforeload event fired!"); }); $ (document) .on ("pagecontainerbeforeshow",
Pre-rendered collapsible content on jQuery Mobile demo fails to validate with W3C
I just ran this through the w3c validator: http://demos.jquerymobile.com/1.4.5/collapsible/ Line 230, Column 50 : Element div not allowed as child of element a in this context. …<div class="ui-collapsible-heading-status"> click to expand contents</div> I was going to use the pre-rendered content, but there seems to be an issue here?
Showing random message of the day page?
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
Removing button padding?
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
Using bootstrap with jQuery mobile?
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
1.4.5 listview problem
Hello, I try to use listview , but it creates unwanted spaces. How can i fix this problem. Screen My codes like below. <!DOCTYPE html> <html> <head> <title>Test</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="UTF-8" /> <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">
Next Page