Disable overflow scroll of underlying page
Hello, JQM pages scroll on mobile devices slightly (drag scroll and bounce back) even when there is no need for it, ie. the whole content fits into a single page. I'd like to disable this behavior in order to make my app more native-like. But all solutions I've found so far not only disable this extra scrolling but hurt regular JQM functioning one way or other. Is there any better solution? Thanks, Gábor
How can I have a phone number not linkable
Dear All, I wish to display a phone number and number. When I look at my page, the phone number is linkable, but I would like to have it just for information. I do not want to clik it and have the possiblitity to call the number. How can i desable it? Cheers
allowSamePageTransition through mobileinit
I'm working through a Django installation where saved forms are being redirected to a prior page and the form link is no longer active. I'm looking for an example where I can initialize Jquery Mobile to allowsamepagetransition on all pages. Considering I'm only using the fade transition for reloads, this shouldn't be an issue. $(document).bind("mobileinit", function(){ $.mobile.changePage(what.do.i.put.here.to.bind.this.event.to.all.pages, { allowSamePageTransition: true
Popup causing scroll to the top on iPhone with multipage
After a lot of debugging and testing this is what I found. If I have a multipage layout and if the url has "#PageName" in it, the action of closing a popup will cause the page to scroll to the top. This does not happen when I test it on any browser on my machine, but it happens every time on an iPhone. Has anybody else experienced this or know of a work around? Thanks
jQuery Mobile Persistent Footer in V.1.2.0
Persistent Footer. Recent release 1.2.0 of JQM appears to fix the persistent footer problem in Internet Explorer 9.0. Persistent footer does persist in DESKTOP IE9, but in Windows Phone 7.5 browser, the location is fixed to the bottom of the page. In WP7.5 it does not persist to the bottom of the screen like it is supposed to do. I does persist in Desktop Firefox, Desktop IE9, Safari Desktop and Safari IOS
Linking back to pages, removing the hash, help please!!
Hi, I'am trying to create an app. I have all the basics but have stumbled into this scenario. One each page I have the same four buttons, e.g, A1, A2, A3, A4 So in theory you could navigate from the home screen to A1, from A1 to A2 right through to A4. I want to know how the end-user can revert back to the original page they were on instead of having to scroll-back through each page. For example. If the user was on page 2 and tapped A1, then from here A2, and then A3. Using the back button would
Android 2.x transitions problem
Hi all! There is a global problem with transitions in jquery 1.1/1.2.0 for Android 2.x. Can anyone give a good workaround for transitions? Using custom transitions to roll back to 1.0.1 only defining css doesn't solve the problem, also there is the problem with white page during animation. I use jquery.structure-1.2.0.min.css (mean not using shadow effect to slow transitions) Please, give the right solution or I have to choose maybe jqtouch with zepto or anything else...
How do I know which JQM items I'm using when I want to use Download builder?
Items as 'iOS Orientaion Change', 'Match Media Polyfill', 'nojs Classes' and other excotics items, how do I know if I'm using these? If I havn't done anything specific regarding these items, can I conclude that my solution is not using them? Kindly regards Ruffio
Usage of configuration of Download Builder settings
When using the Theme Roller, I can upload my 'old' theme and download a new version in the newest format. It would be lovely if the same could be done when using the Download builder. Instead of I must select/deselect items every time I want to download a new version of my JQM build, it would be nice if I could just upload a configuration file and then all my seletions/deselections were done. It is just an idea. It would make upgrading much faster, as I dont have to remember which settings I
jquery mobile event taphold on image
I added 'taphold' jquerymobile event for an image. When i taphold on that image in ipad i am getting the below pop up which is thrown by browser. How to avoid this?
jquery mobile ui-dialog breaks back button
Hi all. I hope this is the place to find help, i have had not luck with even getting close to an answer from the jquery mobile pages. I have a page that has a select list on it. This is auto re-styled to jquery mobile ui-dialog. I have added an onchange to the select list to populate the list with ajax. The problem is that this action does what i need it to, but because the ui-dialog is not being closed in the right way, it leaves &ui-dialog on the query string which means that when the user hits
jquery mobile popup select menu width
I wish to increase the width of the popup select menu in jquery mobile - (It's not wide enough to contain the words I wish to place in the selections.). How can I do this?
How to use filter with select menu?
I would like to use the filter function with select menu like the one shown in the list view sample. When I tried the code given below the search bar does not show. Is this th correct way or is there a different way to do this? Thanks. <select id="test1" data-native-menu="false" data-filter="true"> <option value="CA"> California</option> ; <option value="Ny"> New York</option> ; <option value="NC"> North Carolina</option> ; <option value="WY">Wyoming</option> ; <option
jQuery Mobile elements outside "page"
I want to develop a single page app using jQuery mobile, and want to have a menu on the side (similar to the Facebook app for iPhone). This side menu needs to stay static on the page, and only the main content of the page change when the links are clicked. i.e. I want to have a <div> outside of the data-role="page" that still has jQuery Mobile controls in it, but doesn't change with the page content. If I try doing just that, I cannot find any way to apply the jQuery Mobile styling to the controls
jquery google maps api v3 load issue
Ok so this i my first attempt at a mobile app and im having an issue with my google maps. I am using dreamweaver cs6 with phonegap build service to compile my app my coding is as follows <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery Mobile Web App</title><link href="jquery-mobile/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/> <style type="text/css"> h1,h2,h3,h4,h5,h6 { font-family: cursive, fantasy; color: #996600; border-top-color: #000; border-right-color: #000;
passing event handler dom data
my expectation was that given: <section data-role="page"> <div id="audio-language">en</div> </section> that in the following handler: $('section[data-role="page"]').live("pageshow", function(event, ui){ console.log("pageshow"); console.log("$('#audio-language').html()); }); $('#audio-language').html() would evaluate to whatever the current div contents were. but it seems to just evaluate once when the first page is loaded. how
Navbar repeating selected data-icon on navbar
I'm having quite the predicament with my navbar located in my footer. No matter what it seems I do, when I select one of the five choices, whatever icon is selected, the icons to the left of the selected icon receive the same icon. In other words, If I have a navbar with 1,2,3,4,5 and I select three, I now see 3,3,3,4,5 instead of 1,2,3,4,5. I've tried a number of different methods to attempt to eliminate the issue. All to no avail. Anyone have an idea what might be causing this? You can view the
How can I have the data-role="content" always displayed to the data-role="footer"
Dear All, I am displaying a googlemap to a div <div id="map"></map> It work fine excepted that <div data-role="content"> is not heigher than 1px. I would like to have always the eigher the height of <div data-role="content"> or <div id="map">, heigh up to the <div data-role="footer"> In CSS if I use height=100%, the 100% does not work. In that way, google map will always be displayed in all the screen of the smartphone Many thankf for your help Cheers
Carousel Question
Im new to jQuery Mobile. Still researching it. Does jQuery Mobile come with a "built in" carousel function? I cant find one in the docs ...
Double transition the page
Hi all! I have such a problem, a link with href to another page with data-transition (no matter what kind of transition I use) and also changePage() with transition too...So, the pages in both cases, when link is clicked or changePage called, apear for a second, then desapear and then load normally. Why can it be?
Unable to get jqgrid
Hello people, I am new to this. how to obtain the jqgrid in jquery mobile environment in a jsp.
Overwrite expand/collapse events of JQM Collapsible
Hello, I am able to bind to expand/collapse events of JQM Collapsible on this page: http://codeturtle.com/files/collapsible1.html But I want to stop the div with content "I'm the collapsible content...." from being expanded/collapsed. The reason is, I want to show different contents for different events, Thanks
Problem with button and picture link
Which script code I need if I have a button of the displayed image eg rss feed from a local store to on a cell phone? I have an app developed the pictures from an rss feed displays this I would then store it locally on the phone for like button for that I have unfortunately not only the functional ? please help me
Mod_rewrite pick up variables
I want to crate nicer url´s on my Jquery Mobile page. Now I have Ex. store.html?supplier=apple&product=laptops My code to capture the variables. var supplier = getUrlVars()["supplier"]; var product = getUrlVars()["product"]; function getUrlVars() { var vars = [], hash; var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); for(var i = 0; i < hashes.length; i++) { hash = hashes[i].split('='); vars.push(hash[0]); vars[hash[0]]
Jquery Mobile: Custom Header w/ background image + navbar
Struggling badly with this all day and I get the feeling somebody with more knowledge on subject could save me a lot of grief... I have created a website using Jquery Mobile and I want to use a custom image/logo instead of the standard header on all of my pages. What makes it slightly more complicated is that I am also using a navbar just under the custom header/image for navigation. See the below image for what I am talking about: http://postimage.org/image/ywh1wajjr/ So here is where I am running
jQuery Mobile advice / code examples
Hi, would it be possible for someone to offer a few code examples and advice please? code to go into a button that slides a page into a specific area can a div content change from a button clicked within that div? for example: a button on the main page changes the content of a div. In that content is a set of buttons and by clicking one of them, the content on the main div will change or would i div down in tiers? (does that make sense?) what code do i put into a page that is being displayed in a
Double transition
I am using $.mobile.changePage to transition from one page to another and it works with a glitch. When it transitions first it transitions to the same page I am on and then it transitions to the correct page and I can't figure out why. Can someone help?
After browser refresh, popup on page navigates "back" when it is closed
I have a particular page (a map page) that is extensively modified on pagebeforeshow. (probably irrelevant to this problem.) When I reload this page from the browser refresh button, the URL briefly appears with ui-state="dialog" in the URL. The that part is removed from the URL, and the page transitions to whatever page appeared prior to the map page. The page is linked-to with a parameter in the URL. (?location="me") That is: Page A index.html, for example user navigates to map page (map/index.html?location="me")
My function won't fire on IOS
jQuery 1.8.1 jQuery Mobile 1.1.1 Developing for Android and IOS Hi, 3 days with no solution for this. It's driving me nuts. Firstly, I have tried pageshow, pageinit, and .live .on .bind etc. to no avail. My problem is, my app has the following html code in my services.html page with an id of 'servicesPage': <a id="purchase_button" href="#" data-role="button" data-icon="plus">Make a test purchase</a> a JavaScript script in included in the head of the document which includes the following: // JavaScript
jquery mobile and adsense
Hi very good, I would like to know why only adsense advertising comes only when I refresh the page. Is there any trick to get it right Thank you very much and greetings
jquery mobile 1.2 looks funny on IE
hi I downloaded the jquery 1.2 latest. I just use the demos site that came with the 1.2 zip file. On Chrome (mobile and desktop), firefox (mobile and desktop), iOS, Android etc - but on IE 8/9/10 - it looks UGLY. I tried on a general webserver running apache-2.9 + Fedora 18 and it look really bad. (my downloads of the .zip file). I tied it on 1.3.9 and BSD 5.0 and it look a little better. The edges are rounded - but the text bars are square and stuff. I have tied to download and copy code from the http://jquerymobile.com/demos/1.2.0/ -
How to disable slider track click event on jQuery Mobile
We can drag the circle button or click somewhere on the track to do the slide, how to disable the track click function on jQuery Mobile, I just want to slide by drag the button, I tried this $('div[role="application"]').unbind('vmousedown'); but it cause the drag function failed too
Good beginners project for students
Hey. I'm going to have an intro class of about 5 hours with jQuery Mobile. My students have worked with html and css, but no programming at all yet. Do you guys have any good tutorials or so that would be good to start with? I need to find a simple project that I can do with them. I'd like to do something that feels kind of app-ish but that doesn't involve a lot of scripting. Any help would be greatly appreciated.
Text Input not working in Android 4.1 (JellyBean) web view
Hi, I have a simple form with 2 input fields, which is not working in Android 4.1 web view. I am not able to type on the fields. But when I copy and paste text to these fields it is working. I saw a related post in android defect list that input fields with max length attribute shows similar behavior. I removed the max length attribute and still it is not working. However the page works fine in android browser. Any help appreciated. regards, Hari
Does window.resize work on windows phone 7(IE9) ? / Orientation detection
Hi All, Does $(window).resize() work on windows phone 7(IE9) ? Or else Please let me know how to detect the orientation(landscap/portrait) change on the windows phone 7.Please its very urgent!! Tried out all the stuff like resize and orientationChange and tested on the wp 7 emulator. Nothing worked Help Plz... Thanks in advance !
How to make a "Favorite" system using local storage?
I'm very un-experienced using Javascript. I've searched the internet, but can't find or don't understand how to fix it. I've a Jquery mobile based web application about party's. when the user clicked a party, they see all the info about that party. What I want to do is make a button with "Add to Favorites" or something, and the party will be saved (using local storage) in the favorites page. Anyone can help me please!?
Problem with iOS 4 and fixed toolbar
Hey, I've been struggeling a bit with getting the fixed toolbars to work with iOS 4. From what I've found i can add the jquery.mobile.fixedToolbar.polyfill.js and the jquery.mobile.fixedToolbar.polyfill.css right after my other imports. This however just wont work..Am I missing something important here? I am running the newest version of jquery, 1.8.2 and jquery mobile 1.2.0. All replies are appriciated!
Persistent Navbar in header works on Samsung Tab but not on Nexus
Hello, Im new to Jquery Mobile and developing an Android App. The app has a persistent header which was simple enough to implement using data-id="head1" data-position="fixed" in each of the header divs of the different pages. Im not using separate html files for the pages but rather, different page ids in the one html file. When testing in Chrome and the Samsung 10" tab running Android 4.04 it all works great. Clicking on the different nav buttons (or tabs) changes pages without the nav bar disappearing then reloading.
Always use?
Hey guys, Id like to use jQuery Mobile to all my web applications, whether for visualization desktop, tablet or smartphone. Because I understand that this library jquery works for all platforms, so why not use it forever? What do you think about this?
jQuery Mobile Popup and ListView, and Knockout.js Data Binding Inside the Popup div - Not Working
Hello. I’m working on a mobile website using jQuery Mobile and knockout.js. I have a (kind of) complex scenario with jQuery Mobile’s popup and listview and knockout data binding inside the popup div, and I can’t get it working. I have a nested list of alarms as shown below. For each day, it creates a list-divider row. Then inside each day, each alarm has a row. <ul id="alarmslist" data-bind="foreach: days" data-role="listview"> <li data-role="list-divider"><span data-bind="text: date"></span></li>
Next Page