I'm trying to compare two values from a dual input range slider. If the bottom value is equal or greater than the top value, I want to return false. This is to prevent overlap between the two thumbs.
I have used .change to listen for changes. I can then console.log & return the value after it's been updated. I have included the last bit of code in the hope for help. You can see an full almost working version here:
https://fiddle.jshell.net/elliottjb7/fj9ot08v/
Thanks
$("input[type='range'][id='text_box_bottom_range']").change(function() {
var bottom = $("input[type='range'][id='text_box_bottom_range']").val();
console.log("bottom = " + bottom);
return bottom;
});
$("input[type='range'][id='text_box_top_range']").change(function() {
var top = $("input[type='range'][id='text_box_top_range']").val();
console.log("top = " + top);
return top;
});
$("input").blur(function() {
if ($("input[type='range'][id='text_box_bottom_range']").val() > this.val) {
console.log("Bottom is higher than Top");
return false;
} else {
return true;
}
});
this line
if ($("input[type='range'][id='text_box_bottom_range']").val() > this.val) {
should be
if ($("input[type='range'][id='text_box_bottom_range']").val() > $("input[type='range'][id='text_box_top_range']").val()) {
Change your blur event on the input element to
$("input").blur(function() {
if ($('#text_box_bottom_range').val() >= $('#text_box_top_range').val()) {
console.log("bottom is equal or higher than the top");
return false;
} else {
return true;
}
});
$("#text_box_bottom_range").change(function() {
return $(this).val();
});
$("#text_box_top_range").change(function() {
return $(this).val();
});
$("input").blur(function() {
if ($("#text_box_bottom_range").val() => $("#text_box_top_range").val()) {
return false;
} else {
return true;
}
});
This does the correct check where bottom is:
...equal or greater than the top value
Also, the first 2 functions (.change()) are quite redundant for what you are trying to achieve but I've included a better way to write them
Related
I have a function that says if there are checkboxes with the value greater than 63, than show div, otherwise hide div.
function show_no_taxonomies() {
if ($('.store_checkbox:checked').val() > 63){
$("#hidden_taxon_message").show();
$("#hidden_taxon_message").text('This store does not have any texonomies');
}else {
$("#hidden_taxon_message").hide(); // something is selected
}
}
I need to redefine this conditional if statement to count the taxonomies. I have this tag attached to all of these checkboxes :
taxonomies_count="0"
I need the conditional statement to say if there are checkboxes with the taxonomies_count greater than 0, than show div, otherwise hide div.
<input id="idea_store_ids_" class="store_checkbox" type="checkbox" value="124"
taxonomies_count="0" name="idea[store_ids][]"></input>
This will do what you've asked...
function show_no_taxonomies() {
var taxonomiesCount = false;
$('.store_checkbox:checked').each(function() {
if ($(this).attr("taxonomies_count") > 0) {
taxonomiesCount = true;
return;
}
});
if (!taxonomiesCount){
$("#hidden_taxon_message").show();
$("#hidden_taxon_message").text('This store does not have any taxonomies');
}else {
$("#hidden_taxon_message").hide(); // something is selected
}
}
However, I'd recommend using a data attribute, rather than a custom attribute. Like this...
<input id="idea_store_ids_" class="store_checkbox" type="checkbox" value="124" data-taxonomies-count="0" name="idea[store_ids][]" />
and the script would be...
function show_no_taxonomies() {
var taxonomiesCount = false;
$('.store_checkbox:checked').each(function() {
if ($(this).data("taxonomies-count") > 0) {
taxonomiesCount = true;
return;
}
});
if (!taxonomiesCount){
$("#hidden_taxon_message").show();
$("#hidden_taxon_message").text('This store does not have any taxonomies');
}else {
$("#hidden_taxon_message").hide(); // something is selected
}
}
I solved this by logically simplifying my code by making 2 more large picture functions. Then, calling those functions into my larger function.
$(document).ready(function() {
$(".store_checkbox").change(function () {
$('div[store_id=' + this.value + ']').toggle(this.checked);
show_no_store_message();
}).change();
show_no_store_message();
});
function show_no_store_message() {
if (!is_store_selected()) {
$("#hidden_taxon_message").show(); // none are checked
$("#hidden_taxon_message").text('Please select store before selecting taxonomies');
} else if (is_store_selected() && !do_any_stores_have_taxonomies() ) {
$("#hidden_taxon_message").show(); // none are checked
$("#hidden_taxon_message").text('None of the stores you selected have taxonomies');
} else {
$("#hidden_taxon_message").hide(); // something is selected
}
}
// returns true if any store is selected
function is_store_selected(){
return ($('.store_checkbox:checked').length > 0);
}
// Returns true if any store selected AND store has taxonomiess
function do_any_stores_have_taxonomies(){
$('.store_checkbox:checked').each(function() {
if ($(this).attr("taxonomies_count") > 0) {
return true;
}
});
return false;
}
I'm having trouble getting the "else" bit of this working. Anyone know what the problem is?
var navOpen = false;
if (navOpen == false) {
$("nav").click(function() {
$(this).css("bottom","0");
navOpen = true;
});
} else {
$("nav").click(function() {
$(this).css("bottom","-84");
navOpen = false;
});
}
The condition is in the wrong place.
var navOpen = false;
$("nav").click(function() {
if (navOpen == false) {
$(this).css("bottom","0");
navOpen = true;
} else {
$(this).css("bottom","-84px");
navOpen = false;
}
});
You are binding several handlers to the same element, you can use css method:
$("nav").click(function() {
$(this).css("bottom", function(i, bottom) {
return bottom === '0px' ? '-84px' : '0px';
// return navOpen ? '-84px' : '0px';
});
})
Try with
$(this).css("bottom","-84px");
You need to define metering (e.g px, %). CSS doesn't support just numering parameters like HTML attribute does.
Okay,
Another novice type question.
I have this array within the head section on my website and want to use it inline JavaScript:
var MyVariable = {"chkboxid":"chkbox"}
chkboxid is a id of a checkbox input.
Now, while validating the checkbox input on form submit, neither this works
$("form#myform").submit(function () {
if ($(MyVariable.chkboxid).is(":checked")) {
} else {
alert(CommentsPlus.nochkboxmsg);
return false;
}
Nor This (check the double quote at the variable)
$("form#myform").submit(function () {
if ($("MyVariable.chkboxid").is(":checked")) {
} else {
alert(CommentsPlus.nochkboxmsg);
return false;
}
However, if I hardcode the checkbox input id, it works. I mean "input#chkbox" in place of MyVariable.chkboxid.
$("form#myform").submit(function () {
if ($("input#chkbox").is(":checked")) {
} else {
alert(CommentsPlus.nochkboxmsg);
return false;
}
How can I use that variable instead of hard coding the input id?
You are missing the "#" before the ID:
$("form#myform").submit(function () {
var element = $("#" + MyVariable.chkboxid)
if (element.is(":checked")) {
} else {
alert(CommentsPlus.nochkboxmsg);
return false;
}
}
Note however that chkboxid is the key, the actual ID of the checkbox should be the value:
var MyVariable = {"chkboxid": "real_id_here"}
please check below code.hope it will work
$("form#myform").submit(function () {
if ($("#chkboxid").is("checked")) {alert("checked");
} else {
alert("not checked");
}
});
thanks,Ripa Saha
I have a list of urls(div) underneath an input field(div). I need the ability to come down in the list and than by hitting enter this will trigger some function designated to the url. This is the fidle: the script
Over the last days I have tried to much things to explain, but in conclusion none of it worked. Help would be appreciated.
After this line of code :
// set timers to do automatic hash checking and suggestions checking
setInterval(checkHash,500);
setInterval(checkSuggest,500);
Insert this :
$('#searchbox').keyup(
function (e){
var curr = $('#suggest').find('.current');
if (e.keyCode == 40)
{
if(curr.length)
{
$(curr).attr('class', 'display_box');
$(curr).next().attr('class', 'display_box current');
}
else{
$('#suggest li:first-child').attr('class', 'display_box current');
}
}
if(e.keyCode==38)
{
if(curr.length)
{
$(curr).attr('class', 'display_box');
$(curr).prev().attr('class', 'display_box current');
}
else{
$('#suggest li:last-child').attr('class', 'display_box current');
}
}
if(e.keyCode==13)
{
var search_terms = $('.current a').text();
// perform a search with this text...
doSearch(search_terms,true,false);
//update the search textbox
$('#searchbox').val(search_terms);
}
})
And don't forget to delete the previous code at the bottom...
I got a strange requirement:
function TextLimit(elem, maxChars) { ... }
Where elem is a textarea or input of type=text and maxChars is the maximum number of characters that could go into the elem. The code inside the function must limit the length of the text inside elem to maxChars when the user is typing. However, if the user is pasting for the first time, the elem must take everything that was pasted even if the pasted text has more characters then maxChars.
EDIT: If the pasted text is longer then maxChars, then after pasting for the first time, the user can't type/paste anymore, unless the text is deleted/backspaced to a length smaller then maxChars.
Any suggestions using plain JavaScript or jQuery would be appreciated.
The maxlenght attribute doesn't allow for pasting. Setting/removing it programmaticaly on paste, doesn't work well in all browsers. Taking substring of elem's value on keydown/keypress/keyup produces some funky results.
Something like this seems to work:
Couple of things to work out still, like allowing the delete key if the max is reached. Should be easy fixes though.
Try it out: http://jsfiddle.net/wxUZz/7/ (updated)
function TextLimit(elem, maxChars) {
var permittedKeys = [8,37,38,39,40,46];
elem.focus(function() {
if(elem.val().length >= maxChars) {
elem.data('prevent', true);
elem.data('value', elem.val());
}
});
elem.blur(function() {
if( elem.data('prevent') ) {
elem.val( elem.data('value') );
}
});
elem.keydown(function(event) {
var count = elem.val().length;
if(count >= maxChars && $.inArray(event.which, permittedKeys) < 0) {
elem.data('prevent', true);
elem.data('value', elem.val());
return false;
} else {
elem.data('prevent', false);
}
});
}
TextLimit($('#myTextarea'), 30);
function TextLimit(elem, maxChars) {
var permittedKeys = [8,37,38,39,40,46];
elem.focus(function() {
if(elem.val().length >= maxChars) {
elem.data('prevent', true);
elem.data('value', elem.val());
}
});
elem.blur(function() {
if( elem.data('prevent') ) {
elem.val( elem.data('value') );
}
});
elem.keydown(function(event) {
var count = elem.val().length;
if(count >= maxChars && $.inArray(event.which, permittedKeys) < 0) {
elem.data('prevent', true);
elem.data('value', elem.val());
return false;
} else {
elem.data('prevent', false);
}
});
}
TextLimit($('#myTextarea');