How to apply data-mini="true" to all the page?
... for resolution width 240 or less?
JQM 1.3b1 input causes fixed toolbars to break iOS 5.1.1
When bluring an input (typing something and then clicking away or "done" in the keyboard, fixed header and footer go to the top and bottom of the page, rather than coming back to a fixed position. This didn't happen in iOS before. It happened only in android. The problems appear to be in line 10610 where the show() method of the toolbars will only execute if self._visible, which is false (shouldn't it execute if the toolbar is invisible?)
Some additional features for the new panel widget
Hello I downloaded today the new beta Jqm 1.3.0 and tested the new features. The panel widget is a really interesting feature, so here are some feature requests for it ( I don't know it some of them might be already on the todolist): - An Option to set the width of the panel. Atm it's always 17em, but for some cases this is too/less wide - A display setting to show the panel and shrink the main content instead of slide a part of it out of the window. - Make it scroll on its own, so if the content
Change page links on the fly (jQuery Mobile)
Hello all, I am an absolute jQuery Mobile beginner. I have a multi-page with several internal pages. I understand how buttons and anchors on one page can point a a different page. However, in my situation when a user presses a button on, say, page1 I want to dynamically decide if he should go to page2, page3 or page4, based on whatever other input the user has provided on page1. How can I achieve this? Cheers, Silvio
JQM hide "Back button"
Hi, I show "back button" with following code <div data-role="page" id="itemDetailPage" data-add-back-btn="true" data-back-btn-text="Back" data-back-btn-theme="b"> ... </page> but I need hide the button in some condition. May I use code to hide the button. Please give me a idea. Thanks for your help Mark
Understanding JavaScript and Page Transitions
Hi, I have been scratching my head for while trying to figure out how to get my pages to call the JavaScript initialisation just once and not repeatedly throughout the page transitions as pages are loaded and reloaded. Initially I tried adding script section to my div data-role="content" section. Then I tried adding it to a section below and outside the div data-role="page" section. Then I tried adding to an external JS file. I'm tempted to remove the Ajax page loading, as some people have suggested,
Cyrillic and search filter
Hi everybody! I have problem with cyrillic. For example, search filter for list view doesn't work for cyrillic on webkit-brauser under Android. And keyboard-events doesn't work for cyrillic :( How we can solve this problem? UPD: This phenomenon show itself under Android 2.3.5. For Android 4 all is ok.
Prevent reloading page in DOM on changePage...
Hi, I am making a web application using jQuery Mobile. There is a two steps login process. Both steps are on a different pages. If information provided on both the steps are valid then only he will be redirected to other site pages else he will be redirected to first page and error message is displayed. The issue is when user transits from second page to first page, div with data-role="page" is loaded twice in DOM but not the page level Javascript. The Javascript file is included in the same div
Structure of Jquery mobile
Hi i am new to Jquery Mobile and need to code for creation of a particular app due to which i need to know about how to go about it, i have gone through the design and theming part and have successfully completed the design.Just started coding: <script type="text/javascript> $(document).bind("mobileinit", function () { $.mobile.autoInitializePage = false; $.mobile.defaultPageTransition = "fade"; $.mobile.loadingMessage = "Please wait"; } ); </script>
Dynamic data in listview injection problem.
Hi guys, I've coded a Jquery Mobile application with a list view widget. Everytime i trigger the "create"-Event on each list view item or call the .listview("refresh") function i get the following error: Error in Mozilla Firefox (Mozilla/5.0 (Windows NT 6.1; WOW64; rv:18.0) Gecko/20100101 Firefox/18.0): TypeError: c[0] is undefined ..."ui-collapsible-collapsed",k),i.toggleClass("ui-collapsible-content-collapsed",k... jquery....min.js (Line 2) Error in Google Chrome: (Chrome/24.0.1312.52):
Inset lists with text
Hi all, I have some text alignment problem with inset lists. Here is my example: <ul data-role="listview" data-inset="true"> <li data-role="fieldcontain"> <label for="name">Text Input:</label> <input type="text" name="name" id="name" value="" /> </li> <li data-role="fieldcontain"> <label>Text to read:</label> This is bad aligned text </li> </ul>The string "This is bad aligned text" will not be placed aligned
ipad ios 6 post https problem
Hello, i'm a novice, i made a form with jquery mobile, login form. I use method POST and action over external domain in https (WLC Cisco vpn appliance). I notice that the action on submit button don't goes well. Nothing uppen. Form Example: <form name="loginForm" action="https://www.example.com" method ="POST" data-ajax="false"> ... .... <input data-theme="b" data-icon="arrow-r" data-iconpos="left" value="Accedi" type="button" name="Submit" onclick="submitAction();"/> </form> The action stop at
jqm page to ipa
Does a jqm page require any preparation for xcode or is it ready to turn into .ipa? Is such a procedure described anywhere? Google can't seem to find it.
Jquery mobile stypes are incompatible with jquery ui styles
At moment it is almost impossible to mix jquery ui widgets with jquery mobile widgets since the two styles have a lot of overlapping. Mainly in the icon area names collide, so also if one doesnt enhance with jquery mobile a part of the DOM, the name collisions of the css classes makes impossible the use of jquery ui widgets. Is there a plan to make the two styles converge in some common framework in the future ??? I f not I dont see any reason for the name collision, so it would be nice to give
Fixed Footer Scrolling, half the time!
Hi There, I hope someone can help with this as i am strugling to see why it will not work and have a mad deadline. Basically i have a fixed footer on many pages within a basic Jquery Mobile Web page. See below: <div data-id="mainFooter" data-hide-during-focus="" data--tap-toggle="false" class="mainFooter" data-role="footer" data-position="fixed" > <a href='#mainPage' class='backBtn' data-mini="true" data-role="button" data-direction="reverse" >Menu</a> <p class='logoSpace'>Logo</p>
About multi touch, it´s possible??
I need to know if possible implement the multi touch with 2 fingers to zoom in on an image or map? thank you in advance
Poll: Where did you get the idea to use a multi-page document?
I am of the opinion that multi-page documents should almost never be used in jQuery Mobile. Yet, multi-page documents, and ways to "fix" multi-page document linkage to other pages seems to be an ongoing issue with a high level of activity on this forum. I'd like to keep any discussion of "why" separate. If you are curious, you can find plenty of discussion on that topic elsewhere in this forum. I am curious, though, as to exactly why so many developers seem to be using multi-page documents. It's
Get Directions in jQuery Mobile
I put your Get Directions http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html#directions_map to your mobile site. In the source code I put in my required geolocation: var mapCenter = new google.maps.LatLng(59.324419,18.101271); Then I tried to insert a marker of Google with this code: https://developers.google.com/maps/documentation/javascript/overlays#MarkerAnimations My general code: <!DOCTYPE html> <html> <head> <title>Get Directions</title> <meta
Jquery Mobile Chart Not Working
Dear All, I m having a simple JqueryMobile Application with a simple html helper chart. first time it will not show and if i refresh it will come or if i remove @Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile") also the chart will show correctly ..could any one can help me // Controller public ActionResult MyChart() { var bytes = new Chart(width: 400, height: 200) .AddSeries( chartType: "bar", xValue: new[] { "Math",
Baic login form Jquery mobile
Hi there. Must say what an excellent tool jquery mobile is! This is my first time using jquery and all i have ever done before is HTML and css pages. Basically for a prototype im developing i need to make sure only registered users can view any of the pages. Problem is i have no idea what im doing at all. What is the easiest method? Do i need to create a DB with some usernames and passwords? I do not want people to register. It does not need to be secure its just a prototype. what is the best method
ListView.click low performance
Stack: jQuery Mobile 1.2 with JQuery 1.8.2 I Read a lot of post about ListView performance and I applied proposed solution but I still having problems. The problem: I draw a simple ListView and I subscribe the click event but when I test it in my Xperia U (Android Phone) the event is triggered 2 second more late. It very low performance. The Code <div data-role="content"> <ul data-role="listview" id="serviciosLV" name="serviciosLV" data-inset="true" data-filter="true"> <li> <a href='#'>Item 1</a>
how to use bubbles with jquery mobile?
hi everybody, i'm beginner with jquery mobile and i need to implement an application of reclamation so i need to use bubbles, i would like to khnow if it's possible with the library jquery mobile or i need to integrate other component. best regards.
Fixed toolbar page on Android 4.0.3
Please tell me how to resolve those 2 problems. Those problems has happend on Android 4.0.3 native browser. And fixed toolbar page cause those problems. In short, if page container includes [<div data-role="header" data-position="fixed"></div>], those 2 problems happen. 1. navigation to fixed toolbar page navigation to fixed toolbar page cause twice white flash (onece white flash is expected). current page → white flash → current page → white flash → fixed toolbar page 2. pinch out
Some button icons do not show up
I'm using jQuery mobile locally (not from CDN) and everything worked fine until now. I want to change the icons of some buttons as described here, but some icons (e.g. bars and edit) do not work. Edit: Tried the CDN files, which doesn't work either. If I use for example this code: <div data-role="content"> <a href="index.html" data-role="button" data-icon="edit">My button</a> </div> The button gets rendered with a plus icon. The strange thing is that some icons (like plus, arrow-u, arrow-d,
how to make jquery look the same in ie and chrome?
Philosophical relativism aside, I do not like the look of JQm in IE. Has anyone come up with extra lines for IE to make JQm resemble the more civilized outfit of Chrome or Firefox?
Controlling the Error Loading Page message box
I want to validate whether the approach I am taking with error messages is crazy, or if it's within reason. My understanding of jquery mobiles page error handling is the following: jQueryMobile has a default way of notifying the user that a pageload failed. By default it comes up with "Error Loading Page". The following are the only interactions a developer using jQueryMobile has with these errors. 1) Changing the text/theme in mobile init $(document).on('mobileinit', function () { $.extend($.mobile,
how to implement swipe in case of persistent headers in navbar?
Hi , in my Android JQM app , i have a tabbed layout of 5 tabs in navbar .Each tab is like a persistent header.The Following is code for 2nd tab. Now how can i implement swiping across multiple tabs? <div data-role="header" data-position="fixed" data-id="headernav"> <h1>Header1</h1> <a href="index.html" class="ui-btn-left" data-icon="home">Home</a> <div data-role="navbar"> <ul> <li> <a
Align text with variable
I'm having a problem getting defined text on the same line as a dynamically updated variable. I get this... Temp: 57.7 F when I want... Temp: 57.7 F The variable is updated with AJAX and I put it in between div tags. I figured out how to put two div tags together with float, but I can't seem to figure this one out. This is my code... <div class="ui-block-a" style="float: left; text-align: left;">Temp: </div> <div id="temp1" class="ui-block-a" style="float: left; text-align: left;"></div> What
[solved] how to widen toggleswitch slider ...
... to make it contain more words? Now longer strings of words show only their central parts through a narrow hole.
JQM 1.2.1/1.3
Hi there, when will the next (patch) release be published? I found this roadmap according to which 1.3 should have been published last year already, but I don't know how reliable it is. I'm especially interested in the fix of issue: https://github.com/jquery/jquery-mobile/issues/3748 Greets monkey
Working with JQueryMobile and high resolution tablet displays (Nexus 10)
Hi, I am developing a PhoneGap based application using jQueryMobile which will run on Nexus10 (display resolution is 2560x1600 300ppi) and basically every jQuery elements like buttons, dialog / pop-up buttons are really small. All jmobilequery scripts are installed locally in assets directory since device will be used in off-line mode. Please advice what can be done in order to enlarge the controls. Thanks
MoveHandler Test in iOS 5.1.1 safari failed
Now I'm testing jQuery Mobile by QUnit Test Suits. I tested by Android 4.0.3 native browser, iOS safari browser, Windows IE. In one test, only iOS safari failed. The test is : http://hamadroid.info/jQueryMobileTest/tests/unit/event/index.html The "move handler returns when touchstart has been fired since touchstop" test failed only in iOS safari. Please teach me why this test is failed.
How to: Apply fixes made in commit? Help
Hello, I have an issue with the Android platform regarding fixed headers and popups and I know there is a fix in a commit made. However , I do not know how to apply this fix to my version. And I'm using the packaged version , not the live build. Can anyone enlighten me? Thanks
Transaction Code not work
Hi i am sending a code. on that code i use data-transaction="slide". when i run it on desktop it run but when i try to run it into mobile it does not run. plz fix my problem. this code is written in php. <!DOCTYPE html> <html> <head> <title>Home</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script
jQuery Mobile doesn't seem to raise focus event for radio buttons
I am trying to show some help text for some form inputs when a user focuses on them on a tablet. I am using jQuery Mobile to render the controls. My problem is that jQuery Mobile does not seem to raise the focus event for radio buttons, or checkboxes as well for that matter. The documentation suggests that this should work: http://jquerymobile.com/test/docs/forms/radiobuttons/events.html Example code: <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"
JQueryMobile Listview border bottom and border top
I am working on JqueryMobile listview, before this i has problem with there is a slight gap which is causing the border bottom and border top to appear as a 2px width border instead of 1px. I manage to fix it with margin-bottom: -1px !important;my goal is to make it as dotted line between the border bottom and border top. Thanks my html code <div data-role="fieldcontain"> <ul data-theme="f" data-role="listview" data-inset="false" id="listview"></ul> </div>my css .ui-btn-up-f { border: 1px solid #bbb
Has anyone tried out Davinci?
I recently came across a new HTML5 dev tool called "Davinci" used for mobile apps... from what I've gotten, it is something similar to Sencha, but includes a jQuery framework. Is this worth trying out? Any opinions?
JQueryMobile+Phonegap+Android GUI Bug: When changing page some of the components are misplaced
So my problem is sometimes, when I transition through my pages the whole page is not in the proper place. Additionally, when the user clicks anywhere in the screen that is blank, the page will be back in the right place. From the attach pic, you'll see that the header (red highlighted box) and the body is out of place. the correct place should be inside the yellow highlighted box. //Additional: The bug seems to occur more often in samsung galaxy note.
how to implement pinch to zoom in jquerymobile app runnign on android 4.0?
Hello, i am trying to implement pinch to zoom in an android app. Right now i just point to an image in content tag. <div data-role="content"> <!-- <img src="picture3.jpg" width="600" height="830"/>--> </div> Now how can i implement pinch to zoom on this image?Any suggestions?
Multipage document doesn't work. What am I missing?
Im about to pull the hair out of my head on this! I've stared at it now for hours and maybe I'm missing something simple here... it usually is... The 3 buttons on the first page, although linked correctly to each page (in my mind), will not work. I could really use another set of eyes to help me see what I'm missing or incorrectly coded. Any help would be MUCH appreciated. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,
Next Page