Page Loading Widget
Hi everybody, I am using the Loading Widget while fetching data from our server. As soon as the data is available I am going to insert them at the proper position. During the insert-process the spinner stops to work (the gif freezes) Is there any workaround as it doesn't look quite responsive when the animation freezes. It would be great if anybody of you could give me some advices. Regards -Fabian
How to open select in javascript?
Hi All, Is it possible to open <select> in javascript? I tried $("sel").click() but it won't work. Thanks!
A "wait ..." message
Hi; I am trying to show a "wait" messaje before doing $.post operations that can take several seconds. Before I tried to use the loading spinner, but always with same results: only BlackBerry browsers and desktop Firefox shows the spinner and/or my alternative wait message. All other phone and desktop browsers not (i.e. with Galaxy II, Galaxy III, iPhone5, and in desktop Chrome, and IE it does not work). What I do is to show a div in this way: $(document).bind("mobileinit", function(){
Managing browser stack/history
Is there a way to manually insert page history on the browser back/forward stack so the back button behaves how I want it to? Here is what I have: Home Screen (Top Level) -- Category A -- Category B -- Category C Category A page (Second Level) -- Item 1 -- Item 2 -- Item 3 -- Through 10 items (paging) Category B page (Second Level) -- Item 4 -- Item 5 -- Item 6 -- Through 10 items (paging) Item 1 page (Third Level) - Link to Item 2 ("Next" item) Item 2 page (Third Level) - Link to Item 1 ("Prev"
Getting data-prefetch to work like a multipage html does
I am taking the advice of the experts here and dividing my multipage html file into separate single page html files but......... I cannot get data-dom-cache and data-prefetch to work as a multipage does. For instance, one of my pages, the location page, has several input boxes that when clicked open a dialog box for the user to input data. In the multipage html this works perfectly, but after splitting the pages into single html's and pre-fetching the location page (and supposedly caching the DOM),
Issue with latest Chrome on Android - Zoom on button click
We have updated our Samsung Galaxy Tablet to the latest Chrome version for Android(27.0.1453.90). When you click a button anywhere on the screen it opens the current view in a zoomed popup. This was not happening before we updated the browser(though the old version was causing other issues). Has anyone else encountered this? We've logged a ticket with Google but I wanted to check here as well.
Easier way to get proper JQM styling and functionality to dynamically generated listview ( ul / li ) ? (Source : JS/JQuery)
Greetings.. and thank you for using your time reading my post... Setting up a listview in the markup is easy, and looks like it should when applying the correct data-roles and styles to it... But.. populating (databinding) a listview from javascript/jquery was more brutal than i thought it should have been... I wonder... am i doing something terribly wrong, when ending up with the code you can see below to create the jqm listview or is this the way to do it ? I hope.. the first :) var listString
Collapsible top margin - how to remove?
Hi, With the html below, I get a space between the page footer and the collapsible, about half a height of one collapsible item, how can I get rid of that space? If I replace collapsible with listview it start right after page footer and there's no space. Thanks! <div data-role="content"> <div data-role="collapsible-set" data-inset="false"> <div data-role="collapsible"> <h3>1</h3> </div> <div data-role="collapsible">
jQuery Mobile and iOS 7 Look & Feel
The style transition guide is posted, and it changes quite a bit. Is there a person or group working on a jQuery Mobile Theme to match the iOS 7 look/feel? From what I've seen, it has a number of changes in buttons and icons, but not a complete upheaval of everything. Full new set of default icons UIFont.preferredFontForTextStyle to drive dynamic font sizing (Dynamic Type) - may be hard to get access to this property without a Cordova-style hook. Blurred under-window transparencies may be hard with
Responsive search box in the header
Hello! Just started to use jQuery mobile to build a new mobile app. I saw the jQuery mobile demo (http://view.jquerymobile.com/1.3.1/dist/demos/) and really loved the search box in the header. Especially when you watch it on a mobile screen. Then the input form change to a search icon, and the search form will open/hiden below the header. Does anyone now how to build this? Can't find the code in the demo. Thanks for the support!
jQuery load external files into popup dynamically
Hi everyone, i've got a problem by loading an external html code from a file by load(...) or $.ajax(...) or XMLHttpRequest(...). The loading of the files works exactly 2 times and then it aborts by 404. So i tried the xhr.abort() command but unsuccessfully too. If i use a full URL like www.domain.tld/abc.html it works great. But i need this for a WebApp in Apache Cordova. Here comes my Test-Code: HTML: <script src="jquery-1.9.1.js"></script> <script src="jquery.mobile-1.3.1.js"></script>
header image button with jQueryMobile
As would have to do to create a button in the header with an image only, because if I put an icon without text looks pequello. Help please
select menu
Hi All, I have this code (below) that works well but i am having some issues with a select menu. When you select an item from the list, it adds some text to the search bar and filters the results of my listview. That works well. but when you select an option, the highlighted state doesnt change, it keeps the first option that you choose, and will never change, however, it does know what you have selected as the filtering still works, but gives the user no visual appearance to what they have choose.
$.mobile.changePage("#pageId") taking longer time to load.
Hi, I have a link with the event "touchstart", which functionality is to move to another page, as below code: $.mobile.changePage("#pageId"); I understand loading page takes time if data is high. But, I wish to navigate on next page as soon as the "touchstart" event is fired. Currently, when we touch the link it waits for few seconds and internally loading the page then navigates to next page, which leads user to confuse whether the button has been clicked or not. so, basically my requirement is
touchstart responds after a few seconds delay
Hi All, We are developing an application for iPad which uses phonegap and jquery mobile. Everything is running fine. But, I have a link which loads the internal page on "touchstart". Whenever I touch it fires the event after few seconds of delay say like 3-4 seconds. This happens only first time. Once page is loaded and again I navigate back and click that link ("touchstart") it fires quickly. can anyone suggest!!!
Multiple-page html versus several single page html files
I have an application that uses four different pages. On one is a map on which the user can add markers when these markers are added the coordinates are written to a second page. The user can add other parameters to a third page and the results of calculations using the coordinates and parameters are displayed on a fourth page. Using a multiple page layout makes this simple as all of the input boxes, selection boxes etc are available in the DOM. I have read that using single page html files for
checkboxradio is not a function
I am using jquery 1.9.1, jquery mobile 1.3.1 (js & css) in my web app. When i call checkboxradio to uncheck all the check boxes, its throwing the exception "checkboxradio is not a function" $("input[type='checkbox']").attr("checked",false).checkboxradio("refresh"); When i try the same as a sample app, it works. The problem is : the function inside jquery mobile 1.3.1.js file is not getting called. I do see the jquery mobile 1.3.1.js in the scripts loaded in firebug. Please advise on how to find
How to call Javascript in external dialog file
Is it possible to execute javascript on a linked dialog where the dialog is defined in a seperate external file? I need to do javascript validation on my dialog and I cannot get any Javascript to fire when I launch the dialog from an external file. However, if I put the dialog definition in the same HTML as the page with the dialog launching link (that is a multi page HTML) the javascript works fine. I would like to have my dialog code in seperate files to decompose the multi-page HTML page
rectangular button header
How I can make the header button is rectangular rather than oval?
backbone-require example issue
How do you go about changing the jsonArray inside the CategoriesCollection.js file in backbone-require example to a REST web service request? Can't get it work. https://github.com/jquery/jquery-mobile/blob/master/demos/examples/backbone-require/js/collections/CategoriesCollection.js
Timing and Loading multiple JQM URL Pages
I’m having a timing issue related to using JQM and Parse.com backend database. I’ve read up on JQM timing docs and I’m still confused. Could really use some help from someone who can point me in the right direction. OK. So, I have two separate JQM pages: www.site.com/index www.site.com/page2. The user enters the Parse.com record identifier on the first page (index), and then presses a button which calls a function which goes out to parse.com and pulls in the data. So, on Parse.com/SUCCESS, the
automatic page refresh after a few seconds
hello, can anyone help me to find a way how to update my page automatically after a few seconds? I tried to use meta ... but strangely applying it to the main page makes me even upgrade to the other. thanks These are the examples I've tried: var a = setInterval window.setInterval (some, 2000), some function () {window.location.reload ();} --------- ---- and <meta http-equiv = "refresh" content = "10"> the following codes work but I also update the other pages on my site that does not have this code.
JQM + Highcharts
Is there a way to lock JQM pages in different orientations? For example I have a five page app. While the first four pages are designed to be shown in the portrait mode, the fifth page is a Highcharts plot that needs to be displayed in the horizontal orientation. I can't use css to rotate container as some of the Highcharts functionality ( tool tip) gets messed up by this. Is there a way to preset page orientation on the page-by-page bases? Thank you.
New to Jquery Mobile / Demo Problem
Hello, Im about to take the plunge into Mobile but I am having problems with the demo's. I cant get any of the demo's to work. Im using XP and Chrome My Chrome is current. Im viewing in incognito mode. My XP...not so much, but as current as it can be... Any thoughts? Thanx
Dynamic List not displayng JQM style, tried several fixes to no avail...
Hi, I have tried a ton of solutions and am in the hair pulling stage, if anyone can help it would be deeply appreciated... TIA. :) I am attempting to display the contents of a JSON array in my HTML with proper styling in place. Here is the JSON array I am loading: http://highendwholesale.com/json.php Here is the result I get when using the code below, as you can see it loads fine but without styling -- if anyone can help me get this working I would be grateful: http://highendwholesale.com/test.php
New android application launched
Hi All, Thanks everyone for their support. I have finally launched by first android application based on jquery mobile. This is a small brain puzzle type of game, where you have to guess the number based on series of feedback and inputs. You can view the listing here https://play.google.com/store/apps/details?id=com.bnumlock The UI is very simple as I wanted that look and feel. One thing I struggled with jquery mobile is some animation examples that will get you started for mobile platform. Also
How to bind a dialog link created dynamically?
Hi, If a have a route /user/:id that returns me a HTML and I create a dialog link, that calls it, like the following: ```js $('#content').append('<a href="/user/1" data-rel="dialog">Dynamic</a>'); ``` How can I bind it after the `mobileinit` already performed? There is something like?: ```js $('a').dialog(); ``` Thanks guys!
iPhone rotation shrinks page
When I go to this page and select the date, press done, then rotate the phone, the page is small and zoom is enabled. What am I doing wrong? <meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width, height=device-height"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" media="screen" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
Weird problem with page transition and ajax disabled
Hi, I have been stuck for a couple of days now with my new mobile web site. I have a page that is bigger that the screen so vertical scrolling is involved. I have ajax disabled using $.mobile.ajaxEnabled = false; because the next page has a different <header>, this works! What I notice is that the links work fine if I do NOT scroll or only scroll a little, once I scroll down by a around 30% of the screen height the hyper links work but do not take me to the page, it just goes white and hangs. At
Capture first text on first iteration
Hi Everyone; I'm using jquerymobile for a project on phonegap. I have a dinamic listview for(i = 0; i < qtty; i++){ html += "<li><a href='#listingresults' class='byCounties'>"+Counties[i].Name+", "+Counties[i].CityName+", "+Counties[i].Abbrevation+"</a></li>"; } $('#counties_ li').remove(); $('#counties_').append(html); $('#counties_').listview('refresh'); When I try to get the content of the link in the li using $(this).text(); the first time it always returns an empty string, but the next time
Custom data Icons not appearing in header...just get plus symbols
I'm working on this JQuery Mobile site using 1.3.1 and JQuery 1.9.1 and my issue is I have a couple of custom icons in the header. One for the logo and one for a Share symbol. Neither are showing up. Instead, I get the generic + symbol. I've done this before so I'm puzzled why I'm not seeing the custom data icon. Here's the code I'm using: <header data-role="header" data-position="fixed" data-id="appHeader"> <a href="#" data-role="button" data-iconpos="notext" data-icon="logo">Back</a>
pass data from listview to detail view in html app using jquery
i want to pass data from listview to detail view because i want to add button(add to cart) there..there is index page which i have include all the scripts. here is my code please do let me know where am i wrong product.js code $('#myPage').live('pageshow',function(event){ var id = getUrlVars()["cat_id"]; $.getJSON('http://siliconsoftwares.in/store/jsondesc.php?cat_id='+id, function(data) { //THIS IS NOT WORKING, IS THE SAME AS PUTTING id, not id_localidad $.each(data.items, function(i,
Responsive Web Design, Label and Input Text width intelligence
I work on an ERP web application. As an application designer I know which fields are tiny Y/N and which fields are long addresses, descriptions, urls, and which are in the middle. As an extension to Responsive Web Design I would like to impose some fixed width intelligence at the atomic level in the data-fieldcontain divs. Grouping a number of these data-fieldcontain divs in float panels to act as the floating grid supports that portion of RWD. But screen territory use can be optimized by applying
jquery how to hide <select> menu
<select id="wybierz1" style="display:none" > <option data-icon="arrow-u" data-iconpos="top" style="display:none" >- SELECT -</option > </select> the above display:none does not work. I have also tried "hidden", but to no avail. How to hide this select menu?
show the same layer and image using jQueryMobile on changePage when using ajax
it is possible to display the same image layer of filler used in ajax changePage when used to recharge a document part jQueryMobile.
jquery mobile popup - button not styling correctly with data-iconpos=“notext”, and other problems
I am making a mobile web app and am using jQuery Mobile. I have a navbar at the bottom and when you click the left button the popup shows correctly but the close button is not being styled correctly when i use data-iconpos="notext". Here is my code: <div data-theme="j" data-role="footer" data-position="fixed"> <div id="navbar" data-role="navbar" data-iconpos="bottom"> <ul> <li id="navbar-menu-button"> <a href="#navbar-popup-menu"
Scrollable div not returning scrollLeft() value on android until after a screen touch?
I have a simple div with the overflow set to auto, and a label that shows the scrollLeft() position of the div. it works on IOS, the number moves up and down as your scroll. On Android (tablet) though it fails to update the value of the scrollLeft() function until after an additional screen touch is recorded? Any Ideas? Thanks Look at this example at http://jsfiddle.net/yatescr/37Axm/1/ then try it from an android tablet, the position will not update until the screen is touched after you slide
idle time out not working when phone is locked
Hi Team, I have implemented Jquery plugin where in it redirects to a page based on the idle time out say 1 minute . It works fine when I dont lock the phone but when the phone is locked for 2 minutes while I open the application keep it on iphone chrome and lock it(assuming idle time out is 1 minute) .whne i unlock it it doesnot go to the redirect page unless i refresh the screen. is there a way to make sure that the page is redirected after we unlock and go back redirected page . All of my pages
IPhone 4 Slow Input Text Field
Has any one come across this error? When the user go to my website it takes them very slow to load, and when they try to click on the input text field, it take 15 for each character to load. This only happens on IPHONE4 and not 3 After turning on the phone debug mode this is error I got Error msg: JavaScript Error on Line 41 https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js TypeError: Result of expression 'A[0]' [underfined] is not an object
Space above and below a single checkbox
Hi, Im trying to put a <li> containing a checkbox element and label in amongst some other <li>'s that have some basic text. however i cant get rid of the space above and below here is the fiddle, hoping someone can help http://jsfiddle.net/UhcUq/2/
Next Page