How to use cache.manifest to cache the image files used in JQM
Hi. I have extended my web mobile app to use cache.manifest. All my js files are located in one dir. and all my images are located in another dir. I have no problem with caching all the js files and all my own images, but I'm not able to cache the images that are used by JQM :-( Anyone knows how to do this? I'm thinking of the icons and the ajax-loader image. Here is my page: http://www.gosushi.dk/Mobile/default3.aspx Hope someone can help me. Kindly regards Ruffio
problem with long listview page slide change and another problem with Dynamically injecting collapsible list
please confirm this url with iphone4 or 4S to recur these 2 problems. problem 1: when the listview has a lot of items(long page), clicking the first item to change to the next page with slide transition is ok, but clicking the last item to change to the next page with slide transition is NG(DOESN'T have slide effect!). problem 2: click the second item to change to the next page, we Dynamically inject collapsible list to the next page. the first time when you click the second item' link to go to
set focus to textfield is not working in jquery mobile
Set focus to textfield is not working in jquery mobile. When the close the alert box it should focus to the text field but it is not getting focused. $("#nyTxn1").live("vmouseup", function(event, ui) { $('#nderNum').focus(); });
iOS 6 problem?
I just updated to iOS 6 from 5.1 and tested my web site (built with jqm). The main page displays fine. If I enter a value into a value into a text box and press my SEARCH button, I get my Ajax spinner and then the new page displays only the word "undefined" at the top. Anyone else see anything like this yet? EDIT: It appears to be all pages that respond to form input (I am trapping the onsubmit and validating the fields)
Hover button arrow
Hi all, m.ideebv.com has a menu generated with wayfinder. You see that the menutext is white when hovered. But the black arrow on the right side disappears. I made a white version of this and I tried a several things to make a hover for the arrow too. In jquery.mobile-1.0min.css I add the following line: .ui-icon,.ui-icon-searchfield:hover:after{background-image:url(images/icons-18-white.png);background-repeat:no-repeat;} or .ui-icon,.ui-icon-searchfield:hover{background-image:url(images/icons-18-white.png);background-repeat:no-repeat;}
CSS problem
Hi, I'm having a problem changing page elements with JS. I'm trying to change my main page footer and header by using document.getElementById("mainheader").innerHTML = header ; the element changes but the CSS doesn't. what am i doing wrong? is there a way to refresh the CSS design? thank you, Guy
Localhost CSS doesnt work well
Hallo, I have just started Jquery Mobile and am really impressed by it. Now I have a question regarding one of the files that the mobile web app connects online i.e jquery.mobile-1.1.1.min.css. If I put this link in the header section(<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> ) When I preview the app it shows the right arrow for all items in my list. But when I interchange the above link with my downloaded css such as <link rel="stylesheet"
link to external pages so i can still use transitions
I have a lot of seperate html pages in different folders and I want to know the best way to link to these external pages so i can still use transitions In my index.html page I have am using this script below to load them into the dom which seems to work ok but I was wondering if this was remotely correct or there was a better way to do this. <script> $.mobile.loadPage( "River/index.html" ); $.mobile.loadPage( "Heritage/index.html" ); $.mobile.loadPage( "Nature/index.html"
Generating Dynamic table in jQuery, and on each dynamic row create another dynamic table
Dear Reader, This is what I am trying. I will be calling a RESTful web service, and the response will be in jSON. I will be parsing this jSON object to get the key value pairs which will be divided to display in a tabular format like Key Value Key Value Key Value Till this I am clear on how to do this. Now how to display this dynamic data in a table using jQuery. I also need to display another table whenever row in a dynamic table is clicked. Here is how it will work. 1. call webservice 2. get data
Button event speed
The event used to handle normal transition button taps in jQuery Mobile seems slow to me in Mobile Safari. It looks like jQuery Mobile is just using the default 'click' event, which has a big delay built in on iOS. I'm talking about buttons like this: <a href="#nextpage" data-role="button" class="imabutton">Next Page</a> If I set href="#" and bind the 'tap' event instead, it seems much faster: $('.imabutton').bind('tap', function() { window.location = "#nextpage"; }); This seems kind of sketchy
navbar height of 0
Just upgraded from 1.2 alpha to 1.2 rc1. The grid now has a height of 0 (also navbar and header). The blocks have a height of 33. <header class="ui-header ui-bar-a" data-theme="a" data-role="header" role="banner"> <div class="ui-navbar ui-mini" data-role="navbar" role="navigation"> <ul class="ui-grid-b"> <li class="ui-block-a"> <a id="divViewBtn" class="ui-btn ui-btn-inline ui-btn-active ui-btn-up-a" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="a" data-inline="true">
How Can I Achieve Instananeous Touchstart on iOS?
Can you point me to an example or demo of an immediate, instantaneous page change in a jQuery Mobile app? I want to be able to tap a link in jQuery Mobile and immediately show the next page. I know this is possible in iOS because: 1. Lightning Touch is able to do it without jQuery. 2. JoApp immediately begins to transition on touch end. The issue isn't the transition speed or length. The issue isn't necessarily relating to the taphold 300ms delay - but may be in part. I suspect in part that the issue
I can't get the back button on header
Hi everyone, I tried lots of times but I can't get the back button on the page's header. Can someone help me how to get it?
Embedding Google Calendar into Mobile Site
Example: http://m.troop101.net/calendar.asp When I view this in Chrome on my PC, I don't have a problem, but when I view it on my Droid I notice clicking an event scrolls the Agenda list. Is there a way to prevent this? Thanks!
How to use both media query and jqm on the same site
I use media query to handle the css for desktop and mobile version responsively. <link rel="stylesheet" media="all and (min-width: 800px)" href="desktop.min.css" /> <link rel="stylesheet" media="all and (max-width: 799px)" href="mobile.css" /> How do I load jquery mobile file ONLY in mobile device? Now I load it using javascript: if ($(window).width() < 800) { $.getScript("http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"); } The problem is with this some android device
How do you close or preset a Dialog popup programmically when left open.
How do you close or preset a Dialog popup programmically when left open. I have a condition when a user selects a link in my dialog box that takes them off-site to another website, this leaves my Popup dialog still open and even when i re-enter the mobile website the dialog is still active. How can I make sure the dialog is closed and not cached and active until a user selects it. I also have this condition with collapsable. how do i make sure they are closed and not cached if the user just leaves
Iframe not scrollable for android devices versions lesser than 2.4
I am trying this code in android device. <div id="olayer_div" style="height: 480px; opacity: 0.9; background: url("black.jpeg") repeat scroll 0% 0% rgb(15, 255, 255);"> </div> <div id="i_id" style="position: absolute; top: 15px; left: 15px; z-index: 99999; width: 290px; display: block; height: 270px; opacity: 1;"> <img id="cl_id" src="images1.jpg" alt="X" style="left: 5px; top: -8px; position: relative; float: right; cursor: pointer; z-index: 999999;"> <iframe id="i_iframe" width="290px"
JQueryMobile 1.2 rc-1
Hi all, I am new on the forums, and I am not sure if this is the places for asking this thing. I was working with jquerymovile 1.1 and 1.2 alfa without this problem. Yesterday I tried with 1.2 rc-1 ant this does not work. I have this header: <div data-role="header" id="menubar"> <div data-role="navbar" data-mini="true"> <ul> <li><a href="#bro?tipo=uno" data-role="button">Uno</a></li> <li><a href="#bro?tipo=dos" data-role="button">Dos</a></li>
Programmatic way to force button in "up" (inactive) state?
Hello, I see sometimes that a button (e.g., <a href="#whatever" data-role="button">) gets "stuck" in the down (active) state, especially if you hold it for a few seconds. So...is there a programmatic way for me to force a button to be in the up/inactive state? I found ways to make it disabled, so there *should* be a programmatic way to make it active, inactive, etc., no? Also, when a user holds a button, after it becomes "permanently" down (i.e., until you click it again), it also, on an iPhone
Is there a way to 'force' JQM in to thinking that's a specific browser/platform that are being used?
Hi. Is there a way to force JQM into believe that the code is executed under another browser/platform than it really is? An example could be fooling JQM into thinking that it is execution on a 'Retina' display, when it is actually running in Firefox. I know I could use a Proxy, where I can set these 'properties' but if there is a buildin debug/dev mode I could use instead, I would do that. Kindly regards Ruffio
popup on page2 navigates back to page1 after close
This issue occurs on all browsers (including mobile ... tested on my Gingerbread 2.3.7 and ICS), except IE. I click a button to change from page 1 to page 2 and then click another button that shows a popup, but when that message is closed it goes back to page 1. I click the button on page 1 again so it goes to page 2, but then the popup button doesnt work. page1.html <!DOCTYPE html> <html> <head> <title>aWe</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link
Issue with accordion display in JQuery Mobile page
Hi All, I have a collapsible set in a jquery mobile page to which multiple collapsible structures are appended dynamically. After adding all the dynamic contents even when i do $("#walk_sections").trigger('create') only one of the collapsible content has that accordion structure visible and all the remaining collapsible contents(<div data-role="collapsible">) appear as open content without the accordion structure. This issue occurs more prominently in IE rather than other browsers. Iam using
jquery mobile 1.2.0 rc1 ie8
RC1 does not appear to work with windows IE8. The beta version does.
How to slide like jQuery UI's slider in jQuery Mobile
jQuery UIhttp://jqueryui.com/demos/slider/#steps jQuery Slider http://jquerymobile.com/test/docs/forms/slider/ In jQuery UI, if you use step function, then it move range by range, but in mobile's slider can't move like that, can I do the same thing?
'pageshow' seems to 'refresh' 1 second too late
Hi all, I'm making this jquery mobile website m.ideebv.com When you click on the first link: 'Wie zijn wij' then you see the flexslider on the top of the page. But the whole page seems to load one second too late. It flickers one time. This is since I'm calling the flexslider with this code: <script> $(document).live( 'pageshow',function(event){ $('.flexslider').flexslider({ }); }); </script> I tried this with pageinit 'instead' of 'pageshow'. Then there is no flickering, but the flexslider loads
Image space not released with display:none in a list item
Hi - I'm trying to make a list item where in portrait mode the image is not displayed but it is in landscape mode. I have the media queries working, different css', etc., but when the viewport is less than the 320px, the image disappears but the text DOES NOT move over to the left as it should. display:none is suppose to effectively remove the element but it's not working like that. Suggestions? Here's the page: mtest.silentauctionpro.com/bidonlineitems.php Thanks, Jim I figured out that the
JQM1.2.0b: Custom select menus example looks weird in IE9
Hi, I noticed the custom select menus example (in the JQM demo page) for version 1.2.0 looked & behaved different than the one for version 1.1.1 when viewed with IE9 (I haven't tried other versions of IE). Other desktop browsers (Chrome, Firefox, Safari) didn't have this behavior change. The custom menu spans across almost the entire width of the page, and I see flickering (or maybe just a slow rendering) when it appears. Is this a known issue? Thanks!
"loading" appears at the bottom of page when using jQ Mobile..
1) with jQuery mobile.. here I see word "loading" in black letters at bottom left.. (might have to scroll to bottom to see it.. ) (this is in iPhone3, don't know about other devices....) 2) without jQuery mobile here I don't see word "loading" at btm of pg the one and only difference betw the two is the inclusion of this tag: <script type="text/javascript" src="js/jquery.mobile-1.1.1.min.js"></script> you can see in firebug jQ Mobile clearly adding this element.. it adds all this: <div class="ui-loader
Fields fill page horizontally
Hello to all. I have a problem with the layout. I like the vertical version but not the horizontal. How can I do so that the labels remain above the fields and the fields fill the page horizontally? thanks <body> <div data-role="page" id="page"> <div data-role="header"> <h1>Intestazione</h1> </div> <div data-role="content"> <p>Registrati gratuitamente a PayDiv <div data-role="fieldcontain"> </div> <div data-role="fieldcontain"> <label
Loading Page - ui-loader css class properties - background-color
I am using jQuery Mobile 1.1.1 , which is the latest stable version of JM. I am using $.mobile.showPageLoadingMsg(); method to show the loading page animation. The ui-loader css class is defined as below. .ui-loader {display:none;position:fixed;top:40%;left:32%;width:33%;z-index:100;padding:10px 10px;background-color:#000000;opacity:.65;} However, even-though the background-color is set to #000000, the resulting loading page background color is white. What could be the reason for this? Is there anyway
Pageinit Issue
Greetings, I have a multi-page template. The 'main page' has a list of five links, generated by an RSS Feeds Reader Plugin for jQuery (zRSSFeed). On the main page, there are links to internal pages to show complete articles (using data-ajax="false"). Those internal pages have the following code: $('#p4').live("pageinit", function(){ $.getJSON("http://viewtext.org/api/text?url=" + $("#url4").val() + "&callback=?", function (data) { $('#story4').append('<div>' + data.content + '</div>'); }); }); This
deeper issues with __exposedProps__ and jQuery mobile when triggering create to update gui of dynamically loaded content
With jquery 1.8.1 and jqm 1.1.1 while developing a custom plugin _exposedProps_ issue occurs (I know spare with me thanks). I've been dynamically loading page content (myself cause jqm was not sufficient). When loaded into a div I must call .trigger("create") on that content to get it to reformat jmobile gui look of components. (I'll be deleting all of it next because of this shortly just thought you'd like to know.) Anyway once I call "trigger create", in jQuery the exposedProps violation warning
Calling relative path pages?
Hi guys! Is there an easy way to call pages that is located in different directories? Let´s say i´m standing on a page located in this directory: /pages/test1/page1.html or /pages/test2/page2.html and i wan´t to change page to. /pages/shared/a.html. Is there an easy way to do it?
Best way to keep place in AJAX results?
Hi, I'm trying to make a system kinda like the way Facebook works in their app. Basically you get a list of results, click "Load more" and it would add them to the end of the list. The problem I'm having is that when you click on one of those results and goto the "more info" page using: $.mobile.changePage("detailed.html"); ...then when the user goes back a page, it reloads home.html fully (so you loose your position completely and have to scroll down and load all the results again, which obviously
Why 320 px?
I created the basic Hello World page on the quick start guide (http://jquerymobile.com/demos/1.1.1/docs/about/getting-started.html). On my Galaxy 5 player, which has a screen width of 480px, it's forcing the screen size to 320px. If I add a 450px-wide image to that basic page, I have to scroll to see the entire width of the image. If I remove jquery.mobile-1.1.1.min.css from the head section, the problem goes away. Why do they force my device to a lower resolution, and is there any way around this?
Can't get a SELECT box to pre-fill in jQuery mobile?
Hi, I'm trying to get a VERY basic SELECT box to pre-fill based on a saved value in my page. <select name="Language" id="Language"> <option value="english">english</option> <option value="french">french</option> </select> Trying to set it using: $("#Language").val("french"); For some reason its doesn't wanna work (yet its working fine in a JSFiddle: http://jsfiddle.net/youradds/rXvAL/ ) Anyone got any suggestions?
problems with nested listviews and data filter
Good afternoon. i have a application with two nested listviews, in another words, i have a listview, and into a <li> tag i have another listview, the issue is the data-filter which i put in the external listview, but the jquery mobile render for the nested listview too, then my application appears several search fields which do the same thing rather than filter each list. the jquery mobile build a data filter field for each list, i try to put data-filter="false" in the nested listview but no
fullscreen header conflict with popup dialog.
When using jquery mobile 1.2 rc. I found if I set the footer to fullscreen, the margin of popup dialog will looks ugly, I find out this is because the css definition of this: .ui-page-header-fullscreen .ui-content, .ui-page-footer-fullscreen .ui-content { padding: 0px; } If I change the padding to 0px, it will looks good.
Install Developed Mobile application in Device
hi, I am new to JqueryMobile FrameWork. My requirement is how to install Mobile application which is developed using jqueryMobile Framework in iceninum Graphite Environment. I develped my simple mobile applicaiton using JqueryMobile FrameWork in Icenium Graphit.It is working properly in icenium Emulator please suggest me to go forward... thank you, srinivas
Radio buttons circle image dont appear
Hi All, I'm using the example code for radio buttons on my app, with Phonegap. The vertical list of options is builded ok, but the circular image on each non checked option is not showed, only on checked option. Any suggestion ? Here is my code ( head and html tags was removed ): <script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script> <link rel="stylesheet" href="jquery.mobile-1.1.1.min.css" /> <script src="jquery-1.7.2.min.js"></script> <script src="jquery.mobile-1.1.1.min.js"></script>
Next Page