IScroll 4 issue with padding or margin at bottom of screen
Testing out my first JQM page and having an issue after I added iScroll4. Issue is there seems to be some padding or margin at the bottom of the page. After numerous attempts to eliminate it with Firebug, nothing worked. Anyone else experience a similar issue with iScroll?
How To generate Dynamic jqplot PLOT CHART using a value from Datatable cell.??
I am writing a code for displaying student Details in JQUERY MOBILE my code should work like 1st page contains list of students [ when user selects some students and clicks on a button, which goes to second page] 2nd page contains only selected students listview. [ when user clicks on a students name from that list view, controle goes to 3rd page with with that value=(studentName)] 3rd page will contains that students marks in several subjects IN datatable.(as bellow) and bellow it we have to display
li:active after close popup
I have a list, where each li opens a popup. When I close the popup, the li still has an active styling. How would I get rid of that? Here are some screens: Opened popup http://d.pr/i/hh4C Closed popup http://d.pr/i/pYGW Any ideas?
Slider Event not trig when coming from "main" page but works after refreshing page
Hi, I m quite a beginner in Jquery Mobile DEV and have a very strange issue with slider object. I created a dummy website to show you my issue. When I arrive in the main page : http://82.227.228.35/TestSliderJqueryMobil/ then if you click on "Charles" you will arrive in the following site : http://82.227.228.35/TestSliderJqueryMobil/charles.php -> Do not go directly to this adress or you will not be able to reproduce the issue compose of 2 objects : 1 Slider and 1 Flip toggle switch I map a call
jQuery Mobile div with external content
Hi, currently using this version to change content of a DIV- <div data-role="page" id="earphones"> <div data-role="content"></div> </div> </div> how can i do the same but to show an external page instead ./speakers.html cheers Nigel
Scrolling issue in jquery mobile
Hi, I have designed the android phonegap app using jquery mobile and using the same in ios.My app is working fine in big devices.But in the small devices my page is not scrolling properly.I have fixed header and footer.In the footer i have menus,one or two buttons and displaying the advertisement.I am facing this problem in both android and iphone. Please kindly guide me to solve this issue.Thanks in Advance.
Custom Script not working on interior pages.
Ok, I am having some issues with a piece of custom code I am trying to use with jQuery Mobile. I am running jQuery verions 1.8.2 and jQuery Mobile version 1.2.0. I am trying to get the menu to drop down when the button is clicked and hide when it is clicked again(Code Below). On the first page, or on a hard refresh the script will work correctly, but, once I navigate to one of the pages from the menu I can no longer get the menu to appear. However, with the console.logs I added in I can see that
JQM trigger create on form control elements doesn't work
So I've run into a very frustration problem. My code is dynamically injecting new form control elements during a pagebefore/show event. The thing is, the form controls are enhanced correctly, BUT the actual act of clicking on them does not WORK. In the case of a checkbox, click on it doesn't apply the checkbox( I even binded a 'tap' event to print a console message and the event isn't called when I click on it.) In the case of a slider, the number field works, but the slider graphic is rooted, it
Performance monitoring durring development
I have a single page app with a dozen or so internal pages, and a lot of javascript glue holding it together. I would like to write a test that would go through the application basically like a user would. The two most important objectives would be to measure how long it takes to run through the test, with page loading and scrolling on different devices, and also find things that have stopped working. Does anyone have any suggestions as to how I would go about doing this? -Josh
'pageinit' not firing on the first page
I am trying to use the pageinit event to initialize the first page in my jQM application. My problem is that the event doesn't seem to be raised for the first page in the application. Check out this jsFiddle: http://jsfiddle.net/jeremy_wiebe/Cef7M/ If you click on the button jQM fires the pageinit event for page two, but the main page never fires that event.
Page Header Wraps
The <H1> and the <H3> in the header area of the first page gets wrapped so that School and Trojans are put on another line. It looks like: Lincoln High School Home of the Trojans How can I make it Lincoln High School Home of the Trojans <!DOCTYPE html> <html> <head> <title>Developing with jQuery Mobile</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/themes/lincoln.css"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css">
Zoom only contents not footer
Hi Below application has header, content and footer sections. http://openlayers.org/dev/examples/mobile-jq.html I want when I zoom in/out using multi-touch then only contents i.e. actual map should zoom in/out not footer section. How can we do it in Jquery Mobile? Thanks!
jquery vetran, jquerymobile noob question
Hi guys. So I'm trying to simple change the transparency of a link when someone touches it. For the life of me, I can't sort out where to put my code. I started out with a simple app created by jquerymobile's site. So I have the js that it creates that starts with: (function($) { $.widget('mobile.tabbar', $.mobile.navbar, { .... I'm just trying to sort out where I would put my code within the pre-created script? $('.mainPageButton').bind("vmousedown", function(event) { alert('this
Collapsible list gives extra width when expanded?
Hey, I have a collapsible list on my mobile site. The problem is that when i expand the list, it comes with some sort of width which makes the page larger than the screen, which shouldn't happen. This makes that i can scroll horizontally.. Does anyone have a clue what could cause this problem? Sincerely Niek
missing jquerymobile file?
I have updated dreamweaver cs6 to work with the new jquerymobile 1.2.0, all seems well until I save the html page when I get a warning that (data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==); is missing so can't be copied. How would I resolve this? very new so be gentle Ian
Style problem in IOS / Mobile Safari using Jquery1.2.0
Hi, I'm both new to the forum and to using JQM I have been developing an app based on JQM and have moved this onto use JQM 1.2.0 to access the 'pop-up' features this has brought to us (all of which have proved very successful for my task). This development has been based on a web-app with testing primarily using a web server base, with the intention of running the final site through Phonegap. I have a completed app running successfully using JQM 1.1.0 and the appropriate CSS-details below <link rel="stylesheet"
Unexpected Slide Animation
The reverse slide animation looks totally different when i start the application from the iphones/ios6 homescreen instead starting the app from safari. In fact both animation look a little wrong. But the animation in the homescreen-scenario is strange somehow. I would like to know what the reason for that jqm-animations are depending on the start-scenario? It only seems to ba a problem with jqm 1.2 final and ios.
jquery mobile page with more button
I am setting up a j query mobile page showing over 50 elements, how can I just show the first 10 when open up the page, and with a more button on the bottom which can show all if click on it. my script is: <body> <div data-role="page" data-add-back-btn="true" data-back-btn-text="Back" > <div data-role="header" > <h1 style="white-space:normal">body</h1> </div> <ul data-role="listview" data-inset="true" data-filter="false"> <li><a href="http://www.mydomain.co.nz/users/262/">Feature
changepage is changing relative path
Hi, I've updated to jquerymobile 1.2 (from 1.7.1) and I have an issue with pagechange... for example: my site is in http://localhost/htdocs/index.php (firebug call) all page(data-role=page) are contents in index.php, but when i call a page that is located in other php file: $.mobile.changePage("Path/to/other/file/otherPage.phtml"); and i come back to some page (data-rol=page) in index.php. then I do an ajax call $.ajax({ url: 'index.php', type: "POST",........ it does the call in
Need basic direction on building my first jQuery Mobile Offline project [SOLVED]
I would like to create a simple jQuery Mobile/ PhoneGap page with several images on the page. After I create this page, I would then like to view this page on my ipod touch with an internet connection. I would then close this page project completely Then "intentionally" loose my internet signal on my ipod touch device AND THEN re-open the PhoneGap project page to view it, interact with it, play with it, just as I did when I had internet a couple minutes ago. Is this possible without any cost
A generic popup for messages?
I have a multiple page setup where each page is in a different file. I make alot of Ajax calls on each page. Calls that can go wrong. So i need to display some info to the user if it goes wrong. So i thought that popup would be cool. But i need a generic popup that will popup instead of adding popups to every page and file. In my start.html i have the following: <body> <div data-role="page" id="startpage"> <div data-role="popup" id="popup_msg" data-theme="a" data-shadow="false"
Problem with dialog on iPhone/iPad
I have a popup dialog that should be opened when a button is pressed. It works properly on desktop browsers and on Droid. On iPhone and iPad (Safari) I discovered that it wasn't opening. If the page containing the button is refreshed it will work. I took it to Safari and Chrome on the desktop and changed the useragent to iPhone. It works properly on Safari. With Chrome it is the same behavior as the iPhone/iPad. Will not work unless the page is refreshed. I have taken the page source after
$.mobile.changepage not loading external .JS file
I am having a weird problem when trying to load an external JS file in a page which is loaded using $.mobile.changepage(). Following is my directory structure: |_ /html | |_ conflist.html | |_ newpage.html |_ /common | |_ jquery-1.7.2.min.js | |_ jquery.mobile-1.2.0.min.js | |_ jquery.mobile-1.2.0.min.css |_ /platform |_ dummy.js Here are the codes for conflist.html and newpage.html. First, conflist.html: <!DOCTYPE HTML> <html> <head> <title>ConferenceToGo</title> <meta
Elements not getting their data-theme from parent container.
I've noticed that form elements no longer by default inherit the data-theme of their parent element but instead uses the data-theme of the page. For example using the following markup <div data-role="page"> <div data-role="header"><h3>Header</h3></div> <div data-role="content" data-theme="a"> <ul data-role="listview" data-inset="true" data-theme="c"> <li> <input type="button" value="test" /> </li> <li> <select
Header content getting cut off
My header on my iphone shows up as "My First Mobile...". Why won't the whole header show up? <!DOCTYPE html> <html> <head> <title>Developing with jQuery Mobile</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 src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script></head> <body>
Problem using OpenLayer example
Hi I am using below Jquery Mobile example of Open Layers - http://openlayers.org/dev/examples/mobile-jq.html#mappage When I zoom the map, the buttons are also zoomed which looks very odd and it becomes impossible to navigate in the map on a mobile phone. I checked the code for the example which has been reproduced as under - <div data-role="page" id="mappage"> <div data-role="content"> <div id="map"></div> </div> <div data-role="footer"> <a href="#searchpage"
mimic data-rel="back"?
I´m build a PhoneGap/Jquery app (Android). I have a page that is called bu multiple other pages (changePage) with a button: <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-left">Close</a> It works great when i click on the button. It goes back to the previous page. How can i do this in code without having to know the actual path to it? Is the history.go(-1) i have seen in some example really recommended?
ChangePage finish event
Hi all, I need load dinamic page... my page name is dependent from json query returned by server. Then I inject code into my page... Example: function xxxx(idUtente, fantagiornata) { var jqxhr = $.getJSON("http://xxxxxxxxxxxxxxxx", function(data) { $.mobile.changePage( "myPage" + data.xxx + ".html); setDinamicData(data); }) .success(function() { }) .error(function() { alert("Imposibile caricare la pagina. Riprovare più tardi."); }) .complete(function()
Touch effect on image
Hi all, I developed my app using jquery mobile. I have indipendent image with one image as button. I want to manage touch effect as jquery moile button stile. When I tap it, image style must change. How can I do it? I try $(".buttonImg").bind("taphold", function(event)... and $(".buttonImg").bind("tap", function(event){ in the my function I change image but I don't like it. I want the same effect of jquery mobile. Can you help me, please? Luca
jqm 1.2 transition lag
Hey Guys. I'm doing a bunch more device testing here and there and I notice a pretty good lag in page transition from the time the spinner disappears (i.e. the .ui-loading class removed off of HTML) and the actual paint of the page. I'm testing on an IPhone 4 (not 4s) with 5.1 installed. I do have some script on these pages, but I've removed it all and I'm getting the same lag. The markup for each of these pages is about 10k and I do have a persistent footer bar. My transitions are left default
PageInit don't work
I have two html. Index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.min.css" /> <script src="jquery.mobile/jquery-1.7.2.min"></script> <script src="jquery.mobile/jquery.mobile-1.1.0.min.js"></script> <script src="cordova-1.9.0.js"></script> <script> </script> </head> <body> <div data-role="page" id="home">
jQuery mobile and google maps infowindow
Hi, I have a google map inside jquery mobile loading markers. As it is when a marker is clicked the default google maps infowindow is opened as an overlay bubble on the map. Is it possible to get a marker to slide open a new jquery mobile screen with the contents of the infowindow when clicked? Cheers! Connor
jquerymobile 1.2.0 link to ibooks does not work on iPad - returns "undefined"
I have this link to an ibooks file: <a data-role="button" data-icon="arrow-r" data-inline="true" data-mini="true" href="http://ilitapps.com/u/iLitUserGuideTeacher1_0.ibooks">Teacher User Guide <i>(20-Aug-12)</i></a> .htaccess has this mime type association: AddType application/x-ibooks+zip .ibooks 1st tap on the link returns "undefined", then the FQDN URL appears in the Safari iOS browser. clicking refresh with the link in address bar does associate properly and opens in ibooks. Any ideas
Slow response when clicking on list view item on mobile device
Hi, I am using jquery mobile for my mobile web application. My web application has the minimum 30 pages and each page has List view navigation. I have created a sample page of for my application. When I tested it on Apple ipod version 5.1.1 Safari Browser, I found below some sluggish and slow click response which is affecting on user experience. 1. When I click on list view link its take so much time perform click event and load the selected page. I feel there is adding little more delay in page
fixed footer issue in jquery mobile
Hi, I have developed design html page using jquery mobile for my android phonegap app.I am using jquery-1.8.2.js and jquery.mobile-1.2.0.js.I have set the header and footer in data-position="fixed".normally it was working fine.But when the select menu or textbox get focused,footer moves down.How to solve this.Please guide me.Thanks in Advance.
How to create login form using jquery mobile in the center of the page.
Hi all, I want to create login form in the center of the page using jquery mobile.Header ,footer and content(labels ,textboxes and button) these should be in the page middle.Please help me to create login form in the center of the page. Thanks, Ramu.
JQuery Mobile with breadcrumb
Hi all, I have to put a breadcrumb for my JQuery mobile project, with several pages for steps, and user can click on breadcrumb to backward to previous steps as an ajax action. Kindly anyone suggest me ideas for that, should I keep the state for each step on server side, and when user click on breadcrumb, all data will be collected and displayed as well.
DOM Caching and event listening
when a page is automatically removed from the dom, are any event listeners that may have been bound to elements in the page automatically removed? If not, what is the best practice for removing event listeners? ie, I have the following script: $(document).on({ pageinit : function(evt) { // do stuff here set up some listeners // perhaps asynchronously load google map api... and set up event listeners for markers, etc }, // end page init pageshow : function(evt) {
jQuery Mobile: Multi-Page Application with Separate Pages: Second Page not Getting Styled
Hello. We have a single page application with two views (essentially, a list of items and a details page for the selected item). Both views are in separate html files, and we’re using sammy.js to transition/navigate between the pages. Everything was working great until we tried to add jQuery Mobile to the mix. Now, when we navigate to the second page (the details page), jQuery Mobile is not styling the page. Our working app is not set up as described by jQuery Mobile’s multi-page template (i.e.,
several html pages with phonegap
Hi there, I still work such a few days with jquery mobile. So my first question is how and if it is possible to use several javascript files . For now I'm using a demo application from http://jquerymobile.com/ website which creates css, js and html code. But here only one html site is created. If I want to link to a second html page, I tried to use a seconf js files for that page but js is not loaded only the first loaded js files from index.html page is active, which can be used on different html
Next Page