I have 3 Sliders in one JQuery Dialog, i want them to have a maximum value, but the maximum is not only for one slider it is for the sum of all of them. My script runs fine in google chrome debuger the only problem is that the value of the slider is not updated in $(this).slider("value", (sliderMax - sum));
$(".slider").each(function() {
var id = $(this).attr("id");
id = id.replace("Slider", "Value");
var sliderMax = 27;
$(this).slider({
range : "min",
min : 0,
max : sliderMax,
value : $("#" + id).attr("value"),
slide : function(event, ui) {
var sum = 0;
$(".sliderValue").each(function() {
if ($(this).attr("id") != id) {
sum += parseInt($(this).attr("value"));
}
});
if ((sum + $(this).slider("value")) > sliderMax){
$(this).slider("value", (sliderMax - sum));
}
$("#" + id).val(ui.value);
}
});
});
pls help me.
Ok finaly i found the solution:
if ((sum + ui.value) > sliderMax){
return false;
}
It is because of params of parseInt and value:... parseInt returns fake value when the string provided as parameter doesn't contain a number! please define the value variable outside the options as follows
$(".slider").each(function() {
var id = $(this).attr("id");
id = id.replace("Slider", "Value");
var sliderMax = 27;
var _value=$("#" + id).attr("value");
$(this).slider({
range : "min",
min : 0,
max : sliderMax,
value :value,
slide : function(event, ui) {
var sum = 0;
$(".sliderValue").each(function() {
if ($(this).attr("id") != id) {
var valueString=$(this).attr("value");
sum += parseInt(valueString);
}
});
if ((sum + $(this).slider("value")) > sliderMax){
$(this).slider("value", (sliderMax - sum));
}
$("#" + id).val(ui.value);
}
});
});
EDITS:
copied your solution to help readers
if ((sum + ui.value) > sliderMax){
return false;
}
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 number of inputs and I want to set a minimum value of each input section. For example, I have set a minimum input value of 100. So if the value of any input is less than 100 from all the inputs it will show an error. Otherwise if value of all the inputs is greater than or equal to 100 it will show the success message.
In my case if I enter less than value in an input it will show error but with this less value if I enter greater value in other input it show success message.
<div class="color-quantity not-selected-inputs selected-input-wrap">
<input type="text" class="custom_small" name="custom_small" onkeydown="return myFunction(event);">
</div>
<div class="color-quantity not-selected-inputs selected-input-wrap">
<input type="text" class="custom_medium" name="custom_medium" onkeydown="return myFunction(event);">
</div>
<input type="text" class="custom_large" name="custom_large" onkeydown="return myFunction(event);">
</div>
jQuery('.selected-input-wrap > input').map(function () {
var total = 0;
jQuery('input', this).each(function () {
total += this.value * 1;
});
if (parseInt(total) <= 99) {
jQuery(".select-quantity").html('<p>Please select at least 100 for each color</p>');
} else if (parseInt(total) >= 100) {
jQuery(".select-quantity").html('<p>Success</p>');
}
Please have a look at the code and help me find out the issue
There's a couple of issues.
You should declare total outside the loop otherwise you reset it back to 0 on each iteration.
You should also use a single each() call to loop over a set of elements, as map() is intended to be used to create an array from those elements.
You only need to call parseInt() once when you add the value to total
Your else if condition is redundant and can be replaced by just else, or even a ternary as below.
Try this:
jQuery(function($) {
var total = 0;
$('.selected-input-wrap > input').each(function () {
total += parseInt(this.value, 10);
});
var msg = total >= 100 ? '<p>Success</p>' : '<p>Please select at least 100 for each color</p>';
$(".select-quantity").html(msg);
});
The total variable is looping through all the inputs and only once its returning according to your code. Try closing the each loop after the if-else condition and check once.
jQuery('.selected-input-wrap > input').map(function () {
var total = 0;
jQuery('input', this).each(function () {
total += this.value * 1;
if (parseInt(total) <= 99) {
jQuery(".select-quantity").html('<p>Please select at least 100 for each color</p>');
} else if (parseInt(total) >= 100) {
jQuery(".select-quantity").html('<p>Success</p>');
}
});
})
You can use the following jquery code :-
jQuery('.selected-input-wrap > input').map(function () {
var total = 0;
jQuery('input').each(function () {
total = $(this).val();
if (parseInt(total) <= 99) {
jQuery(".select-quantity").html('<p>Please select at least 100 for each color</p>');
}
else if (parseInt(total) >= 100) {
jQuery(".select-quantity").html('<p>Success</p>');
}
});
});
It may help you.
Try this.
var MIN = 100, value = 0;
jQuery('.selected-input-wrap > input').each(function (idx,el) {
value += parseInt(el.value);
});
if (value < MIN) {
jQuery(".select-quantity").html('<p>Please select at least 100 for each color</p>');
} else {
jQuery(".select-quantity").html('<p>Success</p>');
}
In My Case i have solved the issue as follows:
var total = 0;
var array_total = new Array();
jQuery('.selected-input-wrap > input').each(function(index, value) {
jQuery( ".right-minimu").remove();
var total = jQuery(this).val();
console.log("Total Value : " + total);
if (total != '') {
var t_array = array_total.push(total);
}
console.log('Total Array : ' + array_total);
});
/******** make array unique *************/
var unique_total = [];
jQuery.each(array_total, function(i, el) {
if (jQuery.inArray(el, unique_total) === -1)
unique_total.push(el);
});
var current_urls = jQuery(location).attr('href');
var rest = current_urls.substr(37, 9); //
var current_urls = jQuery(location).attr('href');
var rest_2 = current_urls.substr(37, 18);
var rest_3 = current_urls.substr(37, 15);
var rest_4 = current_urls.substr(37, 8);
jQuery.each(unique_total, function(key, total) {
for (var i = 0; i <= unique_total.length; i++) {
if(rest == "bracelets") {
if (parseInt(unique_total[i]) <= 99) {
jQuery(".select-quantity").css("display", "block");
jQuery(".select-quantity").html('<p>Please select at least 100 for each color</p>');
jQuery( "#order-overview-table table" ).css("display" , "none") ;
jQuery( "#order-overview-table").append("<p class='right-minimu'>Please select at least 100 for each color</p>") ;
jQuery('.btn-cart').removeAttr("onclick");
return false;
} else if (parseInt(unique_total[i]) >= 100) {
jQuery(".select-quantity").css("display", "none");
jQuery('.btn-cart').attr('onClick', 'productAddToCartForm.submit(this);');
jQuery(".select-quantity").html('<p>Products Added</p>').delay(4000);
}
}
This is the code I have, now what it needs to do is increase the integer after the class name 'icon-' so that on each click the 'icon-' class gets a higher integer value ex. click -> 'icon-2', click -> 'icon-3' and so forth.
Bare in mind that the current icon shown to the user is 'icon-1'.
Also, is there a way for me to alert if it hits 'icon-10' or prevent it from trying to go further than 'icon-10' or below 'icon-1'.
$(function () {
a = 2,
b = '',
$('.icon-step-backward').click(function(){
$('#slider').removeClass();
$('#slider').addClass('icon-' - a);
});
$('.icon-step-forward').click(function(){
$('#slider').removeClass('icon-');
$('#slider').addClass('icon-' + a);
});
});
$('.icon-step-backward, .icon-step-forward').click(function () {
var s = $(this).hasClass('icon-step-backward') ? -1 : 1;
$('#slider').prop('className', function (_, p) {
return p.replace(/\d+/g, function (n) {
var j = +n + s;
return j <= 10 && j >= 1 ? j : n;
});
});
});
http://jsfiddle.net/Mwcbp/
$(function () {
var classes=["icon-1","icon-2","icon-3","icon-4","icon-5","icon-6"
,"icon-7","icon-8","icon-9","icon-10"];
var classCounter=0;
$('.icon-step-backward, .icon-step-forward').click(function () {
//caching slider object
var $slider = $('#slider'),
s = $(this).hasClass('icon-step-backward') ? -1 : 1,
tmp=counter+s,
disableButton=(s==-1)?'.icon-step-backward':'.icon-step-forward',
enableButton=(s==-1)?'.icon-step-forward':'.icon-step-backward';
$(enableButton).show();
if(tmp<classes.length && tmp>0){
$slider.removeClass(classes[counter]);
counter=counter+s;
$slider.addClass(classes[counter]);
}else{
$(disableButton).hide();
}
});
});
If you have multiple .icon-step buttons having to manipulate multiple slider (#slider suggest otherwise) than you can add the classCounter as $("#slider").data to be used specifically for this slider.
Hi guys I have made a JqueryUI simple slider,on certain value range I make Image URL and then try to change src attribute.
There are four images I'm trying to change.
Check the jsFiddle here.
I think the code is fine but its not working ,I dont know why ?
Replace this:
$("#" + postRetrmntImage).attr('src', ImageName );
to this:
$("#postRetrmntImage").attr('src', ImageName );
The problem is that youre not assigned any postRetrmntImage variable.
See update jsFiddle demo
demo http://jsfiddle.net/8Sw5J/
Explanation: Please use this: $("#" + sliderId).prop('src', ImageName ); since in your function you are passing the id as sliderId.
Also If I may suggest use .prop good read here: .prop() vs .attr()
Rest demo you can see how it works,
Hope this helps :)
full code
$(document).ready(function () {
makeSingleSliderWithImage('postRetrmntMnthlyPaymt', 0, 10000, 0, 500);
}
);
function makeSingleSliderWithImage(sliderId, minimum, maximum, val, steps) {
//Display label shud have a X appended
$('#' + sliderId).slider(
{
//range: 'min',
min: minimum,
max: maximum,
step: steps,
//starting values for silders
value: val,
slide: function (event, ui) {
//var ImageURL = "Images/";
//var ImageName = "";
//var ext = ".jpg";
if ((ui.value >= 0) && (ui.value <= 2000))//Basic: 0-2000
ImageName = "http://www.iconempire.com/icon-processor/icon40.gif";
else if ((ui.value >= 2500) && (ui.value <= 4500))//Moderate: 2500-4500
ImageName = "http://aux.iconpedia.net/uploads/14234829766434728.png";
else if ((ui.value >= 5000) && (ui.value <= 7000))//Comfortable: 5000-7000
ImageName = "http://www.iconempire.com/icon-processor/icon40.gif";
else if ((ui.value >= 7500) && (ui.value <= 10000))//Luxury:7500-10,000
ImageName = "Luxury";
//var fullURL = ImageURL + ImageName + ext;
//change Image URL
$("#" + sliderId).prop('src', ImageName ); //{ src: fullURL });
alert($("#" + sliderId).prop('src'));
//change Slider Value
$("#" + sliderId + "X").text(ui.value);
}
}
);
}
Trying doing this:
$("#" + postRetrmntImage.toString()).attr('src', ImageName );
Change line...
$("#" + postRetrmntImage).attr('src', ImageName );
to...
$("#postRetrmntImage").attr('src', ImageName );
assign a value to postRetrmntImage then use prop instead of attr see why prop
var postRetrmntImage="postRetrmntImage";
$("#" + postRetrmntImage).prop('src', ImageName );
Try this
$("#postRetrmntImage").attr('src', 'newimage.png');
Didn't find the way to create up and down buttons for vertical slider, to make its appearance like as standard scroller.
Is solution below suitable? Or are there any other ways?
function scroll(step)
{
if (step > 0)
{
if ($("#slider").slider('value') <= (100 - step))
{
$("#slider").slider('value', $("#slider").slider('value') + step);
}
}
else
{
if ($("#slider").slider('value') >= Math.abs(step))
{
$("#slider").slider('value', $("#slider").slider('value') + step);
}
}
return false;
}
What you have certainly works...but if you're worried about the range capping, slider already does this internally, so you can just do this:
function scroll(step) {
var s = $("#slider");
s.slider('value', s.slider('value') + step);
return false;
}
Also note that even setting the value returns it (the capped value), so you can do this for example:
function scroll(step) {
var s = $("#slider");
var newValue = s.slider('value', s.slider('value') + step);
alert("The new value is: " + newValue);
return false;
}
So for example if the range is 0-100 and you're at 90, a step of 10 or more would always result in a newValue of 100.