FAQ Database Discussion Community


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 mobile all the data attribute references does not work

jquery,html,css,cordova,jquery-mobile
In my header i included <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.css"> <script type="text/javascript" src="js/jquery-1.11.2.js"></script> <script type="text/javascript" src="js/jquery.mobile-1.4.5.js"></script> and whenever I use for example data-role="page" the expected effect does not acquire. why would that happen? edit: https://jsfiddle.net/f0eurafv/1/ notice the text input in the login form...

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...

How to open a jQuery Mobile popup programmatically and close it after 5 seconds

javascript,html,jquery-mobile,popup
I want to open a jQuery Mobile popup programmatically and then close it after some seconds, here is my code : is there anything wrong, cause I'm not getting what I want to show $( "#p" ).popup( "open" ); setTimeout( function(){ $( "#p" ).popup( "close" ); }, 5000 ); <script...

jquery design after dynamically loading

javascript,jquery,html,jquery-mobile
I have a simple javascript App, which gives out some information of BLEs. Everything is working fine, but I have some problems with the JQuery Mobile Library. I want the whole App in simple JQuery Data-Theme="b". Since the List-View is created dynamically through the addDevice function, it's not working with...

How to get popups to be defined outside the page they're used in?

jquery-mobile,popup
According to this github: https://github.com/jquery/jquery-mobile/issues/4565 this issue is reportedly resolved yet I have tried to place a popup outside the div of the page a popup button is using latest jqm 1.4.5 and was unable to get the popup to work unless its popup is within the same div as...

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...

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...

jquery not working for multiple but same class

javascript,php,jquery,html,jquery-mobile
I have this jquery for my mobile menu, to change the class on click jQuery("#slide-out-open").click(function() { if( jQuery( this ).hasClass( "slide-out-open" ) ) { jQuery('#wrapper').css({overflow:"hidden"}); jQuery("body").addClass( 'js-nav' ); jQuery( this ).removeClass('slide-out-open').addClass('slide-out-close'); return false; } else if( jQuery( this ).hasClass( "slide-out-close" ) ) { jQuery('#wrapper').css({overflow:"auto"}); jQuery("body").removeClass( 'js-nav' ); jQuery( this...

Leaflet Map error on jquery mobile

jquery,jquery-mobile,leaflet
I'm adding a simple map on jqm. The issue I am getting in console is: GET http://a.tile.openstreetmap.org/NaN/0/0.png 404 (Not Found) JS: var map = L.map('map'); $(document).on("pageinit", function () { L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom: 18}).addTo(map); }) On a click function adding a Marker with: L.marker([39, -6.85]).bindPopup("test").addTo(map); map.panTo(L.latLng[39, -6.85]); Using leaflet 0.8. It seems...

Javascript, Array of Objects?

javascript,oop,jquery-mobile,mobile
I am a bit of a JS noob, but have good .net experience in my pocket. I am working on a mobile website/app, and I have collected some data similar to business listings from a custom web service. On .net, I would have, at this time, started building a custom...

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...

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"...

onClick event in jQuery mobile do not work

javascript,jquery,jquery-mobile
I am new to jQuery and have made a page with some buttons i want to do some actions when they are clicked. I have made a jsFiddle with my code. When I execute the code on my laptop with chrome, it works fine. But when I execute it from...

jQuery mobile Listview overflow not working

javascript,jquery,html,jquery-mobile
I have this HTML page. (I use jQuery mobile 1.3.1) It should be something like a little chat-window. The problem I have is that, when you look at the <li> elements, this <ul data-role="listview"> element should be scrollable. But, for some reason it simply isn't scrollable, because the content seems...

Get selected columns for a columntoggle table

jquery-mobile
I have a columntoggle table with some information in it. I would like to get what are the selected columns, to stock those values in a database and when the user logs back in, using those values to make the table load with the columns he has previously selected. Is...

Can't Add Up Radio Button Values with jQuery

javascript,jquery,html5,jquery-mobile,javascript-events
I'm trying to add up all the values of the radio buttons selected on Submit button press. It sometimes changes the 0 to a 200, but it isn't adding correctly. I'm not quite sure what is going on with this one, since the total amount sometimes changes, but isn't accurate....

Missing jQuery Mobile icons on Opera Mini

html,css,jquery-mobile,opera-mini
I'm creating elements like that: <a href="#nav-panel" class="ui-btn-left ui-btn ui-btn-c ui-corner-all ui-btn-icon-notext ui-icon-bars ui-alt-icon ui-nodisc-icon"></a> It works ok on browser like Chrome, Android Browser, Opera, etc. but on Opera Mini icons are not visible. It's just an empty space. jQuery Mobile version is 1.4.5...

jQuery Mobile: absolute external panel on right side not working

javascript,jquery,html,css,jquery-mobile
I want to use an external header and two external panels, one at the left, one at the right. The catch: The panels should be always visible on big screens. I had some problems positioning the panels with an external header (internal works fine), which I could solve for the...

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);...

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...

Changing the value of a jQuery mobile button with a set time

jquery,jquery-mobile
I am facing a very challenging problem due to my little knowledge in jQuery mobile. I have researched many solutions and implemented them but does not seem to work I have a button called click me When a user clicks on the button, the button becomes disabled and the text...

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:...

JQuery Mobile content only shown on reload

javascript,html,jquery-mobile
I have an index.html containing the following: index.html <html> <head>...</head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <div data-role="navbar"> <ul> <li><a href="#pagetwo" id="pagetwo">Page two</a> </li> <li><a href="#pagethree" id="pagethree">Page three</a> </li> </ul> </div> </div> <div data-role="page" id="pagetwo"> </div> <div data-role="page" id="pagethree"> <div...

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...

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...

text-align :center not working

jquery,html,css,jquery-mobile
I am using jquery mobile and have the following html and css: .ui-grid-a { padding: 0; margin: 0; margin-top: 15px; height: 380px; } .ui-block-a, .ui-block-b { padding: 0; margin: 0; height: 33.3%; } .ui-block-a a, .ui-block-b a { width: 50%; } .ui-bar-a, ui-bar { margin: 0 auto; padding: 0; height:...

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 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...

How to add new elements to the page via function calls, and attach event handlers to them, without specifying them inside the function?

jquery,jquery-ui,jquery-mobile
So I have an app. It's written on jQuery(UI & Mobile). I have this page structure: Main Page: <!-- Main Page --> <div data-role="page" id="home"> <header data-role="header" data-theme="a"> <h1>Running Tracker</h1> </header> <div data-role="navbar"> <ul> <li> <a href="#add" data-transition="fade" data-icon="plus">Add Run</a> </li> </ul> </div> <div data-role="content"> <h3>Welcome to the RunningTracker App</h3>...

How is Facebook able to autoplay videos on mobile browsers

facebook,jquery-mobile,javascript-events,facebook-javascript-sdk,html5-video
I realize that many questions have been asked about autoplay videos on mobile devices but before my question is marked as a duplicate, I must say that I looked through a lot of those questions and answers and I have not found a satisfactory answer. Mostly, all of the answers...

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,...

issue with panel data-display push

jquery,jquery-mobile
I'm just getting into jQuery Mobile - loving it but now hitting the learning curve. Basically I want a number of pages that call the same panel. I have the following. Most of it works. However every other "push" fails with the panel content disparaging at the end of the...

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.

Change the Position of Jquery Mobile Range Slider values field

jquery-mobile
I am using this code for jquery mobile range slider plugin. <div class="ui-field-contain"> <div data-role="rangeslider"> <label for="range-7a">Rangeslider:</label> <input name="range-7a" id="range-7a" min="0" max="100" value="0" type="range" /> <label for="range-7b">Rangeslider:</label> <input name="range-7b" id="range-7b" min="0" max="100" value="100" type="range" /> </div> </div> the result will display values at the both end of the slider.Is their...

targeting jquery ui buttons

jquery,jquery-ui,jquery-mobile
I am trying to change the jquery mobile ui button class into a plus sign. What I have used below. New code trying to use: $('[id*=new] span.ui-btn-inner').removeClass('ui-btn-inner').addClass('ui-icon-plus'); Below is the current code -- <td align="left"> <a href="javascript:submitAction_win0(document.win0,'$IF$new$0$$0');" tabindex="51" id="$IF$new$0$$0" name="$IF$new$0$$0" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" style="padding-top: 8px; padding-bottom: 8px;" data-corners="true" data-shadow="true"...

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...

Unexpected data representation

javascript,jquery,jquery-ui,jquery-mobile,local-storage
So I have an app, that allows you to add data, and then it displays all the data(still wip). So I made a Create and Read functionality so far using localStorage and jQueryMobile and jQueryUI. But for some reason when I switch between pages(main page/add data page), I see cloned...

Android 4.4.4 WebView in onPageFinished() getTitle() returns page URL?

android,jquery-mobile
I don't know if I am misunderstanding jQueryMobile or am I seeing a Chromium Webview bug. I have an Android app that uses a webview to display jQueryMobile content. When the user navigates within the DIVs of the page, in onPageFinished() I call getTitle() to retrieve the Html page title....

JQuery Mobile - How to treat form data in second page?

html,jquery-mobile
A friend of mine gave me some base jquery mobile code, hoping I could help him deal with the form, except I'm at first year of Uni and only really know Java, although I've spent the past few days trying to learn Jquery Mobile. My problem with this is I...

jquery mobile listview - touchstart event to fire on
  • element
  • javascript,android,jquery-mobile
    When I try and fire an event on a listview <li> item it seems that the whole element is not considered, but only the elements inside it: <ul data-role='listview' data-filter='true' data-filter-placeholder='Search Your Trucks..' data-inset='true' data-mini='true'> <li id=tg_1><a id=tg_2 href=#divdet>ONE</a> TEST </li> <li id=tg_2><a id=tg_2 href=#divdet>TWO</a> FOO </li> </ul> The function...

    jquery mobile pass parameter along with div id href

    javascript,jquery,html,jquery-mobile,parameters
    I have a jquery mobile app that uses 2 data-role=page divs. <div data-role="page" id="main"></div> <div data-role="page" id="det"></div> On the link to switch from main to truckdet I use <a href="#det">LINK</a> Is there a way to pass a parameter in the href so I can dynamically extract data from a database...

    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...

    Parsing XML array using Jquery

    javascript,jquery,xml,jquery-mobile
    I have stuck up with an issue of passing XML using Jquery. I am getting empty array while traversing to jquery.Please help me how to get datas from XML array. I have mentioned my code below. XML <?xml version="1.0" encoding="UTF-8"?> <json> <json> <CustomerName>999GIZA MID INSURANCEAND SERVICES PVT LTD</CustomerName> <mobiLastReceiptDate>null</mobiLastReceiptDate> </json>...

    Why this mobile navigation toggle not working properly?

    javascript,jquery,css,jquery-mobile,toggle
    I am trying to create a mobile navigation (toggle type) on a breaking point 768px. My mark up is: <div class="tm_menu_mobile"> <div class="menu_icon"> <div class="three_line"></div> <div class="three_line"></div> <div class="three_line"></div> </div> <div style="clear:both;"></div> <div id="nav"> <div class="navigasi_menu"> <div class="navigasi_list"> <div class="nav-menu"> <ul> <li class="page_item page-item-7"><a...

    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...

    Use different library instead of jQuery Mobile for