Height of floating divs are zero at first time, but ok at second time
In jQuery Mobile, to get heights you should run your code in the pageshow event of the specific page that includes the columns: $(document).on("pageshow","#page1", function(){ var maxHeight = 0; var columns = $('.column'); $.each(columns, function (idx, obj) { console.log('Outter: ' + $(obj).outerHeight() + "\nInner: " + $(obj).innerHeight() + '\nRegular: '...
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
Try this : You can make all button in ui-grid-b div to blue and make clicked button to red $("#btnOvenA, #btnOvenB, #btnOvenC").click(function (event) { oven += $(event.target).attr('value'); //make all button blue first $(this).closest('div.ui-grid-b').find('button').css('color', 'blue'); //make clicked button red $(this).css('color', 'red'); }); JSFiddle Demo...
jquery mobile swipe stops if i swipe right on the first page and and left on the last page
The problem is that your vars prevPage and nextPage aren't undefined You may either check some page property like in if (prevPage.html() !== undefined) or add custom attributes like "data-first" and "data-last" to your first and last page and check them in your code like in <div data-role="page" id="home" data-first="true">...
Cannot create custom toolbar button that works on mobile
javascript,jquery,jquery-mobile,mobile,photoswipe
In order to achieve this functionality, you must edit hte photoswipe-ui-default.js file. Your custom button must have the class pswp__button--myCustomButtonName as well as pswp__button. <button class="pswp__button pswp__button--myCustomButtonName" id="CustomButton" style="background:none;" title="Custom" onclick="CustomClicked()"> <img src="~/CustomImage.jpg""> Inside the photoswipe-ui-default.js file, you'll see a list of controls: var _uiElements = [ { name: 'caption',...
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
The popup seems to be odd it's hard to replicate - Going to the exact link below and then clicking on the said "sign in" button seems to guarantee the behaviour. http://demos.jquerymobile.com/1.3.2/widgets/popup/#&ui-state=dialog I believe the solution below may be related it fixes other fun issues with the slide transition. (only...
jQuery Mobile: Position of external panel / always visible?
javascript,jquery,html,css,jquery-mobile
The exact CSS and HTML from the JQM Demo Page is (see below). The JQM Demo page shows the panel below the header if the browser window is larger than 60em --- 960px and in my demo i set it 40em External Panels go at end of data role page(s)....
Jquery mobile dialogbox without changing page
I think you are mixing up the popup widget and dialog pages. If you don't want to change page, use the popup widget like this: function show(head, title, msg) { head = head ? head : ""; title = title ? title : ""; msg = msg ? msg :...
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 opened an issue with JQM and this is the response I got. Turns out it's a Chrome fullscreen browser bug, nothing to do with JQM... The only way i could think to attempt to work around this would be something like http://jsbin.com/kagidi/9/edit?html,css,output which fixes the issue on chrome homescreen...
Disable swipe event when using popup in jquery mobile
javascript,jquery,jquery-mobile
Using event.stopPropagation(); worked for me. I added swipeleft and swiperight handlers on my popup div and used event.stopPropagation(); inside it. $('#mypopup').on('swipeleft swiperight', function(event) { event.stopPropagation(); }); ...
jquery mobile listview - touchstart event to fire on element
javascript,android,jquery-mobile
You can move to the next page with transition using script as well: http://api.jquerymobile.com/pagecontainer/#method-change <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_1a" href="#">ONE</a> TEST </li> <li id="tg_2"><a id="tg_2a" href="#">TWO</a> FOO </li> </ul> $(document).on("click", "li", function(e){ var id = $(this).prop("id"); if(id && id.substr(0,3) == "tg_") { var...
targeting jquery ui buttons
jquery,jquery-ui,jquery-mobile
You can add the class ui-btn-icon-notext to the button to have it hide the text, then add another span to ui-btn-inner for the icon: $("[id*=new]").addClass("ui-btn-inline ui-btn-icon-notext"); $("[id*=new]").find(".ui-btn-inner").append('<span class="ui-icon ui-icon-plus ui-icon-shadow" ></span>'); DEMO Click the Change to Icon button in the demo to see it change....
Dynamically changing select value of jQuery Mobile select box
Updated your JS fiddle: http://jsfiddle.net/rhLt2sxj/5/ var wid_settings = ["Banana", "Orange", "Apple", "Mango"]; wid_settings_refresh(); function wid_settings_refresh() { var index; for (index = 0; index < wid_settings.length; index++) { $('#stylex').append('<option value=' + index + '>' + wid_settings[index] + '</option>'); } $('#stylex').val(3); //$('#stylex').listview('refresh'); //not necessary } ...
JQuery - Detect dimension of screen in cm/inches or alternative for displaying on mobile platforms
You simply need to set the viewport on your website: <meta name="viewport" content="width=device-width, initial-scale=1"> ...
JQuery Mobile - How to treat form data in second page?
To achieve what you need in an easy way, I suggest you use multiple pages in one html (to avoid server side coding - unless you really need that) http://demos.jquerymobile.com/1.2.1/docs/pages/multipage-template.html Working demo with your code in one html: http://jsbin.com/nudoje/7/edit?output $(function(){ var doc = $(document), one = $('#one'), two = $('#two'),...
jQuery mobile radio button changed event always fires even if already checked
jquery,jquery-mobile,event-handling,radio-button,onchange
jQuery Mobile actually replaces the radio inputs with label dom elements, and it adds click handlers to these labels that then trigger the change event on the underlying radio buttons. You can add a value attribute to each radio button: <fieldset data-role="controlgroup" data-type="horizontal" style="text-align: center" > <input name="radio" id="radio-a" type="radio"...
jquery mobile load external page, events not getting triggered
jquery-mobile,jquery-mobile-pageshow
To attach the pagebeforeshow handler to a page not loaded into the DOM yet, you must use event delegation: https://learn.jquery.com/events/event-delegation/ jQuery(document).on("pagebeforeshow", "#test1" function(event) {... ...
How to get popups to be defined outside the page they're used in?
To use a popup outside the page div within JQM you must instantiate the popup on DOM ready and enhance its contents. To do this you should have the following function: $(function(){ $(".class_myPopup").enhanceWithin().popup(); }); that is run when you load your site... I have it in my bespoke JS script...
JQuery Mobile listview inside a panel
jquery-mobile,jquery-mobile-listview,jquery-mobile-collapsible,jquery-mobile-panel
You are mixing listviews and collapsibles in a way that jQM was not designed to deal with. However, you can make this look 'right' with some CSS. <ul id="tabTwoList" data-role="listview" data-inset="true" data-shadow="false"> <li> <div data-role="collapsible" data-inset="false" data-iconpos="right"> <h2>Birds</h2> <ul data-role="listview" data-theme="b"> <li><a href="#">Condor</a></li> <li><a href="#">Eagle</a></li> <li><a...
jquery design after dynamically loading
javascript,jquery,html,jquery-mobile
I don't know what you want to achieve here. But you can dynamically append data in listview in Jquery Mobile using below code. HTML: <div data-role="content"> <ul data-role="listview" class="devices" id="myresult" data-theme="b"> </ul> </div> Javascript : In very simple and easy way. function addDevice(address,name,rssi) { var result =""; for (int i...
error “The connection to the server was unsuccessful. (file:///android_asset/www/index.html)” in codovar and jqury
android,jquery,cordova,jquery-mobile
I recommend first, to check your config.xml there is a section where you can specify the start page of your app. It must be ponting to "index.html" and I think your page is called "Login.html" (Just a guess) The section looks like this <content src="your_page.html" /> just change that section...
jQuery Mobile, Select not showing selected option until clicked
javascript,jquery,html,ajax,jquery-mobile
From the demo page (also see documentation): If you manipulate a select via JavaScript, you must call the refresh method on it to update the visual styling. Here is an example: var myselect = $("select#foo"); myselect[0].selectedIndex = 3; myselect.selectmenu("refresh"); If you add $("select").selectmenu("refresh"); to the end of your fiddle, it...
How do I know how many physical inches a device screen has?
javascript,android,ios,css,jquery-mobile
How do I know how many physical inches a device screen has? You can't. Is "pixels-per-inch" always 96 for every type of device? No, not remotely. Not only do you have the issue of Retina displays, but if I have a notebook computer with a screen resolution of 1280x768,...
How to capture events for dynamically created data-role=“collapsible”
You have to use event delegation. The container handles the event and delegates it to the collapsible. In this way the collapsibles do not have to exist at the time the handler is created. $(document).on('collapsibleexpand', '.my-collaspible', function () { alert('herere'); }); Updated FIDDLE ...
Hidden overflow showing in mobile browser but not in Desktop Browser
javascript,jquery,html,css,jquery-mobile
Try adding this: #main_body { overflow-x: hidden; } ...
jquery mobile pass parameter along with div id href
javascript,jquery,html,jquery-mobile,parameters
I asume you want to get data from DB using ajax and put content in desired div. Use this $('a').click(function(e){ e.preventDefault(); var target = $($(this).attr('href')); var url = your_url_here; $.ajax({ url: url, success: function(value){ target.html(value); } }) }) ...
onClick event in jQuery mobile do not work
javascript,jquery,jquery-mobile
Through a mobile browser, a tap is registered differently than a click so for your buttons you have to change their pointers to cursors through CSS #start, #prev, #next{ cursor: pointer; } ...
Get selected columns for a columntoggle table
There is nothing built-in to do this. Here is one way to do it: jQM creates a column toggle popup with a checkbox for each column assigned a data-priority. The popup takes the id of the table plus '-popup', so you can access the checkboxes with this selector: $("#myTableid-popup .ui-checkbox...
jQuery mobile - generating html dynamically not working with iframe
jquery,html,jquery-mobile,iframe,overlay
For jQM you should append to a page div and not the body. A page looks like this: <div data-role="page" id="page1"> <div data-role="header"> <h1>My page</h1> </div> <div role="main" class="ui-content" id="mainCont"> </div> </div> Next instead of document.ready, use the jQM page events like pagecreate, And after adding the popup to the...
Display Mobile Compatible when it's on mobile
This is using Media queries: @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { } Check This link for more details is just css style when the website on mobile, for example you want a div not shown on mobile device you can do this: @media...
Add a background behind loader to hide loading screen
javascript,jquery,jquery-ui,jquery-mobile
<div style="position: fixed;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.3);text-align: center"><span class='ui-bar ui-overlay-c ui-corner-all' style="text-align:center;display:inline-block"><img width='50px' height='50px' src='http://www.shougun.it/images/loading.gif' style="display:inline"/><br><h2>Chargement en cours...</h2></span></div> Example here: http://jsfiddle.net/BramVanroy/qtfc83m2/ In your case this would be: setTimeout(function () {...
Use different library instead of jQuery Mobile for
javascript,jquery,jquery-mobile,widget
You can tell jQM to ignore the select by adding data-role="none" <select id="mySelect" data-role="none" placeholder="Select an option..." > <option value="">Select an option...</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option> </select> Here is a demo using the Selectize plugin for the select and other controls use...
jQuery Mobile Slider for dollar amounts
jquery-mobile,slider,jquery-ui-slider,jquery-slider
One way to do this is to hide the input and use your own textbox in its place. I have placed the slider markup within a named container and added an input to the container that will display the dollar amount: <div id="theDollars" class="dollar-slider"> <label for="mySlider">Dollars:</label> <input type="range" name="mySlider" id="mySlider"...
How is Facebook able to autoplay videos on mobile browsers
facebook,jquery-mobile,javascript-events,facebook-javascript-sdk,html5-video
Videos can only be started by user interaction. This is usually clicking a button but you can also use any of the touch events (https://developer.mozilla.org/en-US/docs/Web/API/Touch_events). To replicate the functionality, you can use touchmove to detect the user scrolling through the page and use it to trigger a play when the...
Change button size in Jquery Mobile with a specified class
jquery,css,html5,jquery-mobile
If you want to apply some other color to the button, you have to overwrite the default properties in .ui-btn class. For your safety purpose you can add one parent div above the button and refer the parent with this button, so that it will not affect globally. <div class="test">...
$(“:mobile-pagecontainer” ).pagecontainer( “change” not working on second time
From Pagecontainer documentation on options: allowSamePageTransition (default: false) By default, change() ignores requests to change to the current active page. Setting this option to true allows the request to execute. ...
Input OnClick is not recognized
javascript,jquery,html,jquery-mobile,iscroll
Just found the solution: There's a bug on IScroll that if the parameter click is enable then all the form elements, such as the submit button do not work with iScroll. So, I did this: myScroll = new IScroll(wrapper, { click: false, scrollX : false, scrollY : true, scrollbars :...
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
Have you tried using event delegation: http://learn.jquery.com/events/event-delegation/ This lets you put the event on the container and then delegate it to elements within the container whether they exist at design time or not. Change $('.editLink').on('tap', setCurrent); $('.deleteLink').on('tap', function() {... To $(document).on('tap','.editLink', setCurrent); $(document).on('tap','.deleteLink', function() {... ...
Constitution mobile Application-Android
php,android,mysql,jquery-mobile
If you already know how to make the server calls in Android, and if the database is going to be relatively simple to set up, I would recommend fetching the Constitution data to display in an ASyncTask. Otherwise, might as well just be extra careful with the initial release of...
Losing line break when displaying text
javascript,jquery,html,jquery-mobile
I see two obvious options. Which one is the right one for you depends on how much control over the formatting you want. Use the pre tag and the new lines will be respected. pre is for preformatted text and will use non-proportional font so it may not render as...
jQuery Accordion doesn't load unless I refresh the page
jquery-ui,jquery-mobile,accordion
Try calling $( ".selector" ).collapsibleset( "refresh" ); after it's created and before the page is shown. "Collapsibleset" is JQM's name for accordion....
jquery mobile button text switching between two text via click
javascript,jquery,jquery-mobile
It fails bacause your ID is always "lock". Check for text in element instead. Try something like this: $(".lockaction").click(function(e) { e.preventDefault(); if ($(this).text() === "Lock" ) { $(this).text("Unlock"); $(this).css("background-color", "red"); } else { $(this).text("Lock"); $(this).css("background-color", "white"); } postupdate(); }); Fiddle....
Snake Game with Mobile Button Controls
javascript,jquery,jquery-mobile,canvas,html5-canvas
AND TIME So basically you have some errors going on. Your first one is your styling. You really need to make your styles more flexible, but this will solve the right button problem I was having. .button-pad > div { z-index: 9999; width: 50px; } http://jsfiddle.net/34oeacnm/8/ $(document).on('click', '.button-pad .button', function(e)...
Is it possible to get transation flip effects when showing a div manually
jQM uses CSS transitions for this. for flip, you can use the existing classes called ".flip .in" to flip in and ".flip .out" to flip out. $('#target') .append('<span>1. Append</span>') .prepend('<span>2. Prepend</span>') .before('<span>3. Before</span>') .after('<span>4. After</span>') .show() .addClass("flip in") .one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){ $(this).removeClass("flip in"); }); You use addClass...
Javascript, Array of Objects?
javascript,oop,jquery-mobile,mobile
It honestly depends what you want to do with this array If you are going to send it via an XMLHTTPRequest then I'd say you should use JSON format. var arr_of_objs = [{},{}]; //fill it up however you need it If this array is going to consist of objects with...
Is there a “New” icon built into jQuery Mobile?
I used a static image and padded the button text to make room.
jQuery mobile Multiselect doesn't update selected attribute
javascript,jquery,html,jquery-ui,jquery-mobile
JQuery Mobile by default will not update the selected attribute in response to the user's input. You can keep the selected values in sync with the attributes with the following code. $(function () { $('select').on('change', function (evt) { var options = $(evt.target).children('option'), current; for (var i = 0; i <...
Change the width of a SINGLE JQuery Mobile Input field?
Instead of directly setting the class on the input,jQM provides a data-attribute for inputs called data-wrapper-class (api doc: http://api.jquerymobile.com/textinput/#option-wrapperClass). This allows you to apply a class directly to the outermost wrapping DIV that jQM adds when enhancing the textbox. <input data-wrapper-class="address" type="text" name="address" id="basic" placeholder="Street Address, City, State" /> Working...
Add buttons to a specific page
javascript,jquery,html,jquery-mobile
You can add another parameter to the "on" function, specifying that it should only trigger for a certain page (or certain class of pages - you can use the entiry jQuery selector syntax there): $(document).on("pagebeforecreate", "#registration", function() { ...
Javascript won't load on links with jQuery mobile included
javascript,python,html,jquery-mobile,flask
By default, jQuery uses Ajax to handle page requests. This allows for smooth transition between pages (without the page refresh feel), but it also means that only the body of the requested page will be loaded - and therefore no javascript libraries included in the header. Therefore all necessary javascript...
jquery mobile all the data attribute references does not work
jquery,html,css,cordova,jquery-mobile
In reference to your fiddle-link (https://jsfiddle.net/f0eurafv/1/): The problem is that you have bound a click-function to your <h2>-tags in which you manually fadeIn/fadeOut your different pages. In this case jQuery-mobile will not do the work for you (switching to the other page) and as a side effect it will not...
Different performance with Intel XDK
cordova,jquery-mobile,phonegap-build,intel-xdk
Most likely you build the app with the usual Android build, while the App Preview uses the Crosswalk Android build for the preview, which is much faster for Android < 4.3. Build your app with 'Crosswalk for Android', you'll get the same performance. :)...
Jquery mobile Deeplinking (sort of)
I have Figured the answer out with some time to think about it. I'll add the answer for others to use. Script / js : function myFunction(val) { setTimeout( function(){ window.location.href = ""+ val +""; } , 1000 ); } link: <a class="ui-link" href="#Abstract" onclick="myFunction('#abstractday1')" data-ajax="false">Abstract Day 1</a> Happy Coding...
Android 4.4.4 WebView in onPageFinished() getTitle() returns page URL?
Because of the Android Chromium WebView bug (https://code.google.com/p/chromium/issues/detail?id=481570) I could not use onReceivedTitle() callback in setWebChromeClient() for Android versions 4.4 and later. Instead I created a workaround using the onPageFinished() callback of setWebViewClient(). This however appears to have a bug in Android 4.4.4 where sometimes the page URL is returned...
jQuery mobile Listview overflow not working
javascript,jquery,html,jquery-mobile
The ul actually is scrollable. The reason that you are not seeing the scrollbar is because the elements haven't exceeded the maximum height. When you limit the ul height and the elements can no longer be contained, then the scrollbar will appear. Take a look at this fiddle....
Unable to programatically check a checkbox when using jQuery Mobile
javascript,jquery,jquery-mobile,checkbox
After the comments above, the conclusion is: $(cid).prop("checked", true); If it doesn't work and you're using below jQuery 1.6, try: $(cid).attr("checked","checked"); or $(cid).attr("checked", true); If it doesn't work (it should, though), just move with pure js: document.getElementById(response[i].name[0]).checked = true; EDIT! Now, the OP was absolutely RIGHT to open such a...
jQuery Mobile: absolute external panel on right side not working
javascript,jquery,html,css,jquery-mobile
I found the problem. Well, not really the problem, but at least the solution, thanks to Tasos Anastasiou: Setting the header position to fixed, e.g. with data-position="fixed" in the header div will make relative positioning work again on both panels :) Here is an updated, working jsFiddle: https://jsfiddle.net/vhkmok8o/...
Missing jQuery Mobile icons on Opera Mini
html,css,jquery-mobile,opera-mini
Icons on websites such as fontawesome and bootstrap often make use of using a custom font which is then setup by using the font-face CSS rule. font-face is not currently supported by Opera Mini. http://caniuse.com/#feat=fontface Reading the following link, it looks like Opera Mini does not allow custom fonts and...
How to save PhoneGap App
android,cordova,jquery-mobile,save,local-storage
Given some HTML markup like this: <html> <body> <div id="buttons"> </div> </body> </html> You could create a button and use local storage to save it like this: var myButton1 = "<button>My Button</button>"; window.localStorage.setItem("button1", myButton1); And then retrieve it and display it on the page like this: var myButton1 = window.localStorage.getItem("button1");...
Why this mobile navigation toggle not working properly?
javascript,jquery,css,jquery-mobile,toggle
Try this : <script type="text/javascript"> /* Mobile navigation toggle*/ jQuery(document).ready(function() { jQuery('.tm_menu_mobile #nav').hide(); jQuery('.menu_icon').click(function() { jQuery('.tm_menu_mobile #nav').slideToggle('fast'); return false; }); }); </script> ...
Changing button value of a jQuery mobile with a setTimeout function
First, instead of $(document).ready(function () {... Use the jQM page events like pagecreate: $(document).on("pagecreate", "#pageid", function () {... Other than that, changing the button text is as easy as updating the value of the input and then calling button("refresh") on the jQM button widget: $btn.val('Please wait...').button('refresh'); Putting it all together:...
Can't change skrollr-menu scroll speed (duration)
javascript,jquery,jquery-mobile,parallax,skrollr
The answer to my problem was .. of course .. a spelling error. Note the file names in the included scripts. <script src="parallax/js/skrollr.js"></script> <script src="parallax/js/skroller.menu.min.js"></script> <script src="parallax/js/_main.js"></script> The middle script had an unexpected "e" in the name, wasn't causing any errors, but also wasn't loading the file and so the...
Jquery functionalities are not working when i load the html data from a string into webview
android,jquery,html,jquery-mobile,android-webview
It took a lot of time to go through your html code and finally found the problem while checking through your complete format. The comments in your script tag is causing the problem, the comments are commenting out the rest of the script and html code hence its a formatting...
jquery not working for multiple but same class
javascript,php,jquery,html,jquery-mobile
jQuery("#slide-out-open") this binds to an id html attribute, which per the spec, you can only have one element bound to a specific id. I would suggest changing this to a class which can be selected multiple times. side-note: using .click is deprecated, and will only bind to elements that were...
Jquery Mobile: Horizontal Buttons, fill container
javascript,jquery,jquery-ui,jquery-mobile,mobile
Just remove the ui-btn-inline class. That class is if you DON'T want the buttons to fill the container. With that class gone, the grid solution will work. DEMO ...
What is the difference between '.scroll' and 'silentScroll'?
.silentScroll is used to scroll without triggering the scroll event, meaning you won't bind a function to run with silentScroll, instead you can scroll to a certain location in the page by clicking on a button or through any other action. With that said, when using .silentScroll, nothing will happen...
Undefined variable admob in PhoneGap AdMob plugin
android,ios,node.js,cordova,jquery-mobile
Your are using Cordova or PhoneGap command line tool locally, you need install Java and Android SDK first. If you don't want to install Android SDK locally, you can use PhoneGap Build service, which is a commercial cloud build service offered by Adobe. Or else you can try Intel XDK,...
jquery form inserting with php
php,jquery-mobile,mysqli,insert
Do below steps to resolve the issue : Add a new hidden field <input type="hidden" name="service" id="selected_service"/> Add onchange function to select box as <select name="selectmenu" required class="ui-bar-c slidedown" id="service" data-collapsed="false" onchange="onchangeservice()"> Replace your script into function function onchangeservice() { var service_option = $( "#service option:selected" ).text(); $('#selected_service').val(service_option); } Full...
Unexpected data representation
javascript,jquery,jquery-ui,jquery-mobile,local-storage
The problem is in the pageinit event handling. You are omitting the selector, so the handler is called twice (for home and for add pages), and in doing so you are calling $('#submitAdd').on('tap', addRun); twice, resulting in a double addRun call. Change the line with: $(document).on("pagecreate", "#home", function() { (pagecreate...
controlgroup('refresh') not working
You forgot to assign the <input> to each <label>: you must use the for attribute. See the updated JSFiddle...
How to open a jQuery Mobile popup programmatically and close it after 5 seconds
javascript,html,jquery-mobile,popup
Make sure your code is within a page event handler like pagecreate so that jQM has initialized the popup widget: <div data-role="page" id="page1"> <div data-role="header"> <h1>My page</h1> </div> <div role="main" class="ui-content"> <button id="btnpopup">Show Dynamic Popup</button> </div> <div data-role="popup" id="p" data-position-to="window" data-transition="turn"><p>This is a completely basic popup, no options set.</p></div> </div>...
Set same size of all controls in controlgroup div with jQuery Mobile?
javascript,jquery,css,jquery-mobile
It looks like they are the same size to me: If you have issues in displaying it, you can use the following CSS to reset the default styles: #Etc a {display: inline-block; line-height: 1; margin: 0;} If you want the same width's more easier. #Etc a {width: 120px; display: inline-block;}...
JQM: Correct touch event to use for navigation, that does not fire on finger scrolling
javascript,jquery,cordova,jquery-mobile,mobile
I ended up writing my own code to check screen tap locations on touch start and touch end, and to determine if it was a tap or a move.
Leaflet Map error on jquery mobile
Try calling setView at some stage. map.setView([0, 0], 18); or better yet: map.locate({setView: true, maxZoom: 18}) Also Looks like you are trying to call / get L.lngLng function with some kind of array index... try this instead: -- also note pageinit is deprecated in JQM 1.4+ map.panTo([39, -6.85]); ...
Parsing XML array using Jquery
javascript,jquery,xml,jquery-mobile
EMI and CustomerName are elements under json so you can use .find() to find those elements and then text() to get its value. $(data).find("json").each(function (i, item) { var heures = $(item).find("CustomerName").text(); var nbr = $(item).find("EMI").text(); console.log(heures); }); .attr() is used to get the attribute value of an element like in...
How to checked jquery mobile radio button set via code
From the picture I am assuming you are using jQM version 1.3.x, however this solution works with 1.4.x too. Assuming you have markup similar to this: <fieldset data-role="controlgroup" data-type="horizontal"> <legend>Font:</legend> <input type="radio" name="thefont" id="radio-1" value="arial" checked="checked" /> <label for="radio-1">Arial</label> <input type="radio" name="thefont" id="radio-2" value="verdana" /> <label for="radio-2">Verdana</label> <input type="radio" name="thefont"...
jQuery mobile data-role=“button” not formatting
After you load settings.html use enhanceWithin() to enhance the markup and css of the button. Give your div a class and enhance it after load Read more here -- https://api.jquerymobile.com/enhanceWithin/ Demo Take out the enhance to see that it does not render properly even when you append it https://jsfiddle.net/5es81kgd/ Code...
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
You don't need any plugin, just use the expand event on the collapsible: $(document).on("collapsibleexpand", "#coll2", function(event, ui) { $("#2wrapper").load('some-external-program-content.cgi'); }); ...By the way: it's good practice to avoid having IDs starting with a number (even if it's permitted in HTML5)....
Changing the value of a jQuery mobile button with a set time
many thanks to @ezanker who solved this question here --> Changing button value of a jQuery mobile with a setTimeout function Answer: $(document).ready(function () { var clicked = false; $('#wp-submit').on('click', function() { if(clicked == false) { var $btn = $(this); $btn.button('disable').val('Please wait...').button('refresh'); clicked = true; setTimeout(function() { $btn.button('enable').val('click me').button('refresh'); clicked...
JQuery Mobile content only shown on reload
The theme must be set on the element, as it isn't being applied from the parent page. I am not completely sure why though... This can be done by adding the data-theme attribute when you create the select element: $(document).ready(function () { $('<select>').attr( {'name': 'fuu','id': 'load-fuu', 'data-native-menu':'false', 'data-theme': 'a' }).appendTo('#headerPageThree');...
how to add 2 radio button horizontal to listview in jquery mobile
jquery,listview,jquery-mobile,radio-button
You could use absolute positioning: <ul data-role="listview" data-inset="true" class="myCustomUL"> <li data-icon="false"> <a href="#"> Accura </a> <div class="cust-btns"> <fieldset data-role="controlgroup" data-type="horizontal"> <input type="radio" name="radio-choice-h-1" id="radio-choice-h-1a" value="on" checked="checked" /> <label for="radio-choice-h-1a">One</label> <input type="radio" name="radio-choice-h-1" id="radio-choice-h-1b" value="off" /> <label...
issue with panel data-display push
Why not use external panels: http://demos.jquerymobile.com/1.4.5/panel-external/ See similar question: jQuery mobile - Panels with multiple internal pages If you really want to load an external html panel, you should use the jQM pagecreate event of each page and have unique IDs for each panel on each page. Also, on load...
Change the Position of Jquery Mobile Range Slider values field
The css for those inputs with the numbers is input.ui-slider-input. However its better if you hide the original ones and record the values to display in a separate div. Demo A https://jsfiddle.net/fvbyh3hh/ CSS input.ui-slider-input { float: none !important; margin-left: 23%; display:inline-block !important; } Demo B https://jsfiddle.net/aeg0p5kw/ HTML addition <div class='range1'>0...
Sortable & Droppable issue with 'connectToSortable' changes DOM structure
jquery,jquery-mobile,drag-and-drop,draggable,sortable
I ended up solving this issue by completely removing the droppable zone and jQuery .droppable call from the script entirely and relying only on .draggable and .sortable. You can view the finished working demo here: http://jsfiddle.net/hurq5qre/ I needed to ad some min-height to the sortable container in order to create...
jQuery mobile panel doesn't close fully only on Android browser
javascript,android,jquery,html,jquery-mobile
Look like jQuery UI bug, for 1.4.2 it can not be reproduced and it reproduced for 1.4.5. Test on my Galaxy S4 The main difference in your case is in сss properties of class .ui-panel-closed: /* 1.4.5 */ .ui-panel-closed { width: 0; max-height: 100%; overflow: hidden; visibility: hidden; left: 0;...
fixed footer with windowsphone 8.1, cordova and jquery mobile not working correctly
cordova,jquery-mobile,windows-phone-8.1,windows-phone-8-emulator
I had similar problems with Windows Phone 8. I didn't manage to fix the problem from the left screenshot in the app with visible status bar, so I set Fullscreen to true in config.xml <preference name="Fullscreen" value="true" /> After that, I had still issues with bottom menu being placed too...
Using jQuery to Popup iFrame from URL
javascript,jquery,html,jquery-mobile,iframe
$(#framecontent).attr("src", postObj.url); needs to be $('#framecontent').attr("src", postObj.url); If you don't understand why, go check http://www.w3schools.com/jquery/jquery_selectors.asp It can be an other thing too, but without a complete code it's hard to figure what....
jquery mobile 1.2.0 blank screen in chrome Version 43.0.2357.81
Already has an answer. Check out my answer from here Animation end webkitend bug Your better off moving to the latest version. edit To fix - just add somewhere before loading jquerymobile.js - // Override of $.fn.animationComplete must be called before initialise jquery mobile js $(document).bind('mobileinit', function() { $.fn.animationComplete =...
EnhanceWithin() is not working
Just change the last line to $posans.listview("refresh"); API DOC: http://api.jquerymobile.com/listview/#method-refresh Updated FIDDLE ...
How to centre button icons in jQuery Mobile grid
add display: inline-block; for .ui-grid-b button .ui-grid-b button{ display: inline-block; } Example http://jsfiddle.net/soledar10/o27dvfmo/...
jQuery mobile elements not aligned center in div
jQuery Mobile provides a data-wrapper-class attribute for inputs which applies a CSS class to the wrapper DOM elements jQM creates when initializing its widgets. Therefore you can apply a centering class with this attribute HTML: <div data-role="page"> <div class="login"> <img id="logo" class="logoportrait" src="img/logo.png" alt="" /> <br /> <br /> <!--...