jqm1.3 Panel ... dismissive behavior stops working after several 'page' changes
I have a panel. It works as expected. But I want the panel to be available on every 'page'. So I set up a system of moving the panel from 'page' to 'page' as I navigate through the jqm site: jQuery(document).on( 'pagebeforeshow' , function( argo_e , argo_data ) { jQuery('#my_panel' ).remove().appendTo( jQuery( argo_e.target ) ) ; jQuery('#my_panel' ).panel() ; //jQuery('#my_panel' ).panel().trigger( "updatelayout" ); } ;
Does jquerymobile 1.2.0 supports android 4.0.4?
I have created an android web application where i have a login form that will allow the user to check his mails stored as MySql database when i try to login using the user name and password the login screen will not change to the another php file that will be created from the local apache server but it will do and connect using another android version as 2.2.2 and 2.3.3 except 4.0.4.
Updating html of listviews on hidden pages, json navigation model
Hi Guys, My aim is to use jquery mobile for styling/enhancement and transitions but use my own ajax navigation methodology so that I can transmit/keep local JSON data rather than using HTML. I have all my pages in one document. I attach 'tap' events to elements and run ajax to get the JSON and then jQuery to inject html based on the data into listviews etc. My problem is that I can't seem to get a model that works the second time I load a page. I've tried $('#container').trigger('create'); after
Help with site being viewed on an IPAD...
www.msiatlanta.com Can someone please take a look at this JS file for our company website... it is a Wordpress install... The previous developer was working on the site and he is no longer with the company. I've been tasked with taking over the project and fixing the issue. The site when viewed on an IPAD doesn't view correctly. It is very small and either in the top left or centered. If viewed on a Tablet it appears fine. From what I've been told it was the opposite and he tweaked the code
Native select in panel on Firefox 19 + jquery mobile 1.3 unclickable
we've been working on a webapp in jquery mobile mostly developing testing on chrome. We're using the lastest version of jquery mobile and jquery. Most platforms have 0 issues, but when I try to select an option from a dropdown nested in a panel I can see the options, but clicking them makes no change. I can press enter to select the option however it also lights up the option I'm hovering it's just the click which doesn't seem to fire. I've also tried to set the opacity way higher (1 instead of 0.00001).
Table columntoggle and IE10 and Windows 8
I am using IE10 on Windows 8 Pro. On your demo site (http://jquerymobile.com/demos/1.3.0/docs/widgets/table-column-toggle/) when you click on the "Columns..." link and try to unselect any of the columns the browser locks up and you cannot select any other browser tabs (assuming you have any open) until you close the demo site tab. If you only have one tab open you will not be able to select the browser at all. ALT+Tab will not work to get you there. If you are using IE10 and Windows 8 RT and try
back-button not showing using recent jquery-mobile
Please consider this example: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Listviews - jQuery Mobile Demos</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
JQM Button rendering after dynamic page injection
I have some problems with the dynamic page injection if JQM. I replace the content and header and refresh the page. But the formatting of my Buttons is lost. Also the listview at the content area looks not well formatted. Do anybody know how to fix that. I tried it by $page.button(), but this will render my whole page as button. var $page = $(this.element); var content = $page.children(":jqmData(role=content)"); var header = $page.children(":jqmData(role=header)"); content.html(this.view); header.html(this.header);
back button doesn't work in iframe
Im making a mock up an image of a mobile phone with jquery mobile running in the image so you can tell what the site will look like on a mobile device. The site on the image is set in an iframe. The back button doesn't work. Is this normal for the back button not to work in an iframe?
get DOM other page
Hello people, I have a problem to display a dialog and try to get an element of another page already used. file1.html <div data-role="page" id="photo-click" class="page" style="background-color: #FFF"> ... <div data-role="content" data-iscroll class="iscroll-wrapper"> <div class="iscroll-scroller"> <img id="largeImage" src="images/imagem.jpg" class="image-photo" /> ... </div><!-- /content --> this is the structure of file.html, I spend an element via the id
PhoneGap target device density and Jquery Mobile style sizing
Hi, i've searched the web and the forums and answers given to similar questions don't do the trick. Using jQuery Mobile 1.3.0/jQuery 1.9.1 on Samsung Galaxy S2 and Nexus 7 tablet and developing with PhoneGap... Problem: UI elements are a 'bit' too small. (about half the size I would deem usable) Various posts i've read have lead me to use: <meta name="viewport" content=" initial-scale=1, user-scalable=no, width=device-width, target-densitydpi=device-dpi"> This makes the UI elements such as buttons
go to page without jquery
I am totally new to jquery and frankly find it so overwhelming I want to break reference to it for all but one page. One day I may try to learn it,,,but the curve seems...shallow, at least for me. I am using this method to create a drag-drop sortable list for a game I developed for friends - so I do NEED jquery for that page: http://forresst.github.com/2012/06/22/Make-a-list-jQuery-Mobile-sortable-by-drag-and-drop/ which uses: <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css"
Doubt in JQM 1.3 Table Column Toggle
Hi, In Table toggle, data-priority is a nice feature. Although not for comparison, a bit outside, I feel "Tables in Grid mode" if I may say so. (One common limitation you have advised is 5 column in both cases). As I have few more extra columns...Here is my need and I am not sure how to go about it. By default want a column in hide mode (unchecked in toggle) instead going through toggle. Toggle should have this unchecked by default. If I may have something like data-priority-check="false" attribute
uncheck checkbox on click
the idee is When the collapsible groups close all the checkboxes must be unchecked. <div data-role="collapsible"> <h2 role="title"> Na Toren 1</h2> <fieldset data-role="controlgroup" data-inset="true"> <input type="checkbox" name="checkbox-13" id="13" class="custom" /> <label for="13" style="color:#F7AC0A"> T 13 <br/> S 106 </label> <input type="checkbox" name="checkbox-23" id="23" class="custom"
some links stuck on loading spinner while others work perfectly
I'm using Simple HTML DOM Parser inside jQuery Mobile. I'm pulling links from a website, then passing them to another page for article parsing. Some links get passed fine and it works perfectly while a couple get stuck on the loading spinner with no error message. Same problem with all browsers. If I take out jQuery Mobile, every link gets passed and next pages get opened. The strange this is if I add rel="external" to the first php, then the page which didn't open before, it opens. When I
auto complete clarification
Hi, I am using - jqm1.3, my scenario is this I am able to construct and display the search listview via ajax / GET attached to a text search input item '<li data-theme="c" data-iconpos="notext"><a class="myfind" data-ajax="false" href="#" id="'+res[i]+'">'+names[i]+'</a></li>' // names is json return I am struck at these following 2 issues, a) to populate in text item after I click on the listitem and listview hides , b) or when data-clear-btn="true" I tried this but no help $('li .myfind a').on('click',
How do i load and execute JQM CSS and JS before the page has finished loading?
Hi I'm trying to use JQM, but it's not working as I want to. The nature of the service I'm using JQM for is so that it keeps adding code to the page depending on which events are triggered by the service, keeping the "connection" open for several minutes. I can see that the complete HTML file is loaded,but the problem seems to be that the JQM CSS and JS files are not loaded/executed before after the page has completely finished "loading". Here is how it looks: While loading: http://screencast.com/t/wxVjYJxnvjH
can't get 1.3 to work in this hello world code. alert("jquery 1.3 not working"); is not executed.
<!DOCTYPE html> <html> <head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> </head> <body> <script> $(document).ready(function() { alert("this showed up");
second page won't display, comes up blank all the time
I upgraded my Android application from cordova-1.6.1 to cordova-2.5.0. Also, I upgraded from jquery.mobile-1.1.0 to jquery.mobile-1.3.0.js. I'm runing my application on Android 2.3.3. The first page, index.html is a splash screen, which after 3 seconds goes to a page login.html. The first page, splash page, displays correct but the second page comes up blank, even if I link to another page off the first page. This all worked before my upgrade(s). I went one step further and copied all of my login.html
Phonegap ajax call with username/password not working
Hi guys, We're writing an android app with Phonegap and jquery mobile (1.0a4). To give a little background we have a login page that sends the username/password to our server, the server responds success or failure. If success we store the username/password in localStorage and reuse those credentials for every successive request. I'm having difficulty with the ajax call when I add username: window.localStorage.getItem("usr"), password: window.localStorage.getItem("pwd"),the ajax call seems to fail
Problems styling (rangeslider, radio-group)
Hi I Have some problem styling some elements on a mobile app using jqm 1.3 (same problems in 1.2) The problem seems to be in the html "wrapping" the div holding the widgets. When i test the same html code on a empty page the styling is correct.. the styling errors are. 1 the slider does style but the "value field" is displayed as a slider.. (i.e. two slider.. ) using $( ".selector" ).slider(); (using correct selector...) the second slider disappears, but there is no value visible.. 2. The radio
SELECT html element using default style.
I would like to know how to 'initialize' JM, but have it not 're-css' a specific SELECT element I have, but to leave it alone. As this select element is part of another framwork and wish for it to stay the same. When JM applies its theme, its too big. Now ofcourse there are other selects that JM can re-theme as they are part of the normal interface inputs. Id like to set my select class to something like class="leave-as-default"
button CANCEL in popup
Hello, I have a popup that contain 2 buttons on of them is for closing this popup ! how can I modify my code to get what I want ? <a href="#popupLogin" data-rel="popup" data-position-to="window" data-role="button" data-icon="check" data-theme="b" data-transition="pop" >Envoyer</a> <div data-role="popup" id="popupMenu" data-theme="c"> <div data-role="popup" id="popupLogin" data-theme="b" class="ui-corner-all"> <div style="padding:10px 20px;"> <h3>Pour confirmer
How to change the return key label.
Hi, When a user types into a text input box my iPad enter key currently says "GO". I would like to say "DONE". How can I achieve this with jQuery Mobile? Many many thanks, Steelow
header bar
Hello, In the header bar of my home page, I must have a button (cancel) and next to it a label (Home). I tried to do it, but they are displayed in 2 lines ( CANCEL in a line and HOME in another ) my code : <div class="ui-bar ui-bar-b"> <input type="button" value="Cancel" onclick="window.close()"/> <h1> Acceuil</h1> </div> and in the Header of the page I put this : <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>My Page</title> <meta name="viewport" content="width=device-width,
Selected Drop down text disappears in MVC4 application after validation
I am using jquery mobile for ASP.NET MVC4 application. Validations are performed using jquery validate and unobtrusive js. During client side validation the selected value displayed in the drop down disappears. Following is the html the class="input-validation-error" style="display: none; " is applied to the span that displays text on the drop down, this is not correct. Attached screen shot for reference. <div data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="arrow-d"
specific id replaced by [this.id]
... while entangled in a complex formula var droplist = Math.floor(Math.random() * $('#youridsir1 option').length); This line repeats severeal times with id varying by the last digit. I would like to make this code more uniform, before an attempt to create a loop. how to replace #youridsir1 with something like [this.id] ?
External url content loading problem when using mobile.loadPage
Hi, I'm trying to load an external url content to a div.When I use the Js code block below, the url content is displayed successfully. But divHeader is not visible because mobile.loadpage creates a new div under divContent, sets the url content to this div and newly created div's style is ui-page. When the style is ui-page it surrounds the whole page so divHeader isn't displayed properly. When i delete the class value "ui-page" from newly created div at runtime everything is fine.I couldn't change
iframe breaking page scrolling with jquery mobile
I'm have a weird issue here. I have a piece of the jquery mobile events code running on my mobile site. Everything works fine, but when my page is completely still and i put my finger on an iframe and try to move the page nothing happens. I have gone into the events that are being created by jquery mobile code (tap and swipeleft/right) and the event is never reaching any of the code there while touching the iframe. I have tried to put the whole jquery library in just to make sure I wasn't doing anything
javascript not firing following AJAX page transition
This is getting a bit frustrating. I've seen quite a few answers regarding pageinit, pagebefore, etc, but I am not having any luck. I am developing a little web game, that requires a user_id and which displays many unique variables on each page. As such, getting javascript to work (all the time) is vital to a smooth user experience. Due to the dynamic set up, I have a 'main' template which sets up the page and loads content into it through codeigniter (php). <!DOCTYPE html> <html> <?php
Listview highlighting issue on Android (.ui-btn-hover-c)
I have found a problem with listviews on Android devices where the hover style of a listview item can stay on permanently, even after releasing my finger from the screen. This problem does not existing on iOS devices but I can easily reproduce this issue on my Android 4.03 and Android 4.1.1 phones. To reproduce the issue test with a listview that is inset and has enough list items to scroll. If you flick around the list eventually one will stay permanently highlighted. Try selecting the item near
jqm 130 Panel URGENT
Hi, I need to implement a left-sided-menu in my app for tablet version. I tried to use Panel. I added into each HTML file a <div data-role="panel" id="panelDiv"></div> at the top of the page. I made panelMenu.html with a ul li. In js file in section for HTML page I put $('#panelDiv').load('panelMenu.html'); on that SomePage.html I got nothing..if I exclude data-role="panel", the 'panelMenu.html' loads but it looks like it is missing css and links to other pages does not work. Basically, it loads
JqM 1.3.0 problem with local files
I'm creating some webapp using jqm but when I try to make a cleaner directories layout using html files inside different folders I got problems. I try to be more specific. I want to use my file in local, people download the zipfile then use it in local. I already do it but I want to create a multilanguage webapp so I create EN and IT folders I put inside their respective files and on desktop PC it works like a charm but when I test it on my Acer tablet Android based no browser find the files inside
Problem with a large select-menu when using ajax call on change event using jQuery Mobile 1.3
I'm using jQuery Mobile 1.3, with a theme made using themeroller. I have a large select-menu with the option data-native-menu="false" (When i mean large i'm talking about 30 items), i have bind this on Change event: $('#select').on("change", function (event) { $SectorPropiedad = $('#select').val(); if (_filterRefresh) { cargarDatosInmuebles($SectorPropiedad); } }); inside "cargarDatosInmuebles" function i make an ajax Call.
How to select an image from mobile device and set it as the background image, using jquery mobile ?
How to select an image from mobile device and set it as the background image, using jquery mobile? I need to select an image from mobile device and set it as the background image of mobile application page.And need to save the image path in sqlite db. Can you help me? Thanks in advance.
problem using Scrollview.js
I'am using Scrollview.js for implementing the scrolling (https://github.com/jquery/jquery-mobile/tree/1.1-stable/experiments/scrollview /http://jquerymobile.com/demos/1.0a3/experiments/scrollview/ ) Since here Mouse events are disabled i'am having problems when used on Surface Tab ( A Mouse can be connect to a Surface Tab ) . On the Surface Tab i cannot click on say a Text box control so that it can have focus and so that i can type some data in it The same implementation work fine on IPad (Have
ColumnToggle inspired on a personal plugin without credits!
Hi to all, i'm a very happy jQuery Mobile developer and i'm very exited on 1.3 but I found that ColumnToggle widget is identical to a jquery plugin I released a year ago! It was Jan 19th 2012 when I wrote an article (italian) and a plugin who implement a responsive table design solution initially proposed by Filament group: Blog Article: (italian) http://www.consulenza-web.com/2012/01/mediatable-jquery-plugin/ Plugin Demo: (english) http://consulenza-web.com/jquery/MediaTable/ GitHub Repo: https://github.com/thepeg/MediaTable
jQuery mobile
hello everyone, I just use the jQuery Mobile and I develop on blackberry os 7. My html works with jQuery but didn't with ripple emulator...! The question is, jQuery Mobile works on Ripple emulator ? thank u :)
How to remove the active class of button on iOS
Hi, I am using JqueryMobile-1.3.0 and cordova-2.1.0 for iOS app. When I click on button then its color gets changed,but I want to make it normal after the onclick event get completed,I tried using $('#clearButton').removeClass('ui-btn-active'); but its not working.
Multipage document loading everything on first page. CSS issue?
Hello, I have a multipage document with slide transitions between the start page and each sub page id. However when I added a table with a custom CSS class and attributes inside the "data-role="content" div, it automatically loads on the first page, on top of everything else. If I remove the custom css table class, this problem goes away. How do I create a custom css class that will hide the table until the user has navigated to the appropriate page? Or can i wrap the table in another class I have
Next Page