We Keep Coding

show and hide div using jquery, same as mashable.com website

http://mashable.com/
I have this script:
$(document).ready(function(){
$(".show_hide5").mouseover(function(){
$('.selected').removeClass('selected');
$(this).next().fadeIn("slow").addClass('selected');
$(".slidingDiv5").not('.selected').fadeOut("slow");
});
$('.selected').removeClass('selected');
$(this).next().fadeIn("slow").addClass('selected');
$(".slidingDiv5").not('.selected').fadeOut("slow");
});
and this script is working well so far, but it's still missing something, for now it's show the div on mouseover on the arrow as you can see on mashable website but the share area don't hide on mouseout only it's hide once you put the mouse on another arrow.
all i need is to hide the share area on mouseout.
thanks in advance.

If I understand well, you want to fade out .slidingDiv5 on mouseleave event:
$(document).ready(function(){
$(".show_hide5").mouseover(function(){
$('.selected').removeClass('selected');
$(this).next().fadeIn("slow").addClass('selected');
$(".slidingDiv5").not('.selected').fadeOut("slow");
});
$(".show_hide5").mouseleave(function(){
$(".slidingDiv5").fadeOut("slow");
});
});

Handle Conflicts Between Document Click and Element Click

So I have a dropdown, which I hide and show based on an element click. However, I also want to hide this dropdown whenever it is visible if I click anywhere else in the document.
This is the dropdown code:
function dropdown(){
$('#smenubutton').click(function(e){
var submenu = $(this).find('.submenu');
if (submenu.is(':visible')){
submenu.hide();
}else{
submenu.show();
}
});
}
however, a code like this:
$(document).click(function(e){
e.stopPropagation();
$('.submenu').hide();
});
will obviously always hide the submenu. both are loaded in document load. I know I am just missing something so simple. Feel free to point me to a duplicate(I have tried searching but can't find any questions based on my needs) and close this question.

You should check if e.target is the submenu and hide the submenu only if it's not (in this case i check if it has the class submenu)
$(document).click(function(e){
if($(e.target).hasClass("submenu")){
$('.submenu').hide();
}
});

Since you mentioned "outside the browser", try this: http://www.thefutureoftheweb.com/blog/detect-browser-window-focus
EDIT: Since OP edited the question, I'll edit the answer:
$(document).on('click', '#submenu', function(e) {
e.stopPropagation();
// show or hide the submenu here
});
$(document).on('click', function(e) {
// hide submenu here
});
example: http://jsfiddle.net/A3SfP/

Try on blur() or focusout():
$('#smenubutton').blur(function(){ submenu.hide(); });
// OR
$('#smenubutton').focusout(function(){ submenu.hide(); });
If it doesn't work try giving your menu an explicit tabindex.

Jquery hover vs. click expandable menu

A client has a site built in Magento, and there's this bit of javascript controlling how the menu is displayed:
<script type="text/javascript">
jQuery('.nav-add li.level0, .nav li').hover(
function(){
jQuery(this).children('.nav-widget:not(.inSlide), ul:not(.inSlide)').addClass('inSlide').slideDown(700,function(){
});
},
function(){
jQuery(this).children('.nav-widget, ul:not(.active)').delay('2000').slideUp(500,function(){
jQuery(this).removeClass('inSlide');
});
}
)
jQuery('.nav-widget').hide();
</script>
Right now it's set to expand whenever the user hovers on an item, but it's rather annoying to try to navigate that way. Is it possible to modify this code so that it expands when a user clicks on an item?
I tried replacing .hover with .click or .mouseup to no avail.

Assuming you just want to toggle the hover behavior by click instead of hover you can try something like this.
jQuery('.nav-add li.level0, .nav li').click(function(){
if(!$(this).data('clicked')){
jQuery(this)
.data('clicked', true)
.children('.nav-widget:not(.inSlide), ul:not(.inSlide)')
.addClass('inSlide')
.slideToggle(700,function(){
});
}
else{
jQuery(this)
.data('clicked', false)
.children('.nav-widget, ul:not(.active)')
.delay('2000')
.slideUp(500,function(){
jQuery(this).removeClass('inSlide');
});
}
});
jQuery('.nav-widget').hide();

The reason it doesn't work by simply replacing the .hover() with .click() is because the hover event needs two functions, one for onhover one for offhover. The .click() event only takes one function. I assume you want the top function as your click event.
jQuery('.nav-add li.level0, .nav li').click(
function(){
jQuery(this).children('.nav-widget:not(.inSlide),
ul:not(.inSlide)').addClass('inSlide').slideDown(700,function(){
});
}

basic problem in jQuery code

http://jsfiddle.net/nhmbA/
In above link you'll find my working code.
The issue is when you first click on Select For button, it'll show a list but again you click on the same button then the list should not be visible but its vice-versa.
I know, this is due to blur event applied to the list but I also want the list to be hidden when its clicked outside.
Help me to sort this minor issue..

In your code change
$('.tglrOptns').blur(function(){
$(this).css('display', 'none').siblings('.optnTglr:first').removeClass('seltd');
});
to
$('body').click(function(e){
$('.tglrOptns').css('display', 'none')
.siblings('.optnTglr:first').removeClass('seltd');
});
and add this
$('.tglrOptns').click(function(e){
e.stopPropagation();
});
Demo

I have added a close label, on clicking it closes the options div

hi if you change the on click function
to:
$('.optnTglr').live('click', function(e){
this should help

jquery menu, hover and display:none

I have this menu http://jsbin.com/useqa4/3
The hover I think works correct, but what I want is the normal: when the user's cursor isn't on the "Solution" item or on the submenu then I want the div #submenuSolutions to return in "display:none".
How can I achieve this?

If you read the jQuery api more carefuly you will see that the hover function can take handle two events http://api.jquery.com/hover/
$("document").ready(function() {
$("#menuSolutions a").hover(function () {
$("#menuSolutions").addClass("menuHover");
$("#submenuSolutions").show("3000");
},function() {
$("#menuSolutions").removeClass("menuHover");
$("#submenuSolutions").hide("3000")});
});​
This will work only if your menu is a suckerfish menu.

See Demo
Just added this code to hide it back when mouse leaves it:
$("#submenuSolutions").mouseleave(function(){
$(this).hide();
});
Since submenuSolutions is the id of your panel, you can use the mouseleave event which triggers when mouse leaves the area of element specified.