Problem with data-iconpos="notext"
I have a toolbar with some buttons in it. They are vertically centered when there is text next to them, but when I put in the attribute data-iconpos="notext" the button is no longer centered vertically. I know I can manually change the CSS, but before I did I wanted to check to see if this was intended or not. Here is a fiddle to show what I am seeing. http://jsfiddle.net/ryanmc/WpgCj/
I like to give two spaces between the options and the paragraph when shown in a mobile browser, please look at the code and help me. Thanks
<div data-role="content" class="content"> <form id="myform" action="" method="post"> <div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-type="horizontal"> <legend>Where do you live ?</legend> <input type="radio" name="radio-language" id="radio-french"> <label for="radio-french">French</label> <input type="radio" name="radio-language" id="radio-italian" checked="checked"> <label for="radio-italian">Italian</label> <input type="radio" name="radio-language" id="radio-greek"> <label
How can I change the data-icon depending of the network
Dear All, In my Application, I am testing the network. If the GPS if active, I want to have the check icon and if not I want to have the delete icon. I craeted that function. I do not understand why the icon is not change depending of the connection. The text() works (see teh commented code) but the icon does not change. I tried with button('refrresh') and I also tried with trigger('create'). But in both case, the icon is not changed. What suggest you to me ? Cheers function network(status){
Swipe like summly ios application
hi everyone, how can i create swipe effect for my app like summly application. as u see in this application user can swipe to up,down,left,right, cheers.
What is wrong with this script?
I am trying use a form validation script that seems to have a "small" problem that is taking taking big to solve. When, I load the html page, i get a PAGE LOAD ERROR and the validation will not work on form submit. However, if I REFRESH the page, the form validation starts to work. This behaviour happens on chromo but the script does not work in explorer with or without refresh. Although, I do get the page load error as well. I am guessing the problem is with main.js but I cannot seem to find
Portrait mode only
Is there a way to let people only use portraitmode? When they are rotating their screens to landscape, the site/app should still be displayed in portraitmode instead of landscape. Are there any possibilities to do this?
css or javascript calculation
Hi all, in our app, we were first used css media queries for different devices. we had numerous problems, when we fixed for a particular device, it upset the other 2 devices... then we decided to calculate dynamically the control sizes, this somehow fixes the problem, but what is the JQM recommended usage ? media query or javascript ? regards
Is this the proper way to completely clear the dom cache ? $.mobile.pageContainer = null;
Is this the proper way to completely clear the dom cache ? $.mobile.pageContainer = null; Does any one else have issues with elements being rendered improperly after 13 or 14 page loads ? After about 13 to 14 page loads the fixed footer and other elements start tanking in various browsers including desktop firefox 16.0.2. There is only 6 different pages so it should not take up more space but it does. So I created this function to clear the dom after 10 loads, function updatecounter(event){ if
JQM 1.2 Popup scrolls to top of page when closed - on iPad/iPhone
I'm trying to use the new Popup feature in JQM 1.2. On iPhone/iPad (not desktop and didn't try other mobile devices), if the popup link is down the page so the screen has scrolled, then closing the popup causes the screen to scroll back to the top. Below is the code I used for testing. It has a "page1" which is a one-item menu and a "page2" which has a bunch of text with a popup link near the bottom. Again, this works fine on a desktop, but the page scrolls to the top on closing the popup when tried
two toggle switches in one line
<div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <label for="toggleswitch1"> </label> <select name="toggleswitch1" id="toggleswitch1" data-theme="" data-role="slider" data-mini="true"> <option value="off"> one </option> <option value="on"> two </option> </select>
JQuery mobile app. It all boils down to the the click event firing twice in Android
Hi, I have a problem with a simple JQuery mobile app. It all boils down to the the click event firing twice. This issue only in Anroid , the same code is working in iPhone.It is working even Anroid emulator. When I click on the button 'one' or 'two' it will load twice the same page, because of that it seems to be flickered. Let me know any updates. Thank you Sreekumar Here's the code <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
How can get a variable value when I leave my page
Dear All, I am loosing my time looking to get a value when I leave a page. On my home page I have a code which record my position in a data called tracking_data $('#home').live('pagebeforeshow', function(e){ $('#mapHome').css('height', Resize.content()-35 +'px'); // Start tracking the User var track_id = "me"; watch_id = navigator.geolocation.watchPosition( // Success function(position){ tracking_data.push(position); //alert(tracking_data[0].coords.latitude);
onclick the button "M" makes the "M" divider to move at the top
Hi ! I have a page that has a listview of 125 names ; that listview has 26 "divider", one for each alphabet letters A to Z ; each divider has an "id" : "A", "B", "C", etc. The page's fixed header has 26 buttons, one for each alphabet letters. When the page is loaded, the divider "A" is at the top of the screen. I would like the listview to move in order that a divider, say "M" divider, move at the top of the page when I click on the button "M".. ...and so on for each button-divider. I would appreciate
Jquery Mobile Onclick event does not work before page reload
Hi, I am calling page from main page but the onclick does not work until I reload the page. any help? This is my link: <a href="#" id="mag" data-role="button" onclick="formSubmit();"><img src="images/mag.jpg" alt="" /></a> This is javascript: $('#mag').click(function (event) { formSubmit(); }); $(window).load(function () { $("#q").keyup(function () { var SEARCHWORD = this.value; $("#MAIN_UL li").each(function () { if ($(this). find("a"). text().toUpperCase(). indexOf(SEARCHWORD.toUpperCase()) >=
Multiple Pages + Ajax + Piwik integration
Hello, I'm trying to integrate PIWIK Statistics in a Jquery Mobile driven Page. Page consists of about 10 different pages - all JQuery Mobile Ajax loaded. For Piwik I have to fire a JS call when a new Page is called. I already tried it this way: $('[data-role=page]').live('pageshow', function (event, ui) { try { var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", 1); piwikTracker.setDocumentTitle(document.domain + "/" + document.title);
Use navbar buttons as toggle buttons in jQuery Mobile
Hi guys, I'm trying to use footer navbar buttons as toggle buttons in jQuery Mobile 1.2.0, but I have a problem on Safari Mobile. This is the HTML code for my buttons. <div data-role="navbar" class="navbar" data-grid="b"> <ul> <li><a href="#" id="navbar-1" data-icon="custom">Navbar 1</a></li> <li><a href="#" id="navbar-2" data-icon="custom">Navbar 2</a></li> <li><a href="#" id="navbar-3" data-icon="custom">Navbar 3</a></li> </ul> </div> And this is the JavaScript code I use to simulate toggle feature.
Fixed Headers and Footers not disappearing on scroll of ui-content
Originally, I had this working and then I made it where the header and footer stay persistent as you scroll through the content, then the client changed their mind and wanted it where the header and footer disappear when you scroll through the content. Now my issue is trying to make this come back to where it originally was. So I got rid of the data-tap-toggle and data-id="persistFooter" or data-id="persist" but the header and footer are still stuck where they are and don't disappear when you start
Styling ui-navbar in different background colors than ui-listview
Having an issue with this page that features a ui-listview and a ui-navbar and I'm trying to style it where the ui-navbar button that in this example is the same color gradient as the listview, is a completely different background color. It's theme C, but if I style .ui-btn-up-c it affects both the button in the navbar and the button in the listview. So I tried copying that style and doing one for .ui-navbar .ui-btn-up-c but that just makes both buttons in the navbar the exact same color and style.
How to define fallback transitions for non-3D support?
In JQM 1.2.0 docs, the defining fallback transitions for non-3D support is explained as The fallback transition for browsers that don't support 3D transforms can be configured for each transition type, but by default we specify "fade" as the fallback. For example, this will set the fallback transition for the slideout transition to "none": $.mobile.transitionFallbacks.slideout = "none" But the $.mobile.transitionFallbacks.slideout = "none", again getting me fade transistion when non-3D support devices
data-native-menu='false' - Custom pop-up width?
The popup that is created for <select> elements using data-native-menu='false' is cutting off the text of my options. Does anyone know how I can customize the width of this popup? If possible, I'd prefer that it size itself based on the length of the longest option, unless it reaches the fullscreen width, in which case it could then clip the text. Thoughts/suggestions?
Listview style
Can someone tell me what is the CSS that controls the onclick of a listview item?
Listview with phone number
Let me try this again. Below is the code from one of my files that contain names and phone numbers. I have a page with links that point to the different files with names and phone numbers. When you first go to the page, the name and phone number are in one line and they are just regular list items. If you refresh, it now becomes a link to the phone number. There are no anchor tags so I guess Jquery Mobile is seeing the phone number and turning it into a link. Not sure it doesn't do this when you
Tap event fires twice on iPad/iPhone
Hi, I've problems with an alert inside a tap event - it works on desktop/winPhone but not on iOS where the event fires again next time you click on something... http://jsfiddle.net/nMR85/565/ Is it me doing something wrong or a bug?
Customizing of Flip Switch in Listview (PhoneGap)
Hi to everyone, i'm developing a mobile app based on PhoneGap and have some problems regarding Settings page. I added some Flip Switches into my settings page (Listview), but they are looking not like in real size (jammed). Without Listview Flip Switches are looking normal, but I want to include them into Listview and make settings page more amazing. Have look at the image bottom for the details. <ul data-role="listview"> <li> <h3>Sound</h3> <p>Sound during the pop-ups.</p>
Annoying Flickerings in Transitions
Hi, I have made two apps for the iphone with phonegap and jQM. Both of them are developed completely independent from each other and do completely different things. I've tested every single transition for the changePage event but the Flickering is the same every time. for Example: if I click on a Button for the next page I can see the next page for some milliseconds and then the transition starts and flickers. for testing pourposes I have made 4 simple jQM pages with 100, 1000, 10000 and 100000
Fixed footer on iOS 6
Hi, After upgrading to iOS 6 we started having the issue in our application. We have long forms where user enters data. When the field that user focuses is pretty close to the end of the page, when the keyboard is shown the footer jumps up and, when we start typing something it either disappears totally or jumps to the middle of the screen. When we hit done the footer is repositioned back to the bottom of the screen. NOTE: it is important that this happens only at the moment we start typing, not
jQuery Mobile activating geolocation on mobile devices
Hi, a very strange thing appears when visiting sites/apps using jQuery Mobile with an iPhone4S (iOS6.0.1). The geolocation seems to be automatically activated, shown by the GPS-arrow in the status bar - which drains the battery pretty fast. Tested with jQuery Mobile 1.1 and 1.2, and also reproducable on the demo website http://jquerymobile.com/demos/1.2.0/ I can't find any relevant functions in the code - what can cause this behaviour? (It does NOT happen on http://jquerymobile.com/demos/1.0.1/ )
jQuery Mobile Download Builder
Anyone know what is the latest on the – Alpha Release of download builder. When can we expect a stable version. thanks,
Giving away 2 free copies of jQuery Mobile Cookbook
Hi all, Just wanted to share the good news, my book "jQuery Mobile Cookbook" by Packt Publishers just got published at http://www.packtpub.com/jquery-mobile-cookbook/book .. would be glad to receive your feedback and suggestions at chetankjain@gmail.com Check out this link to win your free ebook: Giving away 2 free copies of jQuery Mobile Cookbook
jquerymobile 1.2 google map full screen problem
Hello, i use google maps in jquerymobile. after upgrade to jqm 1.2 , maps not shown in full screen.(in mobile & desktop browsers). But when i resize browser window, it turns into full screen(that i want at first screen opened). i search problem in internet and try most of them but none of them helpful for me. What is you suggestions? <!-- Map <<< --> <div data-role="page" id="map" data-add-back-btn="true" data-fullscreen="true" style="width:100%; height:100%;"> <div data-role="header" data-position="fixed">
can i insrt table in the grid layout...
hi .... can i insert table in the grid layout ... can any one help with example....
$("..").empty().append("#..") only works on the first click.
Hi, I am writing a jQuery Mobile application. I have a simple jQuery script which empties a div then append a new content to that div. What happens when the event is initiated (click event), it works the first time. All subsequent clicks only empties the div but do not append the new content. Here is the jsFiddle if you wish to take a look: http://jsfiddle.net/Z7YCx/ Any help/advise is highly appreciated. Thanks.
Address bar doesn't hide on iPhone 5
Hey, Does anyone else know a fix for this behaviour? http://imgur.com/a/idVmX If you see the screenshots, on the 4 inch iPhone 5 display the address bar does not hide.
talking-tom-cat app
https://itunes.apple.com/us/app/talking-tom-cat/id377194688?mt=8 is t possible to build talking tom app using jquery mobile for all devices
jquery mobile asp.net button click not working
jquery mobile asp.net button click not working
caching with dynamic html
Hello In my app a page I cache one page (data-dom-cache="true") with its form components (checkbokes) are dynamically created when "beforeCreate" triggers by reading some value from local storage. The page is shown correctly but if I navigate to other pages and later I go back to this cached page the markup is all messed up (see attachment). Any idea of what's going on? Thank you in advance
Consultants?
Hi, We're looking for a company or freelancer that can help us with jQuery Mobile. Help is needed such as custom design and components. Preferable this company/person is located in the EU, but not necessarily. regards, Robin
Create a 'tile' for mobile device to access website
Greetings, I've created a site with jQuery Mobile and I'm looking for a tutorial or such that explains: How to create a 'Tile' (the app button) that will be used on either Microsoft Apps Store or Apple Apps? After the tile is created, how does one 'host' it in Marketplace? Can a 'tile' be hosted from my webhost? If so, how? Much Thanks, rezu
JQM: External Content CSS interfers with JQM CSS
Hi, I'm trying to load an external static html page into a JQM app (div, iframe, any will do) the following way (I'm currently using a div): // load html from external (though same server) html page $.get(externalHtmlFolder '/filename.html', function (data) { // change the html so that the path to css is correct from the app's location data = data.replace('href="stylesheets/style.css"', 'href="' + externalHtmlFolder + '/stylesheets/style.css"'); // insert the loaded and now altered html
Button Click on home page > Google Maps don't show up on second page
UPDATING : Added my code. So, if I am on Index.html and click on locate a spot > it goes to Locate.html but doesn't shows the map. If I refresh the Locate.html, the map comes. ---- jQuery Mobile 1.2 --------- Hi All, I created a button/ hyperlink on my home page (say page1.html). When I clicked on this button/hyperlink(page2.html) , it goes to a page that shows Google maps and markers on the map. My issue is when I click on button / hyperlink on page1.html > my map doesn't loads up on page2.html.
Next Page