In Jquerymobile range slider, I can set a value from 0 to 100 and it will show 0 to 100. In my case, I would like to set the range from 0 to 100, and 100+. If the user pushes to end, instead of showing the value of 100, how can I show it as 100+?
The inputs in the jQM rangeslider are type="range". This type only accepts numbers, so the text '100+' cannot be set as the value of the input.
One workaround could be to just position a '+' next to the 100:
Working DEMO
In the rangeslider markup, I have added a <span> with a class of labelPlus:
<div data-role="rangeslider">
<label for="range-1a">Rangeslider:</label>
<input type="range" name="range-1a" id="range-1a" min="0" max="100" value="40" />
<label for="range-1b">Rangeslider:</label>
<input type="range" name="range-1b" id="range-1b" min="0" max="100" value="80" />
<span class="labelPlus">+</span>
</div>
The labelPlus class CSS initially hides the span but absolutely positions it in the correct spot:
.labelPlus{
display: none;
position: absolute;
right: 0px;
font-size: 14px;
font-weight: bold;
text-align: right;
width: 48px;
line-height: 30px;
margin-right: 18px;
margin-top: 8px;
}
Finally in javascript we handle the change event on the input and check to see if we are at 100. If so, show the span:
$("#range-1b").on("change", function(){
var val = $(this).val();
if (parseInt(val) >= 100) {
$(".labelPlus").show();
} else {
$(".labelPlus").hide();
}
});
I have created Fiddle.
$(function() {
$( "#slider" ).slider({
range: true,
min: 0,
max: 110,
slide: function( event, ui ) {
if(ui.value>100)
{
$("#ammount").text("100+")
}
else
{
$( "#ammount" ).text(ui.value );
}
}
});
});
Related
I have two datepickers on the same page the first one (start date) I want to disable all previous dates which I've managed to do. The second datepicker (end date) I want it to disable all previous dates from when the first date picker is selected.
I've got the following code:
The start date - this is working as intended.
<div class="field">
<%= form.label :startDate %>
<%= form.text_field :startDate, {class: "form-control custom datepicker"}%>
<script type="text/javascript">
$(".datepicker").attr('readOnly', 'true');
$(document).ready(function(){
$('.datepicker').datepicker({
minDate: 0,
yearRange : '+0:+1',
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
autoclose: true});
});
</script>
</div>
end date - I'd like it to disable all previous dates from when start date is selected
<div class="field">
<%= form.label :endDate %>
<%= form.text_field :endDate, {class: "form-control custom date"}%>
<script type="text/javascript">
$(".date").attr('readOnly', 'true');
$(document).ready(function(){
$('.date').datepicker({
minDate: 0 ,
yearRange : '+0:+1',
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
autoclose: true});
});
</script>
</div>
I've also got another date picker which keeps selecting today's date I don't want it to do this how do I disable this? This date picker goes back 70 years on the year it shows 1948 but today's date is selected so if the user selects a date without changing the year or month it picks today's date.
Thanks in advance for any help.
Don't need to write JS script twice, I think it will be some complex if you write script twice, you can this to write script only once, for example, see this below snippets.
I think it will help you.
$( document ).ready(function() {
$( function($) {
var dateToday = new Date();
var dates = $("#start-date, #end-date").datepicker({
defaultDate: "+2d",
changeMonth: true,
numberOfMonths: 1,
minDate: dateToday,
onSelect: function(selectedDate) {
var option = this.id == "start-date" ? "minDate" : "maxDate",
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
dates.not(this).datepicker("option", option, date);
}
});
});
});
label {
display: inline-block;
margin-bottom: 5px;
font-weight: 700;
}
.form-control {
border: 1px solid #ccc;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.book-now-form {
padding-top: 10px;
}
.book-now-form .form-group {
margin-right: 1.5em;
}
.book-now-form label {
font-size: 13px;
display: block;
color: #fff;
padding-top: 5px;
}
.book-now-form .form-control {
height: 25px;
line-height: 25px;
background: white;
display: block;
font-size: 12px;
color: #969696;
padding: 4px 6px;
}
.book-now-form #start-date, .book-now-form #end-date {
padding-right: 22px;
background: url(https://www.solodev.com/assets/booking-form/icon_calendar.png) no-repeat scroll 98% center rgb(255, 255, 255);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<form class="form book-now-form" role="form" id="widget_booking_form" name="widget_booking_form" >
<input id="campaign" type="hidden" value="visitflagler_topNavWidget" name="campaign"> <input id="clone_id" type="hidden" value="278" name="clone_id">
<!--check in element-->
<div class="form-group">
<label for="check-in">Check In</label> <!-- <input type="textfield" class="form-control" id="check-in" placeholder="12.20.2014"> -->
<input type="text" class="form-control" id="start-date" name="start-date" placeholder="mm/dd/yyyy">
</div>
<!--check out element-->
<div class="form-group">
<label for="check-out">Check Out</label> <!-- <input type="textfield" class="form-control" id="check-out" placeholder="12.27.2014"> -->
<input type="text" class="form-control" id="end-date" name="end-date" placeholder="mm/dd/yyyy" >
</div>
<!--submit-->
<div class="form-group">
<button name="Submit" href="#" class="btn btn-sm btn-success">Submit</button>
</div>
</form>
I'm stuck to customize size of md-datepicker! I use it in md-input-container but the size after the picker is shown up ,it takes all my screen size.Below is my code:
<md-input-container flex-xs>
<label>Start Date</label>
<md-datepicker ng-model="leave.start_date"></md-datepicker>
</md-input-container>
Do I need to include any original styles of this datepicker? Thank in advance!
Use the function for manipulate width and hide image of calendar as:
var app = angular.module('StarterApp', ['ngMaterial']);
app.controller('AppController', function($scope) {
$scope.initDatepicker = function(){
angular.element(".md-datepicker-button").each(function(){
var el = this;
var ip = angular.element(el).parent().find("input").bind('click', function(e){
angular.element(el).click();
});
angular.element(this).css('visibility', 'hidden');
});
};
});
CSS
This comes from how the date picker is build behind the scene
.inputdemoBasicUsage .md-datepicker-button {
width: 36px;
}
.inputdemoBasicUsage .md-datepicker-input-container {
margin-left: 2px;
}
.md-datepicker-input-container {
display: block;
}
.md-datepicker-input[placeholder] {
color:red;
}
.padding-top-0 {
padding-top: 0px;
}
.padding-bottom-0 {
padding-bottom: 0px;
}
HTML
<div ng-app="StarterApp" ng-controller="AppController" ng-init="initDatepicker();">
<md-content flex class="padding-top-0 padding-bottom-0" layout="row">
<md-datepicker ng-model="user.submissionDate1" md-placeholder="Start date" flex ng-click="ctrl.openCalendarPane($event)"></md-datepicker>
<md-datepicker ng-model="user.submissionDate2" md-placeholder="Due date" flex></md-datepicker>
</md-content>
</div>
I am using the lastest version of Select2. Want to add an Insert New button at the end of the dropdown list. I tried these two solutions I found online
Solution 1:
$(".select2-drop").append('<table width="100%"><tr><td class="row"><button class="btn btn-block btn-default btn-xs" onClick="modal()">Add new Item</button></div></td></tr></table>');
Solution 2
$("#itemId0").select2("container").find("div.select2-drop").append('<table width="100%"><tr><td class="row"><button class="btn btn-block btn-default btn-xs" onClick="modal()">Add new Item</button></div></td></tr></table>');
With Solution 1 nothing happens. With solution 2 I get the error message in the select 2 js file
0x800a138f - JavaScript runtime error: Unable to get property 'apply'
of undefined or null reference
Can anyone please help?
Here is my HTML
<select id='itemId0' name='product[0][name]' class='form-control col-lg-5 itemSearch' >
<option></option>
</select>
AND the full select2 javascritp
function productFormatResult(product) {
if (product.loading) product.text;
var html = "<table><tr>";
html += "<td>";
html += product.text;
html += "</td></tr></table>";
return html;
}
// alert(html);
function productFormatSelection(product) {
var selected = "<input type='hidden' name='itemId' value='" + product.id + "'/>";
return selected + product.text;
}
//$("#itemId0").select2();
$("#itemId0").select2({
ajax: {
url: "#Url.Action("GetProducts", "Inventories")",
dataType: 'json',
data: function (params) {
return {
q: params.term
};
},
processResults: function (data, params) {
return { results: data };
},
cache: true
},
escapeMarkup: function (markup) { return markup; },
minimumInputLength: 1,
templateResult: productFormatResult,
templateSelection: productFormatSelection,
dropdownClass: 'bigdrop'
});
// $(".select2-drop").append('<table width="100%"><tr><td class="row"><button class="btn btn-block btn-default btn-xs" onClick="modal()">Add new Item</button></div></td></tr></table>');
$("#itemId0").select2("container").find("div.select2-drop").append('<table width="100%"><tr><td class="row"><button class="btn btn-block btn-default btn-xs" onClick="modal()">Add new Item</button></div></td></tr></table>');
check it
$('#select2').select2({
placeholder: 'This is my placeholder',
language: {
noResults: function() {
return `<button style="width: 100%" type="button"
class="btn btn-primary"
onClick='task()'>+ Add New Item</button>
</li>`;
}
},
escapeMarkup: function (markup) {
return markup;
}
});
Update: (Explanation)
If you need to add button in select2 if no result found you just need to returnHTML Button code from noResults function and Add escapeMarkup function to render custom templates.
language: {
noResults: function() {
return `<button style="width: 100%" type="button"
class="btn btn-primary"
onClick='task()'>+ Add New Item</button>
</li>`;
}
},
escapeMarkup: function (markup) {
return markup;
}
Try below example to see how it looks.
https://jsfiddle.net/Hamza_T/yshjqw85/32/
Here is an example in codepen
html is below
<select id="CustomSelect" multiple="multiple">
<option value="volvo">BMW</option>
<option value="saab">Jaquar</option>
<option value="mercedes">RR</option>
<option value="audi">Audi</option>
</select>
CSS is below
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#banner-message {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}
Script is below
$("#CustomSelect").select2({
width: '100%',
allowClear: true,
closeOnSelect: false
}).on('select2:open', function () {
let a = $(this).data('select2');
if (!$('.select2-link').length) {
a.$results.parents('.select2-results')
.append('<div class="select2-link2 select2-close"><button>Close</button></div>')
.on('click', function (b) {
});
}
});
I think this can be done with Select2's Adapters and Decorators (https://select2.org/advanced/default-adapters). However, personally I find this approach really heavy and to be honest I don't understand the documentation regarding this area.
What I personally do, is binding on the select2:open-event and appending a add-new-button container.
Here is an example:
// create new container
$('#select2').select2CreateNew("Create new");
// generic function
$.fn.select2CreateNew = function( text ) {
// bind to "open"-event
this.on( 'select2:open', function( e ) {
let name = $( this ).attr( 'name' );
let html = '<div class="s-add-new-container">' + text + '</div>';
let $resultContainer = $( '[aria-controls="select2-' + name + '-results"]' )
.closest( '.select2-dropdown' ).find( '.select2-results' );
// avoid duplicates ~ append "create new" to result bottom
if ( $resultContainer.find( '.s-add-new-container' ).length === 0 ) $resultContainer.append( html );
} );
}
Customize the code or add some click-event handler for whenever the user clicks on the container.
For styling I'm using this CSS:
.s-add-new-container {
padding: 7px;
background: #f1f1f1;
border-top: 1px solid #c7c7c7;
}
.select2-dropdown.select2-dropdown--below {
border-radius: 0px;
box-shadow: 0px 5px 10px #6b6b6b59;
}
.s-add-new-container:hover {
background: #3db470;
color: white;
cursor: pointer;
}
I am trying to make a floating label float when you click the input. I am using CSS and jquery(This is in a jquery mobile 1.4.4 platform). My code only seems to work on an input with a data-role of "none," and it won't work on a normal input. How can I make this work on a normal input?
This is my CSS:
.inputAnimation {
display: inline-block;
position: relative;
margin: 0 0px 0 0;
}
.inputAnimation label {
position: absolute;
top: 5px;
left: 15px;
font-size: 12px;
color: #aaa;
transition: .1s all linear;
cursor: text;
}
.inputAnimation.active label {
top: -15px;
}
This is my HTML:
<div data-role="page" id="signUpPage">
<div data-role="main" class="ui-content">
<form>
<div class="inputAnimation">
<label for="username">Name</label>
<input id="username" name="username" type="text" />
</div>
<div class="inputAnimation">
<label for="email">Email</label>
<input data-role="none" id="email" name="email" type="text" />
</div>
</form>
</div>
And this is my jquery
$(document).ready(function () {
$('input').each(function () {
$(this).on('focus', function () {
$(this).parent('.inputAnimation').addClass('active');
});
$(this).on('blur', function () {
if ($(this).val().length == 0) {
$(this).parent('.inputAnimation').removeClass('active');
}
});
if ($(this).val() != '') $(this).parent('.inputAnimation').addClass('active');
});
});
Here is the demo
Link to the jsfiddle
Thanks!
When jQM enhances the input it adds a DIV such that .inputAnimation is now a grandparent of the input instead of parent. The simplest change is to use the .parents() instead of .parent() method:
$('input').each(function () {
$(this).on('focus', function () {
$(this).parents('.inputAnimation').addClass('active');
});
$(this).on('blur', function () {
if ($(this).val().length == 0) {
$(this).parents('.inputAnimation').removeClass('active');
}
});
if ($(this).val() != '') $(this).parents('.inputAnimation').addClass('active');
});
Updated FIDDLE
i want to create tags for input data.(http://textextjs.com/manual/examples/ajax-with-filter-tags-and-autocomplete.html hear they creating tags using auto complete text box, but i don't want auto complete one)
hear is my code
<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#textBox").keyup(function() {
$("#message").val($(this).val());
});
});
</script>
</head>
<body>
<div>
TextBox 1 : <input type="textbox" id="textBox"></input>
TextBox 2 : <input type="textarea" id="message"></input>
</div>
</body>
</html>
hear it reflect data of textbox1 to textbox2.
now what i want is : if user enter any data(words) in textbox1 followed by space then that word should convert into tags in textbox2
First of all type=textarea is wrong. There's no such input like that. You must be using <textarea> instead of that. Secondly, why dont you use contentditable attribute? It works just like a text area but can take HTML, is supported in all browsers, and you can use it on any block element! So replace your second input with this:
TextBox 2 : <div class="target" contenteditable="true"></div>
Then, in your code,
$("#textBox").keypress(function (e) {
if (e.which === 32) {
$(".target").append("<a href='#' class='tag'>" + this.value + "</a>");
this.value = "";
}
});
(Disclaimer) I used the styles from SO's tags, like this :
body {
font-family: Arial, 'Liberation Sans', 'DejaVu Sans', sans-serif;
}
.tag {
color: #3E6D8E;
background-color: #E0EAF1;
border-bottom: 1px solid #b3cee1;
border-right: 1px solid #b3cee1;
padding: 3px 4px 3px 4px;
margin: 2px 2px 2px 0;
text-decoration: none;
font-size: 90%;
line-height: 2.4;
white-space: nowrap;
}
.tag:hover {
background-color: #c4dae9;
border-bottom: 1px solid #c4dae9;
border-right: 1px solid #c4dae9;
text-decoration: none;
}
Demo : http://jsfiddle.net/hungerpain/Wky2Z/
To add the tags to an array, have a variable called tags outside the keypress function :
var tags = [];
Then, in the keypress, you've got this if loop right? Push the new value into the array :
if (e.which === 32) {
$(".target").append("<a href='#' class='tag'>" + this.value + "</a>");
tags.push(this.value); //push the value in array
this.value = "";
}
Then, when you need to save it to DB, just join them :
tags.join("");
Then later, when you to retrieve them from DB next time, you could wrap those with the a (what we did in the keypress function)
Demo : http://jsfiddle.net/hungerpain/Wky2Z/1/
Try This:
$(document).ready(function () {
$("#textBox").keyup(function (e) {
if (e.keyCode == 32) {
$("#message").val($(this).val());
}
if ($(this).val() == '') {
$("#message").val('');
}
});
});
JSFIDDLE DEMO