I am trying to get a label to update when a user enters a value into a text box. I have managed to get the label to update when the slider bar value is changed by the user but i dont have the skill to get it to update when the text box changes.
I tried to write some code but it does not look right at all, can sombody lend me a hand?
Code i tried
$("#MonthlyRent").text({
textchange: function (event, ui) {
update(2, ui.value + '%'); //changed
}
});
Function to catch change
$(document).ready(function () {
$("#slider").slider({
range: "min",
animate: true,
value: 1,
min: 0,
max: 100,
step: 1,
slide: function (event, ui) {
update(1, ui.value + '%'); //changed
}
});
$("#slider2").slider({
range: "min",
animate: true,
value: 1,
min: 0,
max: 100,
step: 1,
slide: function (event, ui) {
update(2, ui.value + '%'); //changed
}
});
$("#MonthlyRent").text({
slide: function (event, ui) {
update(2, ui.value + '%'); //changed
}
});
//Added, set initial value.
$("#amount").val(0);
$("#duration").val(0);
$("#amount-label").text(0);
$("#duration-label").text(0);
$("MonthlyRent").text(0);
update();
});
update function
function update(slider, val) {
//changed. Now, directly take value from ui.value. if not set (initial, will use current value.)
var $amount = slider == 1 ? val : $("#amount").val();
var $duration = slider == 2 ? val : $("#duration").val();
var $rent = $("#MonthlyRent").val();
var $amount2 = $amount.replace('%', '');
/* commented
$amount = $( "#slider" ).slider( "value" );
$duration = $( "#slider2" ).slider( "value" );
*/
$total = "£" + ($amount2 + $rent);
$("#amount").val($amount);
$("#amount-label").text($amount);
$("#duration").val($duration);
$("#duration-label").text($duration);
$("#total").val($total);
$("#total-label").text($total);
$('#slider a').html('<label><span class="glyphicon glyphicon-chevron-left"></span> ' + $amount + ' <span class="glyphicon glyphicon-chevron-right"></span></label>');
$('#slider2 a').html('<label><span class="glyphicon glyphicon-chevron-left"></span> ' + $duration + ' <span class="glyphicon glyphicon-chevron-right"></span></label>');
}
Use the event change or keyup:
$('#mytextinput').on('change keyup', function (e) { /* You stuff here. */ })
Without HTML code, I guessed your input was something like <input type="text" id="mytextinput" />, but if it is not you should give more information.
To detect a change on a textbox use the following
http://jsfiddle.net/SrhYh/
$('#example').change(function() {
update();
});
function update() {
$('#result').text($('#example').val());
}
as an alternative listen to keyup
$('#example').keyup(function() {
update();
});
function update() {
$('#result').text($('#example').val());
}
http://jsfiddle.net/SrhYh/1/
Related
I have the following script for a jQuery UI slider. The script shows the amount in a div with id #skizzar_payment_amount
When I scroll to the lowest amount (0), the value in the div shows the initial amount instead of 0.
See here:
<script>
jQuery(function($) {
var initialValue = 7.5;
var maxValue = 20;
var stepValue = 0.25;
var sliderTooltip = function(event, ui) {
var curValue = ui.value || initialValue; // current value (when sliding) or initial value (at start)
var tooltip = '<div class="tooltip"><div class="tooltip-inner">£' + curValue + '</div><div class="tooltip-arrow"></div></div>';
$('.ui-slider-handle').html(tooltip); //attach tooltip to the slider handle
$("#skizzar_payment_amount").val(ui.value); //change amount in hidden input field
}
$("#slider").slider({
value: initialValue,
min: 0,
max: maxValue,
step: stepValue,
create: sliderTooltip,
slide: sliderTooltip,
});
$("#skizzar_payment_amount").val($("#slider").slider("value"));
});
</script>
https://jsfiddle.net/yzzvd52y/
ui.value will be 0, which is false in this line: var curValue = ui.value || initialValue;
Change it to e.g.:
var curValue = ui.value !== undefined ? ui.value : initialValue;
Updated fiddle
I updated your fiddle and added the following code:
change: function( event, ui ) {
$("#skizzar_payment_amount").val(ui.value);
}
Try this:
jQuery(function($) {
var initialValue = 7.5;
var maxValue = 20;
var stepValue = 0.25;
var sliderTooltip = function(event, ui) {
var curValue = ui.value >= 0 ? ui.value : initialValue; // current value (when sliding) or initial value (at start)
var tooltip = '<div class="tooltip"><div class="tooltip-inner">£' + curValue + '</div><div class="tooltip-arrow"></div></div>';
$('.ui-slider-handle').html(tooltip); //attach tooltip to the slider handle
$("#skizzar_payment_amount").val(ui.value); //change amount in hidden input field
}
$("#slider").slider({
value: initialValue,
min: 0,
max: maxValue,
step: stepValue,
create: sliderTooltip,
slide: sliderTooltip,
change: function(event, ui) {
$("#skizzar_payment_amount").val(ui.value);
}
});
});
I have a jQuery slider. I have two buttons i.e ZoomIn and ZoomOut. I want to slide the slider on these button click. Like by clicking ZoomIn it should slide towards right and by clicking ZoomOut it should slide towards left, and should call their respective slide function/event too.
Working Demo Here
$(document).ready(function () {
$("#zoomSlider").slider({
min: -3.32,
max: 4.00,
step: 0.01,
value: 0.1,
animate: false,
"slide": function (event, ui) {
$("#zoom").val(ui.value + "%");
}
});
$("#zoom").val($("#zoomSlider").slider("value") + "%");
});
Updated
I also need a function to be called when slider changes. That function take two parameters 1)event 2)ui, how to get those parameteters when button click ? like :
$('#zoomIn').on('click', function () {
if (counter < 4.00) {//if counter less than max value
counter += .1;//increment counter
$slider.slider("value", counter)
$("#zoom").val($slider.slider("value") + "%");
myFunction(event, ui);
}
});
Please try this:
$(document).ready(function(){
$("#zoomIn").click(function (){
var current = $( "#zoom" ).val().slice(0,-1);
var new_position = (parseFloat(current)+0.1) ;
$("#zoom").val( new_position +"%");
$("#zoomSlider").slider('value',new_position);
$( "#zoom" ).val( $( "#zoomSlider" ).slider( "value" )+"%" );});
$("#zoomOut").click(function (){
var current = $( "#zoom" ).val().slice(0,-1);
var new_position_out = (parseFloat(current)-0.1) ;
$("#zoom").val( new_position_out +"%");
$("#zoomSlider").slider('value',new_position_out);
$( "#zoom" ).val( $( "#zoomSlider" ).slider( "value" )+"%" );});
});
Demo
Try
$(document).ready(function () {
var counter = 0, //initialize counter
$slider = $("#zoomSlider");
$slider.slider({
min: -3.32,
max: 4.00,
step: 0.01,
value: 0.1,
animate: false,
"slide": function (event, ui) {
$("#zoom").val(ui.value + "%");
counter = ui.value; //change counter value if user slides
}
});
$("#zoom").val($slider.slider("value") + "%");
counter = $slider.slider("value"); // set slider value in counter
$('#zoomIn').on('click', function () {
if (counter < 4.00) { //if counter less than max value
counter += .1; //increment counter
$slider.slider("value", counter)
$("#zoom").val($slider.slider("value") + "%");
}
});
$('#zoomOut').on('click', function () {
if (counter > -3.32) { //if counter greater than min value
counter -= .1; //decrement counter
$slider.slider("value", counter)
$("#zoom").val($slider.slider("value") + "%");
}
});
});
Demo http://jsfiddle.net/rbW35/5/
Example similar to what you want exists in official documentation. Slide event is only for mouse manipulation on slider, use change to capture slider changes. Here is fiddle
$(document).ready(function () {
var slider = $("#zoomSlider"),
counter = $("#zoom");
slider.slider({
min: -3.32,
max: 4.00,
step: 0.01,
value: 0.1,
animate: false,
change: function (event, ui) {
counter.val(ui.value.toFixed(2) + "%");
}
});
counter.val(slider.slider("value").toFixed(2) + "%");
$('[type="button"]').on('click', function (event) {
var el = $(event.currentTarget),
mult = el.data().negative ? 1 : -1;
slider.slider("value", slider.slider("value") + slider.slider("option", "step") * mult);
});
});
jsFiddle Example
We first get the current value of the slider. Then, we set the slider value to the current value minus one.
$('#zoomOut').click(function() {
var current_value = $('#zoomSlider').slider('option','value');
$("#zoomSlider").slider("value", current_value-=1);
});
If you want the have the slider animate as it's changing value, you can change the "animate" parameter to "true" in the creation of the slider.
I have a function that averages all of the values from multiple sliders. I am trying to take the data I get from that average and insert into the tweet. Example: "I just scored 100 points playing this awesome game!" The point value obviously being changed dynamically based on the average value. I am very new to Javascript/Jquery so please include extreme amounts of details when answering. Thanks! Here is my Jquery:
$(function readTweet() {
$(document).ready(function () {
console.log($(".tweet").text());
});
$(function(average) {
var numberOfRatings = $(".rating").length,
average;
$( ".slider" ).slider().find(".ui-slider-handle").addClass("custom");
$( ".slider" ).slider({
range: "min",
value: 5,
min: 1,
max: 10,
slide: function( event, ui ) {
var total = 0;
$(this).siblings( ".rating" ).text(ui.value);
$(".rating").each(function () {
var ratingValue = parseInt($(this).text(), 10);
total = parseFloat(total + ratingValue);
console.log(ratingValue);
});
average =(total/numberOfRatings).toFixed(2);
$("#average").text(average);
$(".tweet").click(function (){
$(this).html("I just scored " + average + "points playing this awesome game!");
});
}
});
$( ".rating" ).text($( ".slider" ).slider( "value" ) );
$(".ui-slider-handle").focus(function() {
$(this).removeClass("ui-state-hover ui-state-default ui-state-focus ui-state-active");
});
});
});
HTML
<div id="grand-total">
<h1>Album Rating</h1>
<h2 type="text" id="average" value="0">0</h2>
Tweet to
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
I have a function that averages all of the values from multiple sliders. I am trying to take the data I get from that average and insert into the tweet. Example: "I just scored 100 points playing this awesome game!" The point value obviously being changed dynamically based on the average value. I am very new to Javascript/Jquery so please include extreme amounts of details when answering. Thanks! Here is my
Jquery:
$(function readTweet() {
$(document).ready(function () {
console.log($(".tweet").text());
});
$(function(average) {
var numberOfRatings = $(".rating").length,
average;
$( ".slider" ).slider().find(".ui-slider-handle").addClass("custom");
$( ".slider" ).slider({
range: "min",
value: 5,
min: 1,
max: 10,
slide: function( event, ui ) {
var total = 0;
$(this).siblings( ".rating" ).text(ui.value);
$(".rating").each(function () {
var ratingValue = parseInt($(this).text(), 10);
total = parseFloat(total + ratingValue);
console.log(ratingValue);
});
average =(total/numberOfRatings).toFixed(2);
$("#average").text(average);
$(".tweet").click(function (){
$(this).html("I just scored " + average + "points playing this awesome game!");
});
}
});
$( ".rating" ).text($( ".slider" ).slider( "value" ) );
$(".ui-slider-handle").focus(function() {
$(this).removeClass("ui-state-hover ui-state-default ui-state-focus ui-state-active");
});
});
});
HTML:
<div id="grand-total">
<h1>Album Rating</h1>
<h2 type="text" id="average" value="0">0</h2>
Tweet to
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
You can see the code live here: http://jsfiddle.net/z3xV3/50/
My HTML:
<div id="slider"></div>
<input id="sliderValue" />
<div id="boksTimer"></div>
My JQUERY:
$(document).ready(function() {
$("#slider").slider({value:'',min: 0,max: 150,step: 0.5, range: 'min',
slide: function( event, ui ) {
$( "#amount" ).html( ui.value + ' timer');
$('#sliderValue').val(ui.value);
}
});
var thumb = $($('#slider').children('.ui-slider-handle'));
setLabelPosition();
$('#slider').bind('slide', function () {
$('#boksTimer').html(((($('#slider').slider('value')) / 31) * 60).toFixed(0) + 'min pr. dag');
setLabelPosition();
});
function setLabelPosition() {
var label = $('#boksTimer');
label.css('top', '20px');
label.css('left', thumb.offset().left - (label.width() - thumb.width())/ 2);
}
});
Why is the value of the boksTimer 1min pr. day when the slider is at 0 ?
Use ui.value to get slider value on slide event function:
$('#slider').bind('slide', function (event, ui) {
$('#boksTimer').html((((ui.value) / 31) * 60).toFixed(0) + 'min pr. dag');
setLabelPosition();
});