How to Programming with Jquery-mobile

android,cordova,jquery-mobile,save,local-storage

Try adding this: #main_body { overflow-x: hidden; } ...

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

How to save PhoneGap App

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

Display Mobile Compatible when it's on mobile

css,jquery-mobile,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...

jquery design after dynamically loading

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

jQuery Mobile: absolute external panel on right side not working

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

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

javascript,jquery,jquery-ui,jquery-mobile

Your solution works on JSFiddle :Fiddle. Maybe you can try the JQueryMobile function .button('disable') : $(document).ready(function () { var clicked = false; $('#wp-submit').click(function() { if(clicked === false) { $(this).button('disable'); // $(this).attr('disabled','disabled'); clicked = true; } }); }); Looks like refresh is a normal thing to do (From JQueryMobile website): If...

Add a background behind loader to hide loading screen

<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 () {...

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.

jQuery mobile data-role=“button” not formatting

jquery-mobile,button

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

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

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

javascript,jquery,html,jquery-ui,jquery-mobile

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

jQuery mobile Multiselect doesn't update selected attribute

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

jQuery mobile elements not aligned center in div

jquery,css,jquery-mobile

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

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

Get selected columns for a columntoggle table

jquery-mobile,jquery-mobile-listview,jquery-mobile-collapsible,jquery-mobile-panel

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 listview inside a 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...

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

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

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

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

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

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

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 capture events for dynamically created data-role=“collapsible”

jquery,html,jquery-mobile

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

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

Add buttons to a specific page

jquery-ui,jquery-mobile,accordion

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() { ...

jQuery Accordion doesn't load unless I refresh the page

Try calling $( ".selector" ).collapsibleset( "refresh" ); after it's created and before the page is shown. "Collapsibleset" is JQM's name for accordion....

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

javascript,jquery,jquery-mobile

I used a static image and padded the button text to make room.

Jquery mobile dialogbox without changing page

cordova,jquery-mobile

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

onClick event in jQuery mobile do not work

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

jQuery mobile appyling on every web page

html,jquery-mobile

jQuery mobile framework is designed to be "single page", here's their description from here jQuery Mobile is designed to work with simple page linking conventions. Essentially, you can link pages and assets as you normally would, and jQuery Mobile will automatically handle page requests in a single-page model, using Ajax...

Can't Add Up Radio Button Values with jQuery

javascript,jquery,html5,jquery-mobile,javascript-events

Here's some simplified code. You should be checking to see if the radio buttons have been checked off. http://jsbin.com/ribupakiwa/2/edit?js,output Only going to show the JS here. $( ".submit-button" ).click(function() { event.preventDefault(); calculateTotal($(this).closest('table')); }); function calculateTotal($tab) { var sum = 0; $tab.find('input:checked').each(function() { sum += parseInt($(this).val()) || 0; }); $(".total").html(sum.toFixed(2)); }...

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

Losing line break when displaying text

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

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,python,html,jquery-mobile,flask

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

Javascript won't load on links with jQuery mobile included

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

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

jquerymobile pagecontainerbeforeshow only run when refresh page

cordova,jquery-mobile

When jQuery Mobile loads buscar.html, it is actually just getting the contents of the first data-role="page" div and inserting that into the current page. This is the default AJAX navigation: http://demos.jquerymobile.com/1.4.5/navigation-linking-pages/ So the script in buscar.html is not run and the image in the navbar is big because your index.css...

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 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 Listview overflow not working

javascript,jquery-mobile,jquery-mobile-collapsible

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

How to edit Content inside Collapsible Widget?

Seeing as you are using jQuery anyway, why not use it: $("#solar_current").html("Solar Current = 13"); You can run this in the pagecreate event of the page. If you want to use plain javascript, just remove the "#" as Steve Hynding suggested.: document.getElementById("solar_current").innerHTML = "Solar Current = 13"; ...

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

jQuery Mobile: Position of external panel / always visible?

javascript,html,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 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');...

Is it possible to remove pagecreate event?

jquery,jquery-mobile,event-handling,radio-button,onchange

Yes, you use on() to create the handler and off() to remove the handler. $(document).on("pagecreate","#page1", function(){ }); $(document).off("pagecreate","#page1"); ...

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

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

issue with panel data-display push

javascript,jquery,html,jquery-mobile,iscroll

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

Input OnClick is not recognized

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

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

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

javascript,jquery,jquery-mobile,parallax,skrollr

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

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

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

jquery mobile swipe stops if i swipe right on the first page and and left on the last page

cordova,jquery-mobile,phonegap-build,intel-xdk

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

Different performance with 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. :)...

controlgroup('refresh') not working