I have a problem, I have a js code which append a span element. My problem is it keeps disappearing, its not a bug or something.
PS: I'm using jquery ui slider.What I'm doing is display the current value of my slider using the appended element(span). The only problem is it keeps disappearing when I click my other slider.
Here is all my code:
HTML
<div id = "opacity" class="slider-range"></div><br>
<div id = "volume" class="slider-range"></div><br>
Javascript
var append_element = $('<span></span>');
$('.slider-range').slider( {
animate : true,
});
$("#opacity").slider({
min : 0,
max : 100,
value : 60,
step : 10,
change : function(event, ui) {
slider_value('#opacity', ui.value);
}
});
$("#volume").slider({
min : 0,
max : 100,
value : 20,
step : 10,
change : function(event, ui) {
slider_value('#volume', ui.value);
}
});
function slider_value(id, response) {
append_element.removeClass().appendTo(id);
//remove '#' / get id
id = $(id).attr('id');
var new_span = $('span').addClass('slider-value-'+id);
$(new_span).html(response);
console.log(new_span);
}
Anyone. Pulling my hair here T_T.
Thanks.
You are just using one span at the whole page..
I think if you won't letting disappear it you have to use more than just one!
So you can use this code:
var append_element = '<span></span>';
$('.slider-range').slider( {
animate : true,
});
$("#opacity").slider({
min : 0,
max : 100,
value : 60,
step : 10,
change : function(event, ui) {
slider_value('#opacity', ui.value);
}
});
$("#volume").slider({
min : 0,
max : 100,
value : 20,
step : 10,
change : function(event, ui) {
slider_value('#volume', ui.value);
}
});
function slider_value(id, response) {
$(id).html(append_element);
//remove '#' / get id
id = $(id).attr('id');
var new_span = $('#'+id+'>span').addClass('slider-value-'+id);
$(new_span).html(response);
console.log(new_span);
}
Example: http://jsfiddle.net/c7myp/
Related
I want to filter some text based on the attribute data-length. For example if the slider is in between the value 15 and 20, I want all the tags to be displayed where the data-length is between these two values and hide the all those that have in the data-length more than 20 or less than 15.
Here is a link what I tried so far but was not successful:
FIDDLE
the jQuery code:
$(function() {
$('#slider-container').slider({
range: true,
min: 0,
max: 100,
values: [0, 20],
create: function() {
$("#value").val("0 - 20");
},
slide: function(event, ui) {
$("#value").val(" " + ui.values[0] + " - " + ui.values[1]);
var mi = ui.values[0];
var mx = ui.values[1];
filterSystem(mi, mx);
}
})
});
function filterSystem(minPrice, maxPrice) {
$("#computers div.match js-match").hide().filter(function() {
var price = parseInt($(this).data("data-length"), 10);
return price >= minPrice && price <= maxPrice;
}).show();
}
In your code there is no #computers id, so your selector won't run. You also do not have a div with the class match nor do you have a js-match node.
I would change your selector from #computers div.match js-match to em.match.js-match
You can also get the data length by using .attr('data-length'), or .data('length')
The result would be:
$("em.match.js-match").hide().filter(function () {
var price = parseInt($(this).data("length"), 10);
return price >= minPrice && price <= maxPrice;
}).show();
Edit: Also change your selector from $("#computers div.match js-match") to just $(".js-match")
You would simply use $(this).data("length") instead of $(this).data("data-length")
I have been created a simple apps, with a lot of Javascript code, I use jQuery too and the code looks so dirty. So now, I want to try restructure my code to Object-Oriented. What I've confused is where to call a properties, where to put an user action to an element, where to put dom element variable, etc. It's a bit of my code before and after restructure.
Before:
var $cloud = $(".js-cloud");
var $plane = $(".js-plane");
function randomPosition(min, max) {
return Math.random() * (max - min) + min;
}
$cloud.each(function(){
var leftPosition = randomPosition(1,100) + "%";
$(this).css("left",leftPosition)
var speed = $(this).data("speed");
$(this).velocity({
left : "-200px"
}, {
duration : speed,
easing : "linear",
loop : true
})
})
function loopPlane(){
$plane.velocity({
left : "-300px"
}, {
duration : 7000,
easing : "linear",
complete : function(){
$(this).css({
"right" : "-300px",
"left" : "auto"
})
loopPlane()
},
delay : 15000
})
}
loopPlane()
After:
//Clouds and plane element
var $cloud = $(".js-cloud");
var $plane = $(".js-plane");
/* Module */
var background = {
init : function(){
this.loopClouds();
this.loopPlane();
},
randomPosition : function(min,max){
return Math.random() * (max - min) + min;
},
loopPlane : function(){
var obj = this;
//Animate it
$plane.velocity({
left : "-300px"
}, {
duration : 7000,
easing : "linear",
complete : function(){
$plane.css({
"right" : "-300px",
"left" : "auto"
})
obj.loopPlane()
},
delay : 1000
})
},
loopClouds : function(){
var obj = this;
$cloud.each(function(){
var leftPosition = obj.randomPosition(1,100) + "%";
$(this).css("left",leftPosition)
var speed = $(this).data("speed");
//Animate it
$(this).velocity({
left : "-200px"
}, {
duration : speed,
easing : "linear",
loop : true
})
})
}
}
Is that my code look cleaner and readable? or there is a better version of my restructure code?
When you use $var.each, should you not be using the first parameter of the callback to target elements, instead of using this to target the $var array. If it's anything like a .forEach (but with an fn.init array), then the element is passed through the callback into the context of the loop.
You do this:
function loopClouds() {
var obj = this;
$cloud.each(function(){
var leftPosition = obj.randomPosition(1,100) + "%";
$(this).css("left",leftPosition)
var speed = $(this).data("speed");
//Animate it
$(this).velocity({
left : "-200px"
}, {
duration : speed,
easing : "linear",
loop : true
})
});
}
Shouldn't you be doing this?
function loopClouds() {
$cloud.each(function (cloud) {
cloud.css("left", randomPosition(1, 100));
cloud.velocity({left: "-200px"}, {
duration: cloud.data("speed"),
easing: "linear",
loop: true
});
});
}
This is just one example, but your usage of the this keywords seems to be a bit shoddy all-round.
I have two sliders in my page : one with period and the other one with amount. I want to get the values of the sliders every time them are changed, and that values use in another function. Here is my code
For period slider
$(function() {
$( "#slider-period" ).slider({
range : "max",
min : 3,
max : 12,
value : 4,
slide : function (event,ui) {
$(".period").html(ui.value+" years");
},
change : function (event,ui) {
$(".period").html(ui.value+" years");
}
});
});
For amount slider:
$(function() {
$( "#slider-amount" ).slider({
range : "max",
min : 500,
max : 150000,
step : 1000,
value : 1200,
slide : function (event,ui) {
$("#amount").html(ui.value+" RON");
},
change : function (event,ui) {
$("#amount").html(ui.value+" RON");
}
});
});
I want to make two global variables that are actualized every time the sliders are changed. Any idea?
Try making a global function that is called whenever they are updated.
function sliderUpdated() {
var periodVal = $( "#slider-period" ).slider("option", "value");
var amountVal = $( "#slider-amount" ).slider("option", "value");
//dostuff
}
For period slider
$(function() {
$( "#slider-period" ).slider({
range : "max",
min : 3,
max : 12,
value : 4,
slide : function (event,ui) {
$(".period").html(ui.value+" years");
},
change : function () {
sliderUpdated();
}
});
});
For amount slider:
$(function() {
$( "#slider-amount" ).slider({
range : "max",
min : 500,
max : 150000,
step : 1000,
value : 1200,
slide : function (event,ui) {
$("#amount").html(ui.value+" RON");
},
change : function () {
sliderUpdated();
}
});
});
You can just make two variables at the top of your script and update them from the change method of the jquery slider. For example
var years;
var amount;
$(function() {
$( "#slider-period" ).slider({
range : "max",
min : 3,
max : 12,
value : 4,
slide : function (event,ui) {
$(".period").html(ui.value+" years");
},
change : function (event,ui) {
$(".period").html(ui.value+" years");
years = ui.value;
}
});
});
$(function() {
$( "#slider-amount" ).slider({
range : "max",
min : 500,
max : 150000,
step : 1000,
value : 1200,
slide : function (event,ui) {
$("#amount").html(ui.value+" RON");
},
change : function (event,ui) {
$("#amount").html(ui.value+" RON");
amount = ui.value;
}
});
});
I have multiple sliders that share a common maximum number, I am trying to capture those numbers now into text inputs, but I don't know what I am doing. The JavaScript will print
the numbers into a span no issue as long as the class is "spent". But doesn't work when I've tried it with a text input. I've also made a jsfiddle for this
http://jsfiddle.net/zkyks/
What would the proper way be to bind these values to inputs? I have done this individually by calling the id but I don't know how to to implement that here.
Thanks in advance.
JS
$(
function () {
var
maxValueSlider = 100,
maxValueTotal = 100,
$sliders = $("#eq .work_slider"),
valueSliders = [],
$displaySpentTotal = $('#spent');
$displaySpendable = $('#spendable');
function arraySum(arr) {
var sum = 0,
i;
for (i in arr) sum += arr[i];
return sum;
}
$sliders.each(
function (i, slider) {
var
$slider = $(slider),
$spent = $slider.next('.spent');
valueSliders[i] = 0;
$slider.slider({
range: 'min',
value: 0,
min: 0,
max: maxValueSlider,
step: 5,
animate: true,
orientation: "horizontal",
slide: function (event, ui) {
var
sumRemainder = arraySum(valueSliders) - valueSliders[i],
adjustedValue = Math.min(maxValueTotal - sumRemainder, ui.value);
valueSliders[i] = adjustedValue;
// display the current total
$displaySpentTotal.text(sumRemainder + adjustedValue);
$displaySpendable.text(maxValueTotal - sumRemainder - adjustedValue);
// display the current value
$spent.text(adjustedValue);
// set slider to adjusted value
$slider.slider('value', adjustedValue);
// stop sliding (return false) if value actually required adjustment
return adjustedValue == ui.value;
}
});
});
});
HTML
<div class="panel">
<label class="panel_label">Sliders %:</label>
<div id="eq">
1:<div id="work_slider1" name="work_slider1" class="work_slider"></div>
<input type="text" name="work_spent1" id="work_spent1" />
2:<div id="work_slider2" name="work_slider2" class="work_slider"></div>
<input type="text" name="work_spent2" id="work_spent2" />
3:<div id="work_slider3" name="work_slider3" class="work_slider"></div>
<input type="text" name="work_spent3" id="work_spent3" />
4:<div id="work_slider4" name="work_slider4" class="work_slider"></div>
<input type="text" name="work_spent4" id="work_spent4" />
</div>
<div id="spendable">100</div>
</div>
To make minimal changes in your code, you just need to add one line just before return statement in your slide: function (event, ui) {...}:
$(this).next().val(adjustedValue); //set the value of input next to slider
And remove the <br/> between <div> and <input>.
Or keep one <br/> and use:
$(this).next().next().val(adjustedValue);
Working example: http://jsfiddle.net/k8UkE/
Did some code edititing for the first slider. See if it helps
Replaced following // $displaySpendable = $('#work_spent1')
//$displaySpentTotal.val(sumRemainder + adjustedValue);
$displaySpendable.val(maxValueTotal - sumRemainder - adjustedValue);
$(function () {
var
maxValueSlider = 100,
maxValueTotal = 100,
$sliders = $("#eq .work_slider"),
valueSliders = [],
$displaySpentTotal = $('#spent');
$displaySpendable = $('#work_spent1');
function arraySum(arr) {
var sum = 0,
i;
for (i in arr) sum += arr[i];
return sum;
}
$sliders.each(
function (i, slider) {
var
$slider = $(slider),
$spent = $slider.next('.spent');
valueSliders[i] = 0;
$slider.slider({
range: 'min',
value: 0,
min: 0,
max: maxValueSlider,
step: 5,
animate: true,
orientation: "horizontal",
slide: function (event, ui) {
var
sumRemainder = arraySum(valueSliders) - valueSliders[i],
adjustedValue = Math.min(maxValueTotal - sumRemainder, ui.value);
valueSliders[i] = adjustedValue;
// display the current total
**$displaySpentTotal.val(sumRemainder + adjustedValue);
$displaySpendable.val(maxValueTotal - sumRemainder - adjustedValue);**
// display the current value
$spent.text(adjustedValue);
// set slider to adjusted value
$slider.slider('value', adjustedValue);
// stop sliding (return false) if value actually required adjustment
return adjustedValue == ui.value;
}
});
});
});
First question from me! I have search for possible ways to do this function that i want but could not find anything that helped me out..
I´m new at javascript and working with this as base:
http://jsfiddle.net/danieltulp/gz5gN/42/
When i adjust the Price-slider, i want to se what price in numbers that i´m searching for.
ex. search from 123$ - 900$
And the same with quality.
I´m also trying to make each slider have different min-max and values, is that possible?
$(function() {
var options = {
range: true,
min: 0,
max: 250,
step: 1,
values: [0, 250],
change: function(event, ui) {
var minP = $("#price").slider("values", 0);
var maxP = $("#price").slider("values", 1);
var minQ = $("#quality").slider("values", 0);
var maxQ = $("#quality").slider("values", 1);
showProducts(minP, maxP, minQ, maxQ);
}
};
2 functions are needed. One for each slider's onChange event. After each onChange function execution min and max values for each slider should be updated based on the calculation results. showProducts() will work in its current form.
This UX feels too complicated. Have you considered representing your data filtering somehow else?
This is how i solved it!
fiddle found here: http://jsfiddle.net/5PAa7/28/
i put it in to two variables instead of two functions.
function showProductsP(minP, maxP) {
$(".product-box").filter(function() {
var price = parseInt($(this).data("price"), 10);
if(price >= minP && price <= maxP){
$(this).show();
} else {
$(this).hide();
}
});
$(function() {
var options = {
range: true,
min: 0,
max: 900,
step: 5,
values: [0, 900],
slide: function(event, ui) {
var minP = $("#slider-price").slider("values", 0);
var maxP = $("#slider-price").slider("values", 1);
var minL = $("#slider-length").slider("values", 0);
var maxL = $("#slider-length").slider("values", 1);
$(this).parent().find(".amount").html(ui.values[ 0 ] + " - " + ui.values[ 1 ]);
showProducts(minP, maxP, minL, maxL);
}
};
var options_length = {
range: true,
min: 0,
max: 60,
step: 1,
values: [0, 60],
slide: function(event, ui) {
var minP = $("#slider-price").slider("values", 0);
var maxP = $("#slider-price").slider("values", 1);
var minL = $("#slider-length").slider("values", 0);
var maxL = $("#slider-length").slider("values", 1);
$(this).parent().find(".amount").html(ui.values[ 0 ] + " - " + ui.values[ 1 ]);
showProducts(minP, maxP, minL, maxL);
}
};