We Keep Coding

Chaining multiple Jquery events with OR operator

I'm creating a panel that slides down when the user focuses the search box.
I'm terrible at Jquery but still learning, I've managed to create the basic functionality:
$(document).ready(function() {
$(".search-panel").hide();
$("#search_form [type='text']")
.focus(function() {
$(".search-panel").slideDown("fast");
})
.focusout(function() {
$(".search-panel").slideUp("fast");
});
});
with this basic functionality clicking outside the text box will fold up the panel I'm trying to implement a complex set of conditions whereby:
IF (textbox.focus) { show search panel}
IF (texbox.losefocus) && ( NOT search-panel.mouseover)
&& ( NOT (anything-in-search-panel-is-focused) )
basically I need to make sure that the user is not hovering over or interacting with the panel in some way and that the textbox is not focused before I slide it up.
JsFiddle of current situation:
http://jsfiddle.net/b9g9d6gf/

Instead of using the .focusout() function, you should bind a click function on the document.
$(document).ready(function () {
$(".search-panel").hide();
$("#search_form [type='text']")
.focus(function () {
$(".search-panel").slideDown("fast");
});
$(document).click(function(e) {
if( !( $(e.target).is('#search_form *')) ){
$(".search-panel").slideUp("fast");
}
});
});
If the document is clicked, anywhere, it looks if the target isn't a element inside #search_form. If not, it will slide up the .search-panel.
Note:
I removed the label and changed the span to labels. Clicking a label will also (un)check the checkbox inside it. Having three checkboxes making it act wrong. So either make three separate labels (instead of span) or remove it.
Updated Fiddle

Try this Working Demo
<script>
$(document).mouseup(function (e)
{
var container = $("#search_form");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
$(".search-panel").slideUp("fast");
}
else
{
$(".search-panel").slideDown("fast");
$("#search_form [type='text']").focus();
}
});
</script>

Hide div when user clicks outside unless closing lightbox

I'm currently using the following code to allow a user to show/hide a div on click.
When clicking anywhere outside of the div, it closes the div.
However, there is a link within the div which can open a lightbox. When a user goes to close that lightbox, it also closes the div that the link was contained. Is there anything I can add into the script to stop that from happening?
$(document).ready(function(){
$("a.dropdown-link").click(function(evt) {
evt.preventDefault();
var $div = $(this).next('.info-container');
$(".info-container").not($div).slideUp();
if ($div.is(":visible")) {
$div.slideUp()
} else {
$div.slideDown();
}
});
$(document).click(function(e){
var p = $(e.target).closest('.dropdown').length
if (!p) {
$(".info-container").slideUp();
}
});
$('.movie-link').magnificPopup({type:'iframe'});
});
<a class="dropdown-link" href="#"><div class="dropdown dropdown-processed">More info</div></a>
<div class="info-container" style="display: none;">Video preview: <a class="movie-link" href="videourl"></a></div>
I'm using Magnific Popup for the lightbox: http://dimsemenov.com/plugins/magnific-popup/
My JavaScript knowledge is pretty basic so any help is appreciated.

In the "click to close div function, you can check if the lightbox is on or not. A simple if ($("#lightbox").css("display") == "none") should be able to do the trick
EDIT: put this line after the $(document).ready line
var state = 0; // default state
$('.movie-link').click(function() { state = 1; }); // state = 1, lightbox on
in the source code, on line 384, insert this code
state = 2; //state = 2, lightbox close button clicked
the idea is not firing the "close div" function when the state is 1 (lightbox is on and clicking random stuffs inside, or outside the lightbox) or 2 (lightbox's close button got clicked), and return state to 0 when it was 2
so instead of the if I provided in the comment use this
if (state == 2) {
state = 0;
} else if (state == 0) {
//rest of the code
}
this is just something I put together and haven't tested yet, so I don't actually know if it works or not so just back up your js files just in case.
EDIT 2:
remove all the changes in edit 1 and use this on instead of the if (state == 2) {
if (e.target != $('.mfp-bg')[0] and e.target != $('.mfp-wrap')[0]) {
EDIT 3
var e_class = $(e.target).attr('class');
if (e_class != 'mfp-close' && e_class != 'mfp-container') {
working example: http://imgcrash.comeze.com/test.html

I'm not 100% without actually testing this out but you may be running into issues with $(document).click(...); since clicking anywhere on the document would trigger this event.
When you close the popup you're probably triggering this event and sliding up the info-container div.
It seems that you're looking for clicks on the divs with the class .dropdown. Why not use something like:
$('.dropdown').click(function(e) { ... });

Try this:
$("a.dropdown-link").click(function(evt) {
evt.preventDefault();
evt.stopPropagation(); //We stop the propagation of the event
//Changed it to slideToggle and added stop to prevent weird animation
//on multiple clicks
$(this).next('.info-container').stop().slideToggle()
});
$(document).click(function(e){
//Check if it has the class info-container
if (!$(e.target).hasClass("info-container")) {
$(".info-container").slideUp();
}
});
$('.movie-link').magnificPopup({type:'iframe'});
Fiddle

Remove class on click anywhere, unless a certain textbox is clicked on

I am trying to improve the following script a little:
$(document).click(function(event) {
$('.home.active').click();
$('.home').removeClass("active");
});
This works, but it works when I don't want it to work. For example, I have a textbox. If that textbox gets focus, the class should not be removed, but if anything else on the page is clicked, the class should be removed. So I tried the following, which does not work:
$(document).click(function(event) {
if( $('#txtHomeSearch').focus() ) {
// don't remove class
} else {
$('.home.active').click();
$('.home').removeClass("active");
}
});
This stops the class being remove altogether, no matter where I click, and the textbox always has focus.

You can use event.target to determine the id of the clicked element:
$(document).click(function(event) {
if (event.target.id === "txtHomeSearch") {
// Don't remove class.
} else {
$('.home.active').click();
$('.home').removeClass("active");
}
});

you can find the source of the event using the target property.
if ($(event.target).prop('id') == 'txtHomeSearch') {
//don't remove class
}

You can try. You might need to drop the # from #txtHomeSearch I can't remember off the top of my head.
$(document).click(function(event) {
if( $(this).attr('id') == '#txtHomeSearch') {
// don't remove class
} else {
$('.home.active').click();
$('.home').removeClass("active");
}
});

Use
$(document).click(function(event) {
if( event.target.id == 'txtHomeSearch' )
return;
$('.home.active').click();
$('.home').removeClass("active");
});
Whatever the $('.home.active').click(); does, might screw it up.

You can use the event.target property to cross-check the element.
The problem is your if( $('#txtHomeSearch').focus() ) ... that's not checking if it's in focus, its GIVING it focus.
to select a focused element you can use the jquery(1.6) :focus selector, use $(document.activeElement) for future reference

using is(':last') to check the last element

I have a list of input elements. I want to bind a keyup event handler to them, so that whenever user hits Enter, he goes to the next field. But if the input is the last input, then I want to fire the click event of a button, so that user goes to another level. My code is like this:
$('.loginBody input:visible').keyup(function (e) {
if (e.keyCode == 13) {
if ($(this).is(':last')) {
$('#next').click();
}
else {
$(this).closest('input').focus();
}
}
});
However, seems that is(':last') doesn't work. What's wrong?

:last returns the last element of a collection, and $(this) is only a single element collection.
Try using the :last-child selector instead, which will check whether your <input> is really the last one in that group.
Alternatively, if your fields aren't all in the same parent, reverse the sense of your test:
if ($('input').filter(':last').is(this)) {
// this is the last input
}
NB: using .filter(':last') rather than input:last per recommendations at http://api.jquery.com/last-selector/

UPDATED: You could create two different bindings:
$('.loginBody input:last').keyup(function (e) {
if (e.which == 13) {
$("#result").html("last one");
}
});
$('.loginBody input').not(":last").keyup(function (e) {
if (e.which == 13) {
$("#result").html("not last one");
}
});
Here is a working example: http://jsfiddle.net/6gYXk/1/

have you tried is(':last-child') pseudoclass instead?
:last-child means "if this element is the last child of its parent". Note that only element nodes (HTML tags) count, these pseudo-classes ignore text nodes.
edit:
also to focus closest sibling element use:
$(e.target).next('input').focus();
so full code can be:
$('.loginBody input:visible').keyup(function (e) {
if (e.keyCode == 13) {
if ($(this).is(':last-child')) {
$('#next').click();
} else {
$(e.target).next('input').focus();
}
}
});
i've prepared an example at: http://jsfiddle.net/HhvUF/

The nicest solution might well be to use nextAll to see if there are any subsequent sibling elements:
if ($(this).nextAll().length) {
$(this).closest('input').focus();
} else {
$('#next').click();
}
NB that I have turned the if around to make it easier to read.
If you need to check only for input elements, you can supply a selector:
if ($(this).nextAll('input').length) {

Radio - click action and length action

I have radios button on the page, when the page load, it will use length action to check and then hide/show some elements.
When user click on the radio, it will then hide and show some elements.
I'm wondering is this correct way doing it? Or how can it be improved?
$(document).ready(function() {
if ($(".delivery_type:radio").length > 0) {
if ($('#methodPickup').is(':checked')) {
$(".methodDelivery").hide();
$("#addressBookSelectBlock").hide();
$(".customAddress").hide();
}
if ($('#methodDelivery').is(':checked')) {
$(".methodPickup").hide();
}
}
$(".delivery_type:radio").live('click', function() {
if ($(this).val() == "pickup") {
$(".methodDelivery").hide();
$(".methodPickup").show();
$("#addressBookSelectBlock").hide();
$(".customAddress").hide();
}
if ($(this).val() == "delivery") {
if ($(".selectAddressList").length == 0) {
$(".customAddress").show();
}
$(".methodDelivery").show();
$(".methodPickup").hide();
$("#addressBookSelectBlock").show();
}
});
});

You could combine all the hide() and show() functions together:
if ($('#methodPickup').is(':checked')) {
$(".methodDelivery, #addressBookSelectBlock, .customAddress").hide();
}
// etc...
Also, I'm not sure why you are using live() unless the radio buttons are being dynamically added or removed; just use click() if they are not dynamic.
Sharing some HTML and a little more information might help with more suggestions.