We Keep Coding

How to close my dropdown when other areas clicked by jQuery?

I created a simple dropdown for my framework ..., I want to close it when other areas except dropdown clicked like Bootstrap.
This is my code :
$('.ji-dropdown-click button').click(function () {
var animationObject = $(this).parent().find('.ji-dropdown-menu').data('animation');
$(this).parent().find('.ji-dropdown-menu').toggle().addClass('animated' + ' ' + animationObject);
});
Can you please help me ? Thanks ...

Try this code:
$(document).click( function(){
$('.ji-dropdown-menu').hide();
});
It should work.

You can use this code:
$('body *:not(.ji-dropdown-click)').click(function() {
$('ji-dropdown-click').hide(500);
});

Hiding and showing divs when user uses select box not working correctly

For my website I allow the user to use a drop down to select various options, when they choose an option i have some jquery that should hide or show different pictures according to what they choose. However it doesn't seem to be changing.
I have created a js fiddle and put some text in on the cook section to try and test it but it still isn't working. Can anyone see why?
http://jsfiddle.net/av7E2/
$(document).ready(function () {
$('.box').hide();
$('#option1').show();
$('#select-portion').change(function () {
$('.box').hide();
$('#'+$(this).val()).show();
});
});
$(document).ready(function () {
$('.prepBox').hide();
$('#option10').show();
$('#select-prep-time').change(function () {
$('.prepBox').hide();
$('#'+$(this).val()).show();
});
});
$(document).ready(function () {
$('.cookBox').hide();
$('#cook1').show();
$('#select-cook-time').change(function () {
$('.cookBox').hide();
$('#'+$(this).val()).show();
});
});

Going by your fiddle, select-cook-time is a class and not an id value. Hence you should be using .select-cook-time instead. Try this
$('.select-cook-time').change(function () {
$('.cookBox').hide();
$('#'+$(this).val()).show();
});

I looked at your fiddle. You are using #select-portion when you should be using .select-portion. You seem to have the same problem with all other dropdowns.
Apply this changes and change handlers will be invoked.
$('#select-cook-time') -> $('.select-cook-time')
$('#select-prep-time') -> $('.select-prep-time')
$('#select-portion') -> $('.select-portion')

Well in your fiddle, you have class="select-portion" and in the jquery you are looking for # not .

After cleaning up some of the typos in the markup and cleaning up the jQuery we get this -
$(document).ready(function () { // one document ready handler (although you can use as many as you'd like, this is just cleaner)
$('.box, .prepBox, .cookBox').hide(); // combine selectors
$('#option1, #option10, #cook1').show(); // combine selectors
$('.select-portion').change(function () { // change to class selector
$('.box').hide();
$('#' + $(this).val()).show();
});
$('.select-prep-time').change(function () { // change to class selector
$('.prepBox').hide();
$('#' + $(this).val()).show();
});
$('.select-cook-time').change(function () { // change to class selector
$('.cookBox').hide();
$('#' + $(this).val()).show();
});
});
You can see this in operation here - http://jsfiddle.net/jayblanchard/av7E2/1/

Dynamically Uncheck All Checkbox's From Container Using A Textbox

fiddle - http://jsbin.com/OruFonU/1/edit
completed fiddle (for anyone who's in the same boat) - http://jsbin.com/OruFonU/15/edit
I'm trying to uncheck all checkbox's based upon the text in a texbox. If the textbox's value is equal to "Uncheck All" I want all checkbox's unchecked inside it's container div. (not all completely, just all inside the visible container)
I've tried the following but no luck.
.removeAttr('checked');
.attr('checked', false);
.prop('checked', false);
.is(':checked', false);
Here's the full JQuery/Javascript
$(document).ready(function() {
$('input[type=checkbox]').prop('checked', 'checked');
$('.show').hide();
$('.number-1').show();
$(".show-nums").on('load change', function() {
var val = $(this).val().toLowerCase();
if( $("." + val) && $("." + val).length ){
//check if there is a selector that corresponds to the value of the dropdown
$('.show').hide();
$("." + val).show();
}
});
$(".search").on('keyup change', function() {
var val = $(this).val();
if(val === "Uncheck All") {
$('.number-1 input[type=checkbox], .number-2 input[type=checkbox], .number-3 input[type=checkbox], .number-4 input[type=checkbox]').prop('checked', false);
}
});
});
If anyone can help me with this it'd be greatly appreciated.

It's because you wrap form inside p tag. Try to put your form inside div and it should work as expected
Demo

Basically your code would work. The thing that fails is the the selector for the inputs. You can fix that by fixing the selector for example juste use input[type=text].
There are other things you could improve, I have updated your jsbin:
http://jsbin.com/OruFonU/13/edit
you can dramatically simplify your code (and make it more readable) by doing this:
$(".show-nums").on('load change', function() {
var val = $(this).val();
$('.show').hide();
if( $("." + val) && $("." + val).length ){
//check if there is a selector that corresponds to the value of the dropdown
$("." + val).show();
}
});
side note: form tags are not allowed inside of paragraphs (p). Since inline elements are not allowed inside a p elements, the browser just assumes that the p tag was not closed and close it by him self. This is the result, and this is why your selector is not working:
The forms are not inside the P elements anymore.
If you have to stick to your HTML structure I would suggest you set the .number-n on the form tag.

you problem is that this selector:
$('.number-1 input[type=checkbox], .number-2 input[type=checkbox], .number-3 input[type=checkbox], .number-4 input[type=checkbox]')
returns [] empty.

just use $('input:checkbox').removeAttr('checked');
$(".search").on('keyup change', function() {
var val = $(this).val();
if(val === "Uncheck All") {
$('input:checkbox').removeAttr('checked');
});
I have used this in your fiddle and it works fine.
If you want to find specifically then you can use like this
$('.number-1').find('input[type=checkbox]:checked').removeAttr('checked');
$('.number-2').find('input[type=checkbox]:checked').removeAttr('checked');
$('.number-3').find('input[type=checkbox]:checked').removeAttr('checked');
$('.number-4').find('input[type=checkbox]:checked').removeAttr('checked');
You can also apply any loop here.

JS / jQuery - Filtering divs with checkboxes

I'm trying to filter some divs with checkboxes using the following code:
$("#filterControls :checkbox").click(function() {
$(".sectionContent").hide();
$("#filterControls :checkbox:checked").each(function() {
$("." + $(this).val()).show();
});
if($("#filterControls :checkbox").prop('checked') == false){
$(".sectionContent").show();
}
});
This works fine when you check the first checkbox, but it only filters with the others when you also have the first checkbox selected. It's hard to explain but try the JSFiddle: http://jsfiddle.net/BY9JL/
I don't want it to rely on having the first checkbox checked, is there a way around this?

Try
var sections = $('.sectionContent');
function updateContentVisibility(){
var checked = $("#filterControls :checkbox:checked");
if(checked.length){
sections.hide();
checked.each(function(){
$("." + $(this).val()).show();
});
} else {
sections.show();
}
}
$("#filterControls :checkbox").click(updateContentVisibility);
updateContentVisibility();
Demo: Fiddle

It's because your last if check, it will only check the first checkbox if it is checked or not.
You could change your last if block to see if there are any checked at all:
if($("#filterControls :checkbox:checked").length == 0){
$(".sectionContent").show();
}

These jQuery custom check boxes aren't working correctly

I am trying to use these custom MacOSX-style check boxes on my site (it's a jQuery plugin), but when I check one, it doesn't actually trigger the $('#input').is(':checked'); until you uncheck and then it gets messed up.
Whenever you check a box, I add some CSS to the line that is checked to add a yellow background to it. But, I'm having trouble with them. This image explains it below:
I don't understand why it does this. This is my checkIt() function that adds the yellow background when you check a line:
function checkIt(id) {
if ($('#checkbox_' + id).is(':checked')) {
$('#' + id).addClass("selected");
}
else {
$('#' + id).removeClass("selected");
}
}
And I call this onclick when the checkbox is clicked. Here is some example markup that is generated by the PHP:
<span class="inbox_check_holder">
<input type="checkbox" value="96874" onclick="checkIt(96874)" id="checkbox_96874" class="inbox_check" />
<div class="star_clicker" id="star_96874" onclick="addStar(96874)" title="Not starred"><span id="starimg_96874" class="not_starred"></span></div>
</span>
I'm thinking it is something to do with this custom checkbox jQuery plugin adding in extra elements over the <input />.
Here's the jQuery checkbox plugin page if you need to see it, they have tons of examples on it. (Obviously) I am using the "Safari" skin.

try
$(".inbox_check").live("change",function(e){
e.stopPropagation();
if($(this).is(":checked"))
$('#' + id).addClass("selected");
else
$('#' + id).removeClass("selected");
});
http://jsfiddle.net/BXjg7/3/
with jquery 1.7 you can use on
$("body").on("change", ".inbox_check", function(e){
e.stopPropagation();
if($(this).is(":checked"))
$('#' + id).addClass("selected");
else
$('#' + id).removeClass("selected");
});
http://jsfiddle.net/BXjg7/10/
delegate example
$("body").delegate(".inbox_check","change", function(e){
e.stopPropagation();
if($(this).is(":checked"))
$('#' + id).addClass("selected");
else
$('#' + id).removeClass("selected");
});
http://jsfiddle.net/BXjg7/15/