FAQ Database Discussion Community


jQuery Mobile: Position of external panel / always visible?

javascript,jquery,html,css,jquery-mobile
Since I do want to use the same panel on every page in a jQuery multipage html file, I'm interested in using the same code for every page. This should work with external panels. However, I do have a problem with the positioning: As far as I can see, an...

Add a background behind loader to hide loading screen

javascript,jquery,jquery-ui,jquery-mobile
How can one add a bgcolor behind the loader before a page is created just to hide the white screen before the page is loaded. this is my code. setTimeout(function(){ $.mobile.loading('show', { text: 'Chargement en cours...', textVisible: true, theme: 'a', html: "<span class='ui-bar ui-overlay-c ui-corner-all' ><img width='50px' height='50px' src='http://www.shougun.it/images/loading.gif' /><br><h2>Chargement...

Is it possible to remove pagecreate event?

jquery-mobile
I have a pagecreate declaration in my page. It is created each time I read a json file for each value in it. The problem is that if I read the json file 3 times (with a refreshing button), pagecreate is declared 3 times for each value. So I get...

How do I know how many physical inches a device screen has?

javascript,android,ios,css,jquery-mobile
I have a website that needs to distinguish between mobile phones, tablets, and ordinary laptops. Normally I could use an asp.net function to tell, but the complication is that I want tablets to be treated as NOT being mobile devices. Any device with a screen diagonal greater than 7.5 inches...

Updating a DIV inside a Collapsible in JQuery Mobile only when the Collapsible is opened (eg. load on demand)

html,jquery-mobile,external,jquery-mobile-collapsible
I'm trying to execute a call to an external program to create content in a DIV inside a collapsible in JQuery Mobile, to have some code run when a div in a JQM collapsible appears when the collapsible is opened. I'm trying to use the jquery.appear plugin (https://github.com/morr/jquery.appear) as follows:...

Hidden overflow showing in mobile browser but not in Desktop Browser

javascript,jquery,html,css,jquery-mobile
Here are the screenshots of my mobile browser and my desktop browser. My webpage has some overflow in x axis which I hid using overflow-x: hidden; Is there any way I can make my webpage render in mobile browser, the way it renders in desktop browser i.e. full width and...

jQuery mobile appyling on every web page

html,jquery-mobile
I am learning jQuery mobile. I have 3 webpages : Home, About & Contact Us. What i am doing is : <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> I just want to apply jQuery mobile features on home page not on other two. I have written this code only on...

Constitution mobile Application-Android

php,android,mysql,jquery-mobile
I am building a Constitution Mobile Application (Android) for my group. I want to seek ideas as to how to choose the appropriate method which will in a long way help my group and its users. I want to know which of the following is the best Creating static pages...

Jquery Mobile 1.4.5 virtual keyboard in the device hides the form inputs at the bottom of the page

javascript,android,jquery,html,jquery-mobile
I'm using JQuery Mobile 1.4.5 to build a web app. I have found an issue which I'm sure is either a browser or JQM bug when using Google Chrome homescreen (fullscreen) mode in Android (v.4.4.2). When I click on the Click Here!! collapsible header and select the text area, the...

Can't change skrollr-menu scroll speed (duration)

javascript,jquery,jquery-mobile,parallax,skrollr
I'm trying to implement skrollr-menu into my website. What I want it to do is scroll down to the very bottom when the button is clicked (which I've got working just fine. The problem is that no matter what I do, I cannot get it to go any slower than...

Cannot create custom toolbar button that works on mobile

javascript,jquery,jquery-mobile,mobile,photoswipe
I have the simple code: <button class="pswp__button" id="CustomButton" style="background:none;" title="Custom" onclick="CustomClicked()"> <img src="~/CustomImage.jpg""> </button> This works as expected on desktop browsers. When I switch to mobile though, I cannot get the event to fire when I tap the button. I've tried attaching every event handler I can think of: tap,...

This is for jQuery Mobile. Unable to disable my input button

jquery,jquery-mobile
I am trying to disable an input submit button. the problem is, with my below code the button only seems to disable when the page is refreshed. i tried using $(this).atrr('refresh'); so once the button has been disabled it should refresh it so it visually appears to be disabled any...

$(“:mobile-pagecontainer” ).pagecontainer( “change” not working on second time

jquery-mobile
On click of a button , i am reloading the same page this way (document).on('click', '.cancelyes', function(event) { alert('herree'); var uuid = '123'; var screen_id = '910'; var cust_id = '122'; var minimum_order = 133; var addreslabel = '222' $(":mobile-pagecontainer" ).pagecontainer( "change", "index.html?UUID=" + uuid + '&screen_id=' + screen_id +...

Jquery mobile dialogbox without changing page

cordova,jquery-mobile
I have to display dynamic popups in phonegap appliction.I made the popups dynamic using Jquery mobile and javascript but popup have white background throughout the application. Please help me to get this in correct form. Html code: <div id="popupMsgPage" data-role="popup" data-close-btn="right" data-theme="c" data-overlay-theme="c"> <div data-role="header" data-position="fixed" > <h1 id="popup-head">Delete Page?</h1>...

Is there a “New” icon built into jQuery Mobile?

jquery-mobile
I want to flag some menu items in my jQuery mobile site as being "New" by adding a flag or icon. Is there anything built in? I don't see any of the standard glyphs or icons that have anything.

Snake Game with Mobile Button Controls

javascript,jquery,jquery-mobile,canvas,html5-canvas
In this Snake game, I need the buttons to control the snake just like the arrow keys do. This will allow the game to be played on a mobile device. You can see i have code in there for the buttons, but they are not working properly and not controlling...

Popups fail in JQueryMobile 1.3.2 after update chrome version 43.0.2357.65 m

javascript,html,google-chrome,jquery-mobile,jquery-mobile-popup
Has the latest chrome version "43.0.2357.65 m" broken JQueryMobile 1.3.2 for anyone else? When I click a popup now it goes to the top of the page and the scroll bar dissapears. It was fine in previous version. The problem is affecting my applicaiton but is reproduceable on the JQueryMobile...

Is it possible to get transation flip effects when showing a div manually

jquery-mobile
Is it possible to get transation flip effects when showing a div manually , similar way as we get when using functins like $(':mobile-pagecontainer').pagecontainer("change", "create_an_account.html?UUID=" + UUID, { transition: 'flip' }); This is my fiddle http://jsfiddle.net/EwNRJ/2265/ Could you please let me know how to achieve this??...

jQuery mobile radio button changed event always fires even if already checked

jquery,jquery-mobile,event-handling,radio-button,onchange
I'm using a radio button group containing two radio buttons to dynamically change the content of my page depending on which radio button is checked. The content should be updated, when the selected radio button changes. Therefor i added an event handler to the radio buttons. html: <fieldset data-role="controlgroup" data-type="horizontal"...

JQM: Correct touch event to use for navigation, that does not fire on finger scrolling

javascript,jquery,cordova,jquery-mobile,mobile
I am building a cordova application. I have a page with multiple Navigation buttons on it (16). The nav buttons get wrapped to 2 buttons per line. This causes the page to be scrollable. I have an issue where when I scroll the page with my finger, the button I...

Using jQuery to Popup iFrame from URL

javascript,jquery,html,jquery-mobile,iframe
I have inherited some code and I am trying to add an enhancement that will open a popup style iframe with the URL. The way the code is laid out is there are different tab-panes within the html window and in the "content" tab it displays information in the #post-body...

How to save PhoneGap App

android,cordova,jquery-mobile,save,local-storage
currently I am developing an app using PhoneGap and JQueryMobile. By now, the functionality is pretty simple: All the user can do, is to create some buttons and dynamically add them to the screen. What I want to do now, is to make this list of buttons storable. On local...

Undefined variable admob in PhoneGap AdMob plugin

android,ios,node.js,cordova,jquery-mobile
It's difficult for me to explain my problem because my english is not good, hope you would understand. This is my first try to make a mobile game, all done and I want to show ads by AdMob. I have tried some PhoneGap AdMob plugins such as admob-phonegap , cordova-admob-pro...

Disable swipe event when using popup in jquery mobile

javascript,jquery,jquery-mobile
My application has a swipeleft and swiperight feature which brings up the navigation menu. The code looks like this. $(document).on("swipeleft swiperight", function(swipeEvent) { //my code here } In a page of the app I am using a jquery mobile popup to display an image. The problem I have is that...

jQuery Accordion doesn't load unless I refresh the page

jquery-ui,jquery-mobile,accordion
I am trying to use Accordion in my page, but it doesn't load unless I refresh the page. Here is the link: http://mzprojects.net/191stband/191stband.html click on the menu panel and click ensembles. The accordion does not work unless you refresh you page. Please look at the source code for the ensembles...

How to centre button icons in jQuery Mobile grid

jquery,css,jquery-mobile
I am trying to align button icons in jQuery Mobile grid. But nothing seems to be working. Currently, all three icons are left aligned by default. I want to align the left most icon "right", the centre icon "centre" and the right most icon "left". Below is my basic markup:...

Unable to programatically check a checkbox when using jQuery Mobile

javascript,jquery,jquery-mobile,checkbox
I have been trying to mark a set of checkboxes as checked using jQuery. I cannot seem to work out why. Javascript: function getProjects(course){ console.log("getProjects"); var data = { "fn" : "pLoad", "course" : course, "ajax" : "true" }; $.ajax({ type: "GET", url: SERVICE_URL, //Relative or absolute path to response.php...

Jquery mobile Deeplinking (sort of)

jquery,jquery-mobile
I am using multi-page jquery mobile and need to create a link from one "page" to content on another "page". Am I able to do it straight through <a> or do I need to add additional code? Code : <body> <div style="min-height: 880px;" class="ui-page ui-body-c" data-role="page" id="Welcome" tabindex="0" data-url="Welcome"> <!---...

Jquery Mobile: Horizontal Buttons, fill container

javascript,jquery,jquery-ui,jquery-mobile,mobile
Working on a mobile app, I am trying to create two buttons, that should grow and fill their container. So in portrait view, the two buttons should use up the entire width of their parent, and in landscape view, they should also grow to fill up their entire parent. I...

Jquery click event not working on mobile device

javascript,jquery,css,jquery-mobile,touch
I am trying to make the below JSFiddle work for tablet/mobile devices (e.g. 'on touch' as well as 'click'). https://jsfiddle.net/lkw274/7zt1zL0g/87/ <div class="user-navigation"> <a class="mobile-menu-new" href=""><span></span>Menu</a> </div> $(document).ready(function() { $(".user-navigation a.mobile-menu-new").click(function (e) { e.preventDefault(); $(".user-navigation a.mobile-menu-new").toggleClass("current"); }); }); .current { background: #F00;} Expected behaviour: On clicking 'Menu', either by touch...

jquerymobile pagecontainerbeforeshow only run when refresh page

cordova,jquery-mobile
I´m develop my first hybrid app, and i work with jquerymobile 1.4. the documentation suggests using method pagecontainer. Well, i need populate dynamically one select whit certains values of a xml file, before show the page. If debug app, this only runs when page recharge, not when open. (Chrome nav)....

Different performance with Intel XDK

cordova,jquery-mobile,phonegap-build,intel-xdk
I use Intel XDK to develop apps with HTML and Cordova. I use jQuery Mobile. My question is: Why if I debug app with XDK and an Android device I have a very good performance, and if I compile app into an .apk, same code works very very slow? Thanks...

When binding a single click event to multiple buttons, how can I make the clicked button do one thing and all the other buttons do another?

javascript,jquery,html,css,jquery-mobile
I've got three buttons within a ui-grid-b <div class="ui-grid-b"> <div class="ui-block-a"><button id="btnOvenA" style="width:100%" value="a">A</button></div> <div class="ui-block-b"><button id="btnOvenB" style="width:100%" value="b">B</button></div> <div class="ui-block-c"><button id="btnOvenC" style="width:100%" value="c">C</button></div> </div> whenever a button is clicked, I want to turn its text red. I want to turn the others text blue. My click event...

How to checked jquery mobile radio button set via code

jquery-mobile
I use jquery mobile for build a Phonegap application. I create any radio sets like this : I want to checked a radio in a switch case! switch (font_family){ case 'tahoma': $('#radio-1').checked(); ... } Can you help me?...

Javascript won't load on links with jQuery mobile included

javascript,python,html,jquery-mobile,flask
Edit: While trying to find the solution, the topic has changed a bit - TL;DR: See the answer. For all interested in the development of the topic, go on ;-) The title might be confusing, but I don't know how to put it in better words - let's say I...

Change button size in Jquery Mobile with a specified class

jquery,css,html5,jquery-mobile
I am designing a Mobile Apps using Jquery Mobile, I hope I can get the result like this, But what I get is this: I dont want to use .ui-btn in my css, I already define custom-btn. Below is the code. <!DOCTYPE html> <html> <head> <style type="text/css"> .ui-page { background...

jQuery mobile panel doesn't close fully only on Android browser

javascript,android,jquery,html,jquery-mobile
JSFiddle: http://jsfiddle.net/nbh1rn33/ I have a weird issue with jQm panel. An opened panel doesn't close fully. See below image: Strangely, this only happens on Android browser, and not on PC (Chrome, IE). Is this a bug with jQm or have I done something wrong? <!DOCTYPE html> <html> <head> <meta name="viewport"...

Display Mobile Compatible when it's on mobile

css,jquery-mobile,mobile
Please allow me to ask a silly question about Google's site(google.com). I have tested their site with computer browsers and smartphone browsers. Okay! Here is the question that i have, when the time i make the computer browser to a small screen, the layout of Google's site does not fit...

Sortable & Droppable issue with 'connectToSortable' changes DOM structure

jquery,jquery-mobile,drag-and-drop,draggable,sortable
I'm creating a a tool to build a form builder of sorts using jQuery UI .draggable, .sortable and .droppable features. The tool itself's does the following: Includes a list of component in which the user can include (drag) to create a form These components can be dragged into a section...

jQuery Mobile Slider for dollar amounts

jquery-mobile,slider,jquery-ui-slider,jquery-slider
I am wondering if anyone knows how to modify the jQuery Mobile Slider to show dollar amounts? Or at the very least so show 2 decimal points at all times. i.e. if a user selects 10 I want it to show 10.00 instead of 10. With my current HTML below,...

jQuery mobile Multiselect doesn't update selected attribute

javascript,jquery,html,jquery-ui,jquery-mobile
I have a jQuery mobile custom multiselect, but when I select one item we have the list of items on the HTML select tag, but it is not updated with the selected attribute. Using the Multiple selects example of the page: <div data-role="fieldcontain" class="ui-field-contain ui-body ui-br"> <label for="select-choice-9" class="select ui-select">...

What is the difference between '.scroll' and 'silentScroll'?

jquery,jquery-mobile
Just for my own knowledge, what is the real difference between jQuery .scroll and jQuery Mobile .silentScroll? I've read that silentScroll is used to scroll without triggering the scroll event, but what does really mean? And to add to that, why is silentScroll presumably better for mobile?

Change the width of a SINGLE JQuery Mobile Input field?

jquery-mobile
The other two answers on this question propose overriding div.ui-input-text {} However, I have multiple input fields on this page and also within my project. So those answers won't work as they would effect everything on my page or project. How can I modify a single text input? A class...

Populate data from mysql to ListView (JQuery Mobile) using ajax

ajax,html5,cordova,jquery-mobile
<div data-role="main" class="ui-content"> <ul data-role="listview" id="responsecontainer" > </ul> This is my html file. var output = $('#responsecontainer'); $.ajax({ url: 'http://192.168.1.28/mobile/db_select.php', dataType: 'jsonp', jsonp: 'jsoncallback', timeout: 5000, success: function(data, status){ $.each(data, function(i,item){ var landmark = '<li><a href="#"><h2>'+item.tr_issue+'</h2>' + '<p>'+item.tr_assign+'</p></a></li>'; output.html(landmark);...

error “The connection to the server was unsuccessful. (file:///android_asset/www/index.html)” in codovar and jqury

android,jquery,cordova,jquery-mobile
I created an app for android using cordova and jquery mobile. It works well when I test run the code using google chrome, but when I try to run it on android emulator using android studio in cmd (locate>cordova emulate android) it doesn't working. When i try to run it...

Use different library instead of jQuery Mobile for