I'm using the Bootstrap slider plugin to create a Range Slider
in Example 2 I want to remove the tooltip option and move the value to external one.
Here my code :
HTML
<b class="min">$ 10</b>
<input id="example2" type="text" data-slider-min="0" data-slider-max="2000" data-slider-step="1" data-slider-value="14" data-slider-tooltip="hide" />
<b class="max">$ 1000</b>
JavaScript
var slider = new Slider('#example2', {});
you can use slide event to get current value and embed the value where you want :
slider.on("slide", function(sliderValue) {
//do stuff here
});
You can see here Snippet example :
$(function() {
var slider = new Slider('#example2', {});
slider.on("slide", function(sliderValue) {
document.getElementById("value").textContent = sliderValue;
});
})
#value {
color:red;
font-weight:bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/css/bootstrap-slider.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/bootstrap-slider.min.js"></script>
<b class="min">$ 10</b>
<input id="example2" type="text" data-slider-min="10" data-slider-max="1000" data-slider-step="1" data-slider-value="14" data-slider-tooltip="hide" />
<b class="max">$ 1000</b>
<br><br> value :
<div id="value"></div>
Related
I'm working with materializecss and my boss asked me to change the trigger on the datepicker modal from the classic 'click' to a double click.
Problem is, there's no documentation about that, and maybe is hard-coded in the object.
Is there a way to change this behavior?
You can create two input elements and hide either of them. Below I've created input1 as a datepicker and input2 as a standard text input. Then I've hidden the first one and assigned an event listener (ondblclick) for the second one.
It may not be the best solution but works.
var datepicker = document.querySelector('#input1')
var input2 = document.querySelector('#input2')
var options = {
autoClose : true,
container : document.body,
onSelect : function (day) {
input2.value = day.toDateString(),
M.updateTextFields()
}
}
var instance = M.Datepicker.init(datepicker, options)
input2.ondblclick = function () {
instance.open()
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div class="row">
<div class="input-field col s5 hide">
<input type="text" class="datepicker" id="input1">
</div>
<div id="div2" class="input-field col s5">
<input type="text" id="input2">
<label for="input2">Pick a date</label>
</div>
</div>
I have the following function to turn a normal text field into a datepicker:
<input type="text" class="datepicker form-control" name="text-150" >
var DatePicker = function () {
if ($(".datepicker").length === 0) {
return;
}
$(".datepicker").pikaday({
firstDay: 1,
format: "D MMM YYYY"
});
};
The above works fine when the text field is hardcoded with datepicker class. But If I have text field and dynamically inject the datepicker class after the page has loaded via some event, then how can I bind the datepicker plugin to the text field?
Is this what are you trying to achieve?
$( function() {
$('button').click(function() {
$('body').append('<input type="text" class="datepicker" name="text-150" >');
var cl = $('input').attr('class');
$( "." + cl ).datepicker();
})
});
Try this. It will help you.
var id=1;
$('#addDate').on('click',function(){
$("#dates").append('Date '+id+' : <input type="text" id="datepicker'+id+'"><br/>');
$("#datepicker"+id).datepicker();
id++;
});
$('#removeAll').on('click',function(){
$("#dates").html('');
id=1;
});
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<button type="button" id="addDate">Add Date</button>
<button type="button" id="removeAll">Remove All</button>
<div id="dates"></div>
Happy Coding...
Ok i have a little code to distribute point from pool in to stats made with form. my Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://mynindo.pl/test/css/style.css">
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src="http://mynindo.pl/test/js/incrementing.js"></script>
<link href="http://mynindo.pl/test/css/bootstrap.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="well">
<div class="container">
<form method="post" action="">Points: 50<br /><br />
<label for="name">Int</label>
<div class="numbers-row"><input type="text" name="int" id="int" value="0">
</div>
<label for="name">Str</label>
<div class="numbers-row"><input type="text" name="men" id="men" value="0">
</div>
<label for="name">Dex</label>
<div class="numbers-row"><input type="text" name="dex" id="dex" value="0">
</div>
<label for="name">Dex2</label>
<div class="numbers-row"><input type="text" name="str" id="str" value="0">
</div>
<div class="buttons">
<input type="submit" value="Submit" id="submit">
</div>
</form>
</div></div>
</body>
</html>
My php code in app.php check if sum of all points $Post[] is == points pool. every works fine, but wieh user got meny poits for the distribute need math so can't be tricky.
And now my question, is this possible to change value of poits pool in real time with ajax or jquery? i mean, i got 50 points total i add 1 to Str (didn;t sumbit) and value pool changed from 50 to 49 w/o reloading page?
as you are not updating database until pressing submit button then just manipulating that span element will suffice,
put following code your html section instead of your corresponding code
Points: <span id="point" data-available="50">50</span>
Add following JavaScript code
$(':text').change(function(){
var total=0;
$( ":text" ).each(function( i ) {
total += parseInt($(this).val());
});
$('#point').html($('#point').data("available")-total);
});
this will do the trick.
BTW you should make sure input is number
I Tried to add Uoyr code reza but i'm not sure how, also i tried wrote my own script to count all those numbers but it also fail
function countNum(val) {
var sum = document.getElementById("sum").value;
var i = document.getElementById("int").value;
var w = document.getElementById("men").value;
var s = document.getElementById("dex").value;
var d = document.getElementById("str").value;
var points = i + w + s + d;
if ( points == 0){
$('#suma').text(0);
}else{
$('#suma').text(suma - points);
}};
with
Points: <div style="display: inline;" id="sum">50</div>
But didn't work at all. Cna you show me how ur code should work with my on snippet?
I haven't got much experience in javascript. But I got a little slider and a lightbox, whose content should change when a specific radio is selected. So for example when the radio with id="id2" is selected, the content of the lightbox
<div class="modal">
<div class="modal__inner">
<label class="modal__close" for="modal-1"></label>
<img src="img/blabla.JPG">
<p>blablabla</p>
</div>
</div>
should be "blabla" and the source of the image "img/blabla.jpg".
But now when I select the 2nd radio with id="id3", the content should be "blopblop" and the source of the image "img/blopblop.jpg"...
Is that possible?
I already got a code on my website, which changes the href of a link when a specific radio is selected:
function myFunction() {
if(document.getElementById('id2').checked) {
document.getElementById('myLink').href = "infografik.html";
}
But I don't know how I should do it with "p" and "img"...
Thanks for your help!
You could use data attributes on the radio buttons like so:
<form>
<input type="radio" class="changemodal" data-src="/my/img/1.jpg" data-p="Foo!">
<input type="radio" class="changemodal" data-src="/my/img/2.jpg" data-p="Bar!">
</form>
<div class="modal">
<img id="modal_img" src="">
<p id="modal_p"></p>
</div>
You can then use attributes these in jQuery:
$('.changemodal').click(function(){
$('#modal_img').attr('src', $(this).attr('data-src'));
$('#modal_p').html($(this).attr('data-p'));
});
So I have created a working solution. You can change it to what you desire.
Working solution !
var rad = document.myForm.myRadios;
var prev = null;
for (var i = 0; i < rad.length; i++) {
rad[i].onclick = function() {
document.getElementById('modal_p').innerHTML = this.value;
document.getElementById("imgSrc").src = "img/" + this.value + ".JPG";
document.getElementById('imgSrcP').innerHTML = "img/" + this.value + ".JPG";
};
}
<form name="myForm">
<input type="radio" name="myRadios" value="blabla" />Blabla
<input type="radio" name="myRadios" value="blopblop" /> Blopblop
</form>
<div class="modal">
<img id="imgSrc" src="img/blabla.JPG" />
<p id="imgSrcP"></p>
<p id="modal_p"></p>
</div>
Something like this..
$('.modal img').attr('src','blopblop.jpg');
$('.modal p').text('blopblop');
You can use $(selector).attr('src', 'image source') to dynamically change the image source and $(selector).text('new_text') to dynamically change the content of paragraph p.
The following code gives 3 radio buttons to do the required changes.
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$("#id2").on("change", function() {
if (document.getElementById("id2").checked) { // This confirms if the radio button is selected or not
// change
$('.modal img').attr('src', 'img/blabla.jpg'); // change image source
$('.modal p').text('blabla'); // change paragraph content
}
});
// Similarly for id3
$("#id3").on("change", function() {
if (document.getElementById("id3").checked) {
// change image and paragraph
$('.modal img').attr('src', 'img/blopblop.jpg');
$('.modal p').text('blopblop');
}
});
// For id1 - returning back to default state
$("#id1").on("change", function() {
if (document.getElementById("id1").checked) {
// change image and paragraph
$('.modal img').attr('src', 'img/blablabla.jpg');
$('.modal p').text('blablabla');
}
});
});
</script>
</head>
<body>
<form action="">
<input type="radio" name="truth" id="id2" value="0">BlaBla
<input type="radio" name="truth" id="id3" value="1">BlopBlop
<input type="radio" name="truth" id="id1" value="2">BlaBlaBla
</form>
<div class="modal">
<div class="modal__inner">
<label class="modal__close" for="modal-1"></label>
<img src="img/blablabla.jpg">
<p>blablabla</p>
</div>
</div>
</body>
</html>
I am trying to implement two dropdown menus: one for a time value, and one for a duration starting from that time onwards. i.e something like this.
I am using a bootstrap timepicker for the dropdown menu.
I wrote this method for the first field:
$('#timeWithDuration')
.timepicker({ 'scrollDefaultNow': true })
.on('change', function() {
var from_time = $("input[name='from_time']").val();
$('#duration').timepicker({
'minTime': from_time,
'maxTime': '11:30pm',
'showDuration': true
});
});
where #timeWithDuration is my first input field and #duration is my second. This works fine the first time I do it (after selecting a value in the first field, I can only see times past that value in the second field) but it then doesn't let me update the values anymore. i.e I can't select a new value for neither the first, nor the second field. The dropdown displays properly, but then doesn't update the value on select.
This is the HTML code for the input fields:
<div class='col-sm-5'>
<input id='timeWithDuration' type='text' class='form-control ui-timepicker-input' name='from_time' placeholder='What time?' autocomplete='off'>
</div>
<div class='col-sm-5'>
<input id='duration' type='text' class='form-control ui-timepicker-input' placeholder='Duration' autocomplete='off'>
</div>
Unexperienced frontend dev here so please be gentle <3 Cheers!
Use the proper event changeTime and reset the duration input every time:
DEMO: JSnippet
HTML:
<div class='row'>
<div class='col-sm-5'>
<input id='timeWithDuration' type='text' class='form-control ui-timepicker-input' name='from_time' placeholder='What time?' autocomplete='off'>
</div>
<div class='col-sm-5'>
<input id='duration' type='text' class='form-control' placeholder='Duration' autocomplete='off'>
</div>
</div>
JS:
$(function() {
var $duration = $('#duration');
var $timeWithDuration = $('#timeWithDuration');
$timeWithDuration
.timepicker({ 'scrollDefaultNow': true })
.on('changeTime', function() {
var from_time = $("input[name='from_time']").val();
if ($duration.hasClass('ui-timepicker-input')) {
$duration.timepicker('remove');
$duration.val('');
}
$duration.timepicker({
'minTime': from_time,
'maxTime': '11:30pm',
'showDuration': true
});
});
});
Looks like you are using this timepicker.
You will want to create an onchange event on the #timeWithDuration input that updates the minTime option on your timepicker.
Also, I would initialize your second timepicker outside of your onchange event for the first.
$('#timeWithDuration')
.timepicker({ 'scrollDefaultNow': true })
.on('changeTime', function() {
var from_time = $("input[name='from_time']").val();
$('#duration').timepicker('option', 'minTime', from_time);
if ($('#duration').val() && $('#duration').val() < from_time) {
$('#duration').timepicker('setTime', from_time);
}
});
$('#duration').timepicker({'maxTime': '11:30pm', 'showDuration': true});
<link href="https://rawgit.com/jonthornton/jquery-timepicker/master/jquery.timepicker.css" rel="stylesheet"/>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/jonthornton/jquery-timepicker/master/jquery.timepicker.min.js"></script>
<div class="col-sm-5">
<input id="timeWithDuration" type="text" class="form-control ui-timepicker-input" name="from_time" placeholder="What time?" autocomplete="off">
</div>
<div class="col-sm-5">
<input id="duration" type="text" class="form-control ui-timepicker-input" placeholder="Duration" autocomplete="off">
</div>
As #Shlomi Hassid pointed out in his answer, you would also want to use the timepicker's changeTime event, rather than the native change event, so that the function will only execute when the input in your #timeWithDuration timepicker is a valid time.