Menu
  • HOME
  • TAGS

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

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

Change the width of a SINGLE JQuery Mobile Input field?

jquery-mobile

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

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

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

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

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

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

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 - Custom listview height changes on click

css,jquery-mobile

Luis is right about the min-height from the jQM CSS file. You need to override it, but also remove top and bottom padding on the link as that causes the height issue on click: .custom_link { padding-left: 50px !important; padding-top: 0; padding-bottom: 0; line-height: 50px; max-height: 50px; min-height: 0 !important;...

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

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

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

How to capture events for dynamically created data-role=“collapsible”

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

JQuery Mobile content only shown on reload

javascript,html,jquery-mobile

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

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

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

Use different library instead of jQuery Mobile for