jQuery slider with input value on drag after refresh - javascript

I've found this grate slider which is combo of 4 sliders sharing 100% value. Problem is that it doesn't pick value of input, yet it resets to 25% for each slider every time page is refreshed. Can someone help by making slider picking value of inputs before they determine position of slider knob.
HTML
<div align="center" class="title">Statistiche:</div>
<div id="outer_container">
<div id="container">
<span class='multislider'>Hokuto ShinKen (<input type='text' required name='question_3' class='amount' value='5' data-min='0' data-max='100'/>)
<div class='slider tied'>
</div>
Nanto (<input type='text' required name='question_3' class='amount' value='15' data-min='0' data-max='100'/>)
<div class='slider tied'>
</div>
Gento (<input type='text' required name='question_3' class='amount' value='50' data-min='0' data-max='100'/>)
<div class='slider tied'>
</div>
Artiglio del Monte Taishan (<input type='text' required name='question_3' class='amount' value='30' data-min='0' data-max='100'/>)
<div class='slider tied'></div>
</span>
</div>
</div>
jQuery
var init = true;
var elements = $(".multislider").children(".slider.tied").length;
var MAX = 100;
var inpVal = $('.txt_name').val();
var initValue = (inpVal) >> 0;
//var initValue = (MAX / elements) >> 0;
var InitMod = MAX % elements;
$(".slider.tied").each(function() {
var slidersTied = $(".slider.tied");
var context = $(this);
var input = context.prev(".amount");
var val = input.data('answer');
var min = input.data('min');
var max = input.data('max');
var range = 1;
var proceed = false;
$(this).empty().slider({
value: val,
min: min,
max: max,
range: range,
animate: "slow",
create: function(event, ui){
if (InitMod > 0) {
$(this).slider('value', initValue + 1);
$(this).prev('.amount').val(initValue + 1);
InitMod = InitMod - 1;
}
else
{
$(this).slider('value', initValue);
$(this).prev('.amount').val(initValue);
}
},
slide: function(e, ui) {
// Update display to current value
$(this).prev('.amount').val(ui.value);
var current = ($(this).index() / 2) >> 0;
var total = 0;
var counter = 0
slidersTied.not(this).each(function() {
total += $(this).slider("option", "value");
counter += 1;
});
total += ui.value;
if (total != MAX){
proceed = true;
}
var missing = MAX - total;
console.log("missing: " + missing);
counter = 0;
if(proceed) {
//carico vettore elementi
var elements = [];
slidersTied.each(function() {
elements[counter] = $(this);
counter += 1;
});
var endIndex = counter - 1;
counter = endIndex + 1;
while (missing != 0) {
console.log("current counter: " + counter);
do {
if (counter == 0)
{
counter = endIndex;
}
else
{
counter = counter - 1;
}
} while(counter == current)
console.log("elemento attuale: " + counter);
var value = elements[counter].slider("option", "value");
var result = value + missing;
if (result >= 0)
{
elements[counter].slider('value', result);
elements[counter].prev('.amount').val(result);
missing = 0;
}
else
{
missing = result;
elements[counter].slider('value', 0);
elements[counter].prev('.amount').val(0);
}
}
}
}
});
});
Example
http://jsfiddle.net/vuQz5/116/
Thanks

There are two issues, var val = input.data('answer'); is wrong, there is no such data value what you need is to get the input value like this:
var val = input.val();
val = (val) ? val : 0;
and also use that value in create method instead of initValue there is no need for if condition you only need whatever is in the else clause:
$(this).slider('value', val);
$(this).prev('.amount').val(val);
Check this fiddle

Related

After click the select option update product price shows wrong in opencart

When I click on selected option product price update shows wrong.
Here is my code
<div class="container">
<div class="row">
<div class="col-md-6">Initial Price: <span id="thisIsOriginal" class="">$45,000.00</span></div>
<div class="col-md-6">Total: <span id="total">$45,000.00</span></div>
</div>
<div class="row">
<select class="optionPrice" name="select-1">
<option value="">Please Select</option>
<option data-price="2,000.00" value="20">+$2,000.00</option>
</select>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.optionPrice').change(function () {
var OriginalPrice = $('#thisIsOriginal').text();
var OriginalCurrency = OriginalPrice.substring(0, 1);
OriginalPrice = OriginalPrice.substring(1);
var total = 0;
$('.optionPrice').each(function () {
if ($(this).find('option:selected').attr('data-price') != 0 && $(this).find('option:selected').attr('data-price') != undefined) {
console.log($('option:selected', this).attr("data-price"));
total += parseFloat($('option:selected', this).attr('data-price'));
}
});
var newTotal = parseFloat(OriginalPrice) + parseFloat(total);
$('#total').text('$' + newTotal.toFixed(2));
});
});
</script>
How to solve this issue.I want after select the price shows 47,000.
The problem with your code is,
Your price contains , inside it. So after parseFloat() the values after the comma is getting truncated. You need to remove the commas before using parseFloat.
Changes need on the following lines,
total += parseFloat($('option:selected', this).attr('data-price').replace(/,/g, ""));
and
var newTotal = parseFloat(OriginalPrice.replace(/,/g, "")) + parseFloat(total);
Updated Fiddle
$('.optionPrice').change(function() {
var OriginalPrice = $('#thisIsOriginal').text();
var OriginalCurrency = OriginalPrice.substring(0, 1);
OriginalPrice = OriginalPrice.substring(1);
var total = 0;
$('.optionPrice').each(function() {
if ($(this).find('option:selected').attr('data-price') != 0 && $(this).find('option:selected').attr('data-price') != undefined) {
console.log($('option:selected', this).attr("data-price"));
total += parseFloat($('option:selected', this).attr('data-price').replace(/,/g, ""));
}
});
var newTotal = parseFloat(OriginalPrice.replace(/,/g, "")) + parseFloat(total);
$('#total').text('$' + newTotal.toFixed(2));
});
Edit for Getting comma separated value,
$('.optionPrice').change(function() {
var OriginalPrice = $('#thisIsOriginal').text();
var OriginalCurrency = OriginalPrice.substring(0, 1);
OriginalPrice = OriginalPrice.substring(1);
var total = 0;
$('.optionPrice').each(function() {
if ($(this).find('option:selected').attr('data-price') != 0 && $(this).find('option:selected').attr('data-price') != undefined) {
console.log($('option:selected', this).attr("data-price"));
total += parseFloat($('option:selected', this).attr('data-price').replace(/,/g, ""));
}
});
var newTotal = parseFloat(OriginalPrice.replace(/,/g, "")) + parseFloat(total);
newTotal = numberWithCommas(newTotal);
$('#total').text('$' + newTotal + ".00");
});
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

Calculate value/price based on rows in textarea

Im trying to calculate a price that is depending on how many rows you use in a textarea. This is what i have come up with so far. The only problem is its won't calculate, i think i have looked at it to much or something.
Let me explain a little, first of its for som textads.
There is a flatfee for minimum of 2 rows and then additional 10 for each new row, with a maximum of 10 rows.
var flatFee = '70.00';
var perRow = '10.00';
function rowCount(area, maxlength) {
//var area = document.getElementById("textarea-1")
// trim trailing return char if exists
var text = area.value.replace(/\s+$/g, "");
var split = text.split("\n");
if (split.length > maxlength) {
split = split.slice(0, maxlength);
area.value = split.join('\n');
alert("You can not enter more than " + maxlength.toString() + " lines");
}
return false;
}
var div = $('span.rowCount');
jQuery('textarea#textarea-1').on('input', function($) {
var count = rowCount(this.value);
div.html(count.rows);
/*var additionalFees = perRow*count.rows;*/
if (count.rows > 2) {
var additionalFees = perRow * (count.rows - 2);
}
var total = parseFloat(flatFee) + parseFloat(additionalFees);
$('span.total').html(parseFloat(total.toString()).toFixed(2));
/*var total = $('span.total');*/
console.log(total);
});
<textarea cols="32" rows="10" maxlenght="320" class="form-control" name="textarea-1" id="textarea-1" placeholder="Type or paste your prompt here."></textarea>
<p>You have <span class="rowCount">0</span> rows.Total <span class="total">0</p>
Modified your function a bit. Works now
var flatFee = '70.00';
var perRow = '10.00';
function rowCount(area, maxlength) {
//var area = document.getElementById("textarea-1")
// trim trailing return char if exists
var text = area.replace(/\s+$/g, "");
var split = text.split("\n");
if (split.length > maxlength) {
split = split.slice(0, maxlength);
area.value = split.join('\n');
alert("You can not enter more than " + maxlength.toString() + " lines");
}
return {rows:split.length};
}
var div = $('span.rowCount');
jQuery('textarea#textarea-1').on('input', function($) {
var count = rowCount(this.value);
div.html(count.rows);
/*var additionalFees = perRow*count.rows;*/
var additionalFees=0;
if (count.rows > 2) {
additionalFees = perRow * (count.rows - 2);
}
var total = parseFloat(flatFee) + parseFloat(additionalFees);
//$('span.total').html(total.toString().toFixed(2));
/*var total = $('span.total');*/
console.log(total);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<textarea cols="32" rows="10" maxlenght="320" class="form-control" name="textarea-1" id="textarea-1" placeholder="Type or paste your prompt here."></textarea>
<p>You have <span class="rowCount">0</span> rows.Total <span class="total">0</span></p>
https://jsfiddle.net/5mcbt8ua/4/
HTML
Flat Rate / First 2 rows: 70<BR>
Additional Rows: 10 per row
<div id="compute" contenteditable="true" style="border:1px solid #ccc;">
</div>
Total Price: <font id="total">0</font>
<BR>
<font id="msg"></font>
jQuery
var flatFee = 70;
var perRow = 10;
$('#compute').keypress(function(){
$("#msg").html('Press enter to compute');
var count = $(this).find('div').length;
var total = flatFee;
if(count > 1)
{
total = flatFee + (count * 10) - 10;
}
$("#total").html(total);
});

Checkbox variable outside of function

I am new to coding (trying to learn) and I cant figure out how to get the var of the check box value outside of the function.
Javascript:
$(document).ready(function() {
var quantity= parseInt($('#phones').val());
$("#check1 input:checkbox").change(function() {
var feature = 0;
$("#check1 input:checkbox").each(function() {
if ($(this).is(':checked')) {
feature += parseInt($(this).prop('value'));
}
});
});
var grand = feature * (quantity * Number ('0.1'))
var total = quantity + grand
});
HTML:
<input id="phones" type="numerical" value="0" style="text-align: right"/>
<div id="check1">
<input type="checkbox" value="1" />
function getResult(feature, phones) {
if (feature <= 0 || phones <= 0) {
return 'Error...., enter the number of phones and check some checkbox';
}
return (feature * (+phones * 0.1)) + +phones;
}
function getFeature() {
var feature = 0;
$('#check1 input:checkbox:checked').each(function () {
feature += +$(this).prop('value') || 1;
});
return feature;
}
$(document).ready(function() {
var $phones = $('#phones'),
$result = $('#result');
$("#check1 input:checkbox").change(function() {
$result.html(getResult(getFeature(), $phones.val()));
});
$("#phones").keyup(function() {
$result.html(getResult(getFeature(), $phones.val()));
});
});
Demo: http://jsbin.com/hivilu/2/

Problems With Making Things Dynamic

Everything Works Fine if I create a duplicate Manually, But when I try to duplicate elements using j-query the function doesn't work except on the original created entry.The first input tag has a auto-complete source linked with the class that also only works with the original elements and not with the clones.
<div class="row add">
<form id="form1" action="#">
<input class="col-md-offset-1 col-xs-3 inpro clac" id="inpro1">
<input class="col-xs-1 mrp calc" id="mrp1">
<input class="col-xs-1 qt calc" id="qt1">
<input class="col-xs-1 dis calc" id="dis1">
<div class="col-xs-2 amt calc" id="amt1"></div>
<input type="submit" class="sub" id="sum1">
</form>
</div>
<button class="row col-md-offset-1 col-xs-1 add" id="copy">Add</div>
</div>
<script>
$('.calc').blur(function(e){
var k = this.id.substr(this.id.length-1);
var mrp = parseFloat( $('#mrp'+k).val() );
var qt = parseFloat( $('#qt'+k).val() );
var di = $('#dis'+k).val();
var dis = parseFloat( di );
var disc = di.substr(di.length-1);
var amt = "";
if (mrp>0 && qt>0 && dis>0) {
if (disc === "%") {
amt = mrp*qt - mrp*qt*dis/100;
} else {
amt = mrp*qt - dis;
}
var amount = "Rs."+ " " + Math.round( amt ) + " "+ "/-";
}
$('#amt'+k).html(amount);
e.preventDefault();
});
var scale = $("#copy").click(function() {
var add = $(".add");
var cnt = add.length + 1;
add.eq(0).clone().insertBefore(this)
.find("form").attr("id", "form" + cnt)
.find("input, div").each(function() {
this.id = this.id.replace(/\d+/, cnt);
if ($(this).is('div')) {
$(this).text = $(this).text("");
} else {
this.value = null;
}
});
});
</script>
Here is the fiddle http://jsfiddle.net/UwMML/
I have edited the fiddle,
You have to have the binding function separate, because you will have to use that to bind blur event each time you add a set of input fields. In your code, blur event is bound to .calc only one time.
This part will do the first event binding
$(document).ready(function(){
reBind();
});
For each time you click on Add button, this function will get executed. It will unbind all the prior bindings (to make the DOM overhead minimize) and re-bind blur event to all .calc inputs
function reBind(){
$('.calc').unbind("blur").blur(function(e){
var k = this.id.substr(this.id.length-1);
var mrp = parseFloat( $('#mrp'+k).val() );
var qt = parseFloat( $('#qt'+k).val() );
var di = $('#dis'+k).val();
var dis = parseFloat( di );
var disc = di.substr(di.length-1);
var amt = "";
if (mrp>0 && qt>0 && dis>0) {
if (disc === "%") {
amt = mrp*qt - mrp*qt*dis/100;
} else {
amt = mrp*qt - dis;
}
var amount = "Rs."+ " " + Math.round( amt ) + " "+ "/-";
}
$('#amt'+k).html(amount);
e.preventDefault();
});
}
You need to reinitialize your calc function after the new elements have been added:
function calc() {
$('.calc').blur(function (e) {
var k = this.id.substr(this.id.length - 1);
var mrp = parseFloat($('#mrp' + k).val());
var qt = parseFloat($('#qt' + k).val());
var di = $('#dis' + k).val();
var dis = parseFloat(di);
var disc = di.substr(di.length - 1);
var amt = "";
if (mrp > 0 && qt > 0 && dis > 0) {
if (disc === "%") {
amt = mrp * qt - mrp * qt * dis / 100;
} else {
amt = mrp * qt - dis;
}
var amount = "Rs." + " " + Math.round(amt) + " " + "/-";
}
$('#amt' + k).html(amount);
e.preventDefault();
});
}
calc();
var scale = $("#copy").click(function () {
var add = $(".add");
var cnt = add.length + 1;
add.eq(0).clone().insertBefore(this)
.find("form").attr("id", "form" + cnt)
.find("input, div").each(function () {
this.id = this.id.replace(/\d+/, cnt);
if ($(this).is('div')) {
$(this).text = $(this).text("");
} else {
this.value = null;
}
});
calc();
});
FIDDLE

How can I copy this function but with preset values?

Currently when a button is clicked, it subtracts an inputted value. I want to have a preset value subtracted once a preset button is clicked. It would also be perferable that I could reuse a function later on a different button with different values like so:
var preset = function(val1, val2, val3, val4) {
//function to subtract from current values
}
$('presetButton').click(function(){
preset(1,2,3,4)
}
Here is the current function as I have it. The first button function works, but I wanted to copy it into a preset button with preset values. The function would not include $(this) because the button would not be in the same wrapper div and are not siblings.
$(document).ready(function(){
$('button').click(function(){
var $button = $(this);
var subtract = parseInt($button.siblings('input').val(), 10);
var $currentP = $button.siblings('.number').children('p');
var current = parseInt($currentP.text(), 10);
var newVal = current - subtract;
var $history = $button.siblings('.wrap').children('.history');
if (isNaN(subtract)) {
alert("Please enter in a number");
} else {
$currentP.effect('bounce', function() {
$currentP.text(newVal);
$(this).show();
});
$history.append("<p>"+subtract+"</p>");
}
});
$('#presets').click(function(){
//set up the subtracting and current variables
var subCal = 120;
var subPro = 24;
var subCarbs = 3;
var subFat = 1;
//retrieve current number then convert to a number
var toNum = function(id) {
return parseInt($(id + ' .number').children('p').text(), 10);
}
var curCal = toNum('#calories');
var curPro = toNum('#protein');
var curCarbs = toNum('#carbs');
var curFat = toNum('#fats');
//create new values
var newCal = curCal - subCal;
var newPro = curPro - subPro;
var newCarbs = curCarbs - subCarbs;
var newFat = curFat - subFat;
//apply new values
var applyNew = function(id, newVal) {
$(id + ' .number p').text(newVal)
}
applyNew('#calories', newCal);
applyNew('#protein', newPro);
applyNew('#carbs', newCarbs);
applyNew('#fats', newFats);
//Add to presets to history
})
});
The HTML
<h1>Track your Macros</h1>
<div class="wrapper">
<div id="calories">
<div class="number"><p>1945</p></div>
<div class="label"><p>Calories</p></div>
<input type="text"></input>
<button>Subtract</button>
<div class="wrap">
<div class="history"></div>
</div>
</div>
<div id="protein">
<div class="number"><p>200</p></div>
<div class="label"><p>Protein</p></div>
<input type="text"></input>
<button>Subtract</button>
<div class="wrap">
<div class="history"></div>
</div>
</div>
<div id="carbs">
<div class="number"><p>173</p></div>
<div class="label"><p>Carbs</p></div>
<input type="text" class="subtract"></input>
<button>Subtract</button>
<div class="wrap">
<div class="history"></div>
</div>
</div>
<div id="fats">
<div class="number"><p>50</p></div>
<div class="label"><p>Fats</p></div>
<input type="text" class="subtract"></input>
<button>Subtract</button>
<div class="wrap">
<div class="history"></div>
</div>
</div>
</div>
<div id="presets"><img src="on-logo.png"></div>
Try
$(document).ready(function(){
$('button').click(function(){
var $button = $(this);
var subtract = parseInt($button.siblings('input').val(), 10);
var $currentP = $button.siblings('.number').children('p');
var current = parseInt($currentP.text(), 10);
var newVal = current - subtract;
var $history = $button.siblings('.wrap').children('.history');
if (isNaN(subtract)) {
alert("Please enter in a number");
} else {
$currentP.effect('bounce', function() {
$currentP.text(newVal);
$(this).show();
});
$history.append("<p>"+subtract+"</p>");
}
});
var preset = function(val1, val2, val3, val4) {
//set up the subtracting and current variables
var subCal = val1;
var subPro = val2;
var subCarbs = val3;
var subFat = val4;
//retrieve current number then convert to a number
var toNum = function(id) {
return parseInt($(id + ' .number').children('p').text(), 10);
}
var curCal = toNum('#calories');
var curPro = toNum('#protein');
var curCarbs = toNum('#carbs');
var curFat = toNum('#fats');
//create new values
var newCal = curCal - subCal;
var newPro = curPro - subPro;
var newCarbs = curCarbs - subCarbs;
var newFats = curFat - subFat;
//apply new values
var applyNew = function(id, newVal) {
$(id + ' .number p').text(newVal);
}
//apply new values
var applyHistory = function(id, val) {
$(id + ' .history').append("<p>" + val + "</p>");
}
applyNew('#calories', newCal);
applyNew('#protein', newPro);
applyNew('#carbs', newCarbs);
applyNew('#fats', newFats);
applyHistory('#calories', subCal);
applyHistory('#protein', subPro);
applyHistory('#carbs', subCarbs);
applyHistory('#fats', subFat);
}
$('#presets').click(function(){
preset(120,24,3,1);
})
});
Demo: Fiddle

Categories