I'm building a slider with a tooltip showing the updated value when the thumb is moved either by dragging or by clicking plus/minus button.
It works fine, but when I click plus/minus button AFTER dragging thumb it jumps to another position instead of continuing from where it is. How can I fix it to reflect the last value? Here's fiddle: https://jsfiddle.net/2q1rg56z/12/.
var update_num = $('output').text() * 1;
$('.plus').on('click', function() {
if (update_num < 100) {
$('output').text(++update_num);
$('input').val(update_num).trigger('input');
} else {
$('output').text(100);
}
});
$('.minus').on('click', function() {
if (update_num > 0) {
$('output').text(--update_num);
$('input').val(update_num).trigger('input');
} else {
$('output').text(0);
}
});
(It seems that the latest value should be stored in a var, so what should be the best way to do it?)
The problem is that this line only runs once:
var update_num = $('output').text() * 1;
You should turn it into a function
var update_num = function() { return +$('output').text(); };
Now call it in your code:
if (update_num() < 100) {
/***/
}
See this updated fiddle
Side Note: Note my use of + to convert a string to an integer.See http://www.jstips.co/en/converting-to-number-fast-way/
You have almost given the answer yourself. Whenever the slider is used, you have to update the variable update_num.
In your fiddle there is already the handler to do this:
$('.range-control > input').on('input', function() {
var value = this.value;
//...
So you only have to pull up your update_num so you can access it from the scope of the slider input handler and set it the value.
I updated the fiddle to make it work:
https://jsfiddle.net/2q1rg56z/14/
Related
I am working on a kendo Grid, on its databound event, I have called a function to check whether value in each of the row's second block is greater than first block. If true then I change color of texts inside by adding a class.
But, the problem is the added class gets away finally when I see on browser.
If there are two rows with error the first row that I am editing doesn't hold the class but the later ones holds that well.
dataBound: configureGridProperties,
Code for dataBound is
function configureGridProperties(e) {
try {
if (true) {
$('#grid .k-grid-content tr[role=row]').each(function (i) {
var sh = $(this).find('.sh').text();
var sm = $(this).find('.sm').text()
var eh = $(this).find('.eh').text()
var em = $(this).find('.em').text()
var startMin = parseInt(sh) * 60 + parseInt(sm);
var endMin = parseInt(eh) * 60 + parseInt(em);
if (startMin > endMin) {
showOutputExplicitly('Start time cannot be less than end time');
$(this).find('.sh, .sm,.eh,.em').addClass('timeError');
$('div.k-grid-pager').hide();
errorInTime = false;
}
else {
$(this).find('.sh, .sm,.eh,.em').removeClass('timeError');
if (!$('.timeError').length > 0) {
$('div.k-grid-pager').show();
hideErrorMsgSlow();
errorInTime = true;
}
}
});
}
return false;
} catch (e) {
}
pic for the situation . >
The second row that I just edited(start time 23) doesn't hold the colorChange class, but earlier ones hold that. Is there any other event that occurs after dataBound event?
It happens that when dataBound is called, the grid html elements are not rendered yet with the new data. I know that is strange, but I don't know other way than using setTimeout to make this work. So this may work:
dataBound: function(e) {
window.setTimeout(configureGridProperties.bind(this, e), 1);
}
Reference:
dataBound
bind()
So, I have a newletter signupo box, that fades in and out at a specific position of the page. The signup box also has a button to turn it off. When this is clicked i would like it to not show anymore until the page is reloaded. My assumption would be to assign a disablefade variable and then stop the scroll function to be executed. however, for some reason this doesnt work. When clicked on no thanks and scrolled again, the div will show again...
Thanks for your help!
jQuery(document).ready(function($) {
$("#nl-pop").hide(); //hide nl block initially
var disableFade = "false";
var topOfOthDiv1 = $("#newsletter-cta").offset().top - 1500;
var topOfOthDiv3 = $("#newsletter-cta").offset().top;
jQuery('#no-thanks').click(function(event) {
event.preventDefault();
jQuery('#nl-pop').fadeOut('slow');
var disableFade = "true";
});
console.log(disableFade);
if(disableFade === "false")
{
$(window).scroll(function() {
if($(window).scrollTop() topOfOthDiv1) { //scrolled past the other div?
$("#nl-pop").fadeOut(200); //reached the desired point -- show div
}
}
});
}
});
The disable fade variable value should be checked inside the scroll function like given below.
$(window).scroll(function() {
//here you check whether disableFade==="false"
if($(window).scrollTop().topOfOthDiv1 && disableFade==="false") {
$("#nl-pop").fadeOut(200);
}
}
});
In the code you have used the condition to check disableFade value outside the scroll function.
Also you should not use var everytime when you use a variable.
1: Use the type boolean instead of string. Remove the quotes from the assignment.
var disableFade = true;
2: You doing a new init. of the variable in the scope of the .click trigger. remove the var at the beginning. You want to override the variable, not create a new one.
3: Change you if condition to if(!disableFade)
jQuery(document).ready(function($) {
$("#nl-pop").hide();
var disableFade;
var topOfOthDiv1 = $("#newsletter-cta").offset().top - 1500;
var topOfOthDiv3 = $("#newsletter-cta").offset().top;
jQuery('#no-thanks').click(function(event) {
event.preventDefault();
jQuery('#nl-pop').fadeOut('slow');
var disableFade = true;
return disableFade;
});
console.log(disableFade);
if(disableFade !== true)
{
$(window).scroll(function() {
if($(window).scrollTop().topOfOthDiv1) {
$("#nl-pop").fadeOut(200);
}
}
});
}
});
A boolean does not require quotations when called.
So i am having trouble unhiding a div, once it has been hidden.
The code:
First object
$('#filter_region').on('change', function(e) {
var temp_region_id = $('#filter_region').val();
filterRegionId($temp_region_id);
});
Seconds object:
function filterRegionId(temp_region_id)
{
if ($(temp_region_id) != 1) {
$('.showheadline').hide(); }
else { $('.showheadline').show(); }
}
Really what i want to do, is once the region is changed from the original, the div should be hidden - this works!
However, once the person goes back on the same region, the div is still hidden.
The filter_region echos from 1-8 depending on the region. I realise that i have set the region to 1, this is to test. However, even if the if-statement is set to 1, it still shows the divs when loaded, even if the region is 2-8. Hope this make any sense at all! Please feel free to ask if there are any questions regarding my explanation.
Best Regards,
Patrick
Try this, without the $(..) around the var
$('#filter_region').on('change', function(e) {
var temp_region_id = $('#filter_region').val();
filterRegionId(temp_region_id);
});
function filterRegionId(temp_region_id)
{
if (temp_region_id != 1) {
$('.showheadline').hide();
}
else {
$('.showheadline').show();
}
}
A text input's value attribute will always return a string. You need to parseInt the value to get an integer
var temp_region_id = parseInt($('#filter_region').val(),10);
and remove the $ from variable name filterRegionId($temp_region_id); and if ($(temp_region_id) != 1) {
$('#filter_region').on('change', function(e) {
var temp_region_id = parseInt($('#filter_region').val(),10);
///parse it to integer
filterRegionId(temp_region_id);
});
function filterRegionId(temp_region_id){
if (temp_region_id!= 1)
$('.showheadline').hide();
else
$('.showheadline').show();
}
The best solution is to rewrite you code a little.
Please add the filterRegion function on top and change the parametter name as follows
var temp_region_id = $('#filter_region').val();
filterRegionId(temp_region_id);
$('#filter_region').on('change', function(e) {
temp_region_id= $('#filter_region').val();
filterRegionId(temp_region_id);
});
function filterRegionId(temp_region_id)
{
if ($(temp_region_id) != 1) {
$('.showheadline').hide();
}
else {
$('.showheadline').show();
}
}
I spent several hours on this and couldn't find a solution that worked, so I'm turning to you :) As you can see from this fiddle (http://jsfiddle.net/PPcgE/), I was able to target the radio buttons by click with this code:
$("input[type='radio']").click(function (e) {
if ($('.cos-cond').is(":visible")) {
e.preventDefault();
} else {
var clicked = $(this).attr('title');
var cls = [$('.one'), $('.two'), $('.three'), $('.four'), $('.five'), $('.six'), $('.seven'), $('.eight'), $('.nine'), $('.ten')];
for (i = 0; i < cls.length; i++) {
if (cls[i].attr('title') === clicked) {
cls[i].fadeIn('fast', function(){
setTimeout(function(){
$('.cos-cond').fadeOut('slow');}, 5000);
});
}
}
}
});
I'm trying to do exactly the same thing (displaying either span.eleven, span.twelve or span.thirteen this time) based on which option is clicked/selected in the select box. The best I've been able to manage is to get all three to appear at once.
Your original code is broken, i've create a fiddle that fixes it.
Your problem was when you were fading out, your selector was selecting all of them, visible or not, and then showing ALL of them while fading out.. thus always showing the last one (topmost).
if (cls[i].attr('title') === clicked) {
cls[i].fadeIn('fast', function(){
setTimeout(function(){
$('.cos-cond:visible').fadeOut('slow');}, 5000);
});
}
Beyond that you need to provide your attempt at how you tried to get the dropdown box working. You only provided the old code and nothing more.
Your code shouldn't be longer than this
$(document).ready(function(){
$("input[type='radio']").click(function (e) {
$('.cos-cond, .work-cond').hide();
var clicked = $(this).attr('title');
$('span.cos-cond[title=' + clicked + ']').fadeIn(300);
});
$("select").change(function (e) {
$('.cos-cond, .work-cond').hide();
var value = $(this).val();
var title = $('option[value="' + value + '"]', this).attr('title');
$('span.work-cond.' + title).fadeIn(300);
});
});
http://jsfiddle.net/PPcgE/5/
Try
$(".emf-hide").change(function(e){
var val = $(".emf-hide option:selected").val();
$('.work-cond').hide();
switch(val){
case 'Like New - No Functional Problems':
$('.eleven').show();
break;
case 'Minor Functional Problems':
$('.twelve').show();
break;
case 'Non-functional':
$('.thirteen').show();
break;
}
});
Working example here
What I am trying to do is find a way so that when a radio button is checked, the value assigned to it can be used in the calculations of the chart, and updates it instantly (just like the sliders do). I think im on the right path... here is a jsfiddle: http://jsfiddle.net/nlem33/ZhER3/
var selected = 1;
$(document).ready(function(event) {
$("input[name=chooseProduct]").change(function(){
selected = $(this).val();
});
Your change function can call the sliderHandler function directly, although it needs a slight modification to work when called this way:
$("input[name=chooseProduct]").change(function(){
selected = $(this).val();
sliderHandler();
});
and the sliderHandler needs this:
if (this.id === 'slider1') {
$('#slider1_value').html(ui.value);
units = ui.value;
} else if (this.id === 'slider2') {
$('#slider2_value').html('$' + ui.value);
price = ui.value;
}
http://jsfiddle.net/L5cY6/