i am using Jquery mobile slider.I want make the slider in steps.
so i have tried with this.
<div data-role="page">
<div data-role="content">
<label for="slider" class="ui-hidden-accessible">Input slider:</label>
<input type="range" name="slider" id="slider_0" value="25" min="0" max="100" step="25" />
</div>
the slider is sliding well but it is not moving in the steps.
eg: 100/25 =4
so it should point only at 25,50,75,100 but its sliding every where.
I have seen an live example at this place. its working fine here but why its not working for me.
http://code.jquery.com/mobile/latest/demos/docs/forms/slider/index.html
here is my jsfiddle
http://jsfiddle.net/chakrirajni/pfNDB/
Thanks,
This Bug has been Fixed in Latest version JQuery Mobile Libraries mentioned below
1)stable version - 1.0.1 http://jquerymobile.com/blog/2012/01/26/jquery-mobile-1-0-1-released/
2)Unstable build - 1.1.0 RC1 http://jquerymobile.com/blog/2012/02/28/announcing-jquery-mobile-1-1-0-rc1/
Ya got it.
I have used these likns.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"> </script>
its working fine.
but i dont want to see the textbox beside the slider. how can i do that in this version in
my code looks like this.
<label for="slider" class="ui-hidden-accessible">
Input slider:</label>
<input type="range" name="slider" id="slidstep" step="25" value="0" min="1" max="100"/>
Thanks for ur help.
Related
I am currently having trouble with focus on my inputs for iOS. It works perfectly on Android, but for some reason something is going with iOS where sometimes it takes multiple clicks before it actually registers a click event on the input and opens the keyboard with focus in the input and other times it gives focus to some random element behind the visible one so the keyboard opens, but the input field doesn't have focus. We have multiple inputs that are hidden behind the visible one, but I don't think that should matter.
Ionic info:
Your system information:
Cordova CLI: 6.2.0
Ionic Framework Version: 1.3.1
Ionic CLI Version: 2.1.1
Ionic App Lib Version: 2.1.1
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X Sierra
Node Version: v6.3.0
Xcode version: Xcode 8.0 Build version 8A218a
A basic outline of our code can be found here: http://codepen.io/anon/pen/wzYEQk
<ion-view title="COMPANY" hide-back-button="true" can-swipe-back="false">
<ion-content class="background-cntr" delegate-handle="mainScroll">
SOME HTML CONTENT
</ion-content>
<ion-footer-bar>
<div class="list">
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text"/>
<input type="text" style="display:none;"/>
</label>
<button>Test</button>
</div>
</div>
</ion-footer-bar>
</ion-view>
Does anyone know how to solve this?
Remember adding this preference tag on my config.xml file before.
<preference name="KeyboardDisplayRequiresUserAction" value="false" />
This made the autofocus work before.
I have figured out the solution and to make it work better. Instead of having all the inputs within the footer, I add and remove them every time. That way there is only ever one input within the footer. This seems to work fairly well. The second thing I did was to handle the phantom keyboard case by add the following code to the controller.
window.addEventListener('native.keyboardshow', function(){
if (document.activeElement.nodeName !== "INPUT") {
var activeElement = document.querySelector("#chat_footer_inputs input");
if (activeElement) {
activeElement.focus();
$ionicScrollDelegate.scrollBottom(true);
}
}
});
JS
angular.module('ionicApp', ['ionic'])
.factory('focus', function($timeout, $window) {
return function(id) {
$timeout(function() {
var element = $window.document.getElementById(id);
if(element)
element.focus();
});
};
})
.controller('MyCtrl', function($scope, focus) {
focus("myInput")
});
HTML
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Input trouble on iOS</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="MyCtrl">
<ion-view title="COMPANY" hide-back-button="true" can-swipe-back="false">
<ion-content class="background-cntr" delegate-handle="mainScroll">
SOME HTML CONTENT
</ion-content>
<ion-footer-bar>
<div class="list">
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text"/>
<input type="text" style="display:none;"/>
</label>
<button>Test</button>
</div>
</div>
</ion-footer-bar>
</ion-view>
</body>
</html>
I'm using current versions of jQuery:
<!--jQuery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<!--jQuery UI-->
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<!--jQuery Mobile-->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://
I have the following HTML (which I copy-pasted from docs to ensure correctness):
<div id="form-pay" data-role="fieldcontain">
<form action="mailer.php" method="post">
<label for="basic">Text Input:</label>
<input type="text" name="name" id="basic" data-mini="true" />
</form>
</div>
Everything is working fine with buttons, accordions and animations, but for some reason forms like the above are not working. They just show up unstyled. Is there any initialization I need to do? The docs say forms are auto-initialized.
Am I missing anything?
jQuery Mobile 1.2 (1.2.0) works with versions of jQuery core from 1.7.0 to 1.8.2.
Therefore change jQuery to ver 1.8.2 (or 1.8.3)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
jsFiddle
or use jQuery migrate if you for some reason need ver.1.9.X
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
jsFiddle
I am new to knockout, I have found an example of checkbox binding which could be very useful in my website.
Link to the example: http://knockoutjs.com/documentation/checked-binding.html
I tried to apply it to my page but it didn't work, then I tried to copy this example without changing anything but still it didn't work. I tried it on different browser(Chrome, Firefox, IE) and including different version of knockout libraries, but still it didn't work.
I have no other idea what I am doing wrong, please help!
Here is the code of this example:
<!DOCTYPE html>
<head>
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js'></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dokument bez tytułu</title>
</head>
<body>
<p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam" /></p>
<div data-bind="visible: wantsSpam">
Preferred flavors of spam:
<div><input type="checkbox" value="cherry" data-bind="checked: spamFlavors" /> Cherry</div>
<div><input type="checkbox" value="almond" data-bind="checked: spamFlavors" /> Almond</div>
<div><input type="checkbox" value="msg" data-bind="checked: spamFlavors" /> Monosodium Glutamate</div>
</div>
<script type="text/javascript">
var viewModel = {
wantsSpam: ko.observable(true),
spamFlavors: ko.observableArray(["cherry","almond"]) // Initially checks the Cherry and Almond checkboxes
};
// ... then later ...
viewModel.spamFlavors.push("msg"); // Now additionally checks the Monosodium Glutamate checkbox
</script>
</body>
</html>
What you are looking at is a fragment, not a fully working example. You need to do a couple of things.
You need to applyBindings:
ko.applyBindings(viewModel);
And you need to do that after the DOM has loaded (or knockout will get very upset).
Here's an example
I've updated my example a little to make it easier to see that the checkboxes are, in fact, bound. There's a list of the spamFlavors under the list of checkboxes that will change as you check and uncheck the checkboxes.
I'm working on a Pyramid (python) web application, and trying to create a responsive-ish design that will gracefully switch between a desktop-sized browser and a mobile browser. I'm wanting to use Twitter Bootstrap for the desktop UI and jquery mobile for the mobile UI.
My CSS is like this:
#charset "utf-8";
#import url("http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css") (max-width: 480px);
#import url("css/bootstrap.min.css") (min-width: 481px);
This actually seems to be working well in switching styles on the fly as the window resizes. If it's a larger window, it shows my desktop UI styles, and once it hits the "mobile" threshold it shows the jquery mobile UI. Sweet.
My problem appears to be in my HTML/mako template, though. I've placed my .js includes at the bottom of the page. The important snippet is:
[...snip..]
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script src="${request.static_url('myapp:static/js/bootstrap.min.js')}"></script>
</body>
I have radio buttons with labels on the desktop UI like so:
<label>
<input type="radio" name="answer" id="1" value="1"> 1</label>
<label><input type="radio" name="answer" id="2" value="2"> 2</label>
<label><input type="radio" name="answer" id="3" value="3"> 3</label>
<label>
<input type="radio" name="answer" id="foo" value="foo">foo
</label>
When all .js includes are active, the actual radio input control is not inline with the label text; instead it appears to be set as a block element and is appearing onscreen on its own line after the label. I've tried tweaking the CSS to override the radio input styles but the best I can get so far is setting the radio type to inline but it's still appearing after the label, instead of before.
Buuuut, if I comment out the jquery mobile .js include:
[...snip...]
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<!--<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>-->
<script src="${request.static_url('myapp:static/js/bootstrap.min.js')}"></script>
</body>
then the desktop UI looks correct. Of course at that point I've lost my jquery mobile UI.
So what seems to be happening is something in the jquery mobile javascript is overriding the style includes, but I don't know what or why. Is there a way I can force things to not run the jquery mobile stuff at larger resolutions? Any help or hints?
You may need to disable jquery mobile for these input fields:
from http://jquerymobile.com/demos/1.0.1/docs/forms/docs-forms.html :
if you'd prefer that a particular form control be left untouched by jQuery Mobile, simply give that element the attribute data-role="none". For example:
<label for="foo">
<select name="foo" id="foo" data-role="none">
<option value="a" >A</option>
<option value="b" >B</option>
<option value="c" >C</option>
</select>
Working with PhoneGap attempting to add a label and slider to an iOS iPad application, both the label and the slider will not appear on the page. The following is the code intended to generate the display:
<div data-role="fieldcontain">
<label for="quantity">Number of Cones:</label>
<input type="range" name="quantity" id="quantity" value="5" min="1" max="10" />
</div>
The above snippet properly produces:
Number of Cones:
<------|------->
but fails to display the label box with quantity initialized to 5.
What is the cause of this issue?