Develop Reference

Logic for showing elements and hiding them on body click

I have some piece of code.
This code on button click open menu.
When i click on button again, menu is hidden (i remove .show class, show class has display:block rule, so i toggle visibility of this item by clicking on button).
In next line, i have event, which check what element is clicked. If i "click" outside" of menu, menu become hidden, beacuse i remove .show class.
And now i have a problem, it looks like first part of code dont work anymore (button.on('click')) - i mean, work, but second part of code is also executed, and this logic is now broken.
Have you got any idea for workaround?
Thanks
var menu = $('.main-menu');
var button = $('.burger');
button.on('click',function() {
if (menu.hasClass('show')) {
menu.removeClass('show');
$(this).removeClass('opened');
} else {
menu.addClass('show');
$(this).addClass('opened');
}
});
$(document).bind( "mouseup touchend", function(e){
var container = menu;
if (!container.is(e.target)
&& container.has(e.target).length === 0) {
container.removeClass('show');
button.removeClass('opened');
}
});

maybe use jQuery toggle() method ? For example:
button.on('click',function() {
menu.toggle();
});

You need to bind an outer click event only when the button click event has been triggered, and remove the outer click event when the outer click event has been triggered:
var menu = $('.main-menu');
var button = $('.burger');
button.on('click',function() {
if (menu.hasClass('show')) {
menu.removeClass('show');
$(this).removeClass('opened');
} else {
menu.addClass('show');
$(this).addClass('opened');
}
var butbindfunc = function(e){
var container = menu;
container.removeClass('show');
button.removeClass('opened');
$(this).unbind("mouseup touchend", butbindfunc);
};
$(document).not(button).bind( "mouseup touchend", butbindfunc);
});
Note, that I have removed your condition in the document binding callback, and simple excluded it from the select set.

Boostrap 3 active state button. How get total active button?

At page I have many button active state of type. I bind to the event click and check how many button have active status. But when I click at first button I get zero.
$(".btn-quote").on("click", function (e) {
var totalActiveQuote= $(".btn-quote.active").length;
if (totalActiveQuote > 0) {
console.log("active");
} else {
console.log("deactive");
}
});
What I should do to fix this?
jsfiddle.net
https://jsfiddle.net/haqkbvbh/

This is because the active class is toggled after your onClick event fires. You could fix it by toggling it on your own.
$(document).ready(function(){
$(".btn-quote").on("mouseup", function (e) {
$(this).toggleClass("myActive");
var totalActiveQiote = $(".btn-quote.myActive").length;
$("#totalActive").html(totalActiveQiote);
});
});

You could circumvent this by e.g.:
$(document).ready(function(){
$(".btn-quote").on("click", function (e) {
$(this).toggleClass("active");
var totalActiveQiote = $(".active").length;
$("#totalActive").html(totalActiveQiote);
});
});
https://jsfiddle.net/zpqcac1h/

toggle div content when click anywhere on the page

I have simple slider which I open/close on click event.
$('#tab1-slideout span').click(function () {
manageToggleStateTab1();
});
function manageToggleStateTab1() {
if (tab1ToggleState == 'collapsed') {
$('#tab1-content').slideToggle('slow');
$('#tab1-slideout span').addClass('active');
tab1ToggleState = 'expanded';
});
and on page load I set this tab1ToggleState with initial value
var tab1ToggleState = 'collapsed';
this works great but I want to expand this further in order to allow toggling state on click event anywhere outside #tab1-content container div.
I tried to wire click event anywhere on page except the one with toggle content
$(document).not($('#tab1-content')).click(function () {
manageToggleStateTab1();
});
but this not gives me desired result, div immediately slide down after it slide up.

you can use this function
// hide some divs when click on window
function actionwindowclick(e , el , action){
if (!$(el).is(e.target) // if the target of the click isn't the container...
&& $(el).has(e.target).length === 0) // ... nor a descendant of the container
{
action();
}
}
in click event
$(document).click(function (e) {
actionwindowclick(e , '#tab1-content' , function(){
// do action here
});
});
simply this function says if the element is not a target do the action
Working Demo
and while you use $(document).click(... you will need event.stopPropagation()
so for example
$('#tab1-slideout span').click(function (event) {
event.stopPropagation();
manageToggleStateTab1();
});
Working Example

Javascript - Click Button to FadeIn, FadeOut by clicking anywhere

I want my navigation to fade-in when a special button is clicked, and to fade away when the user is clicking somewhere else - doesn't matter where.
My Script looks like this:
function showText() {
var spoiler = document.getElementById('spoiler');
var button = document.getElementById('navicon');
if (spoiler.style.display == 'block') {
spoiler.style.display='none';
button.value = 'Text einblenden';
} else {
spoiler.style.display='block';
button.value = 'Text ausblenden';
}
return false;
}
My workaround was to give every navigation element the following code snippet.
onclick="$('#thedivlayeriwanttofadeout').fadeOut('slow');"
Can anybody help me?

Use bubbling to attach a single click handler to a common parent element (for example, body).
Here's a simple example:
$(function () {
$("#myButton").click(function (e) {
$("#hidden").fadeIn();
return false;
});
$("#parent").click(function() {
$("#hidden").fadeOut();
});
});
Clicking the button will fade in the element with id hidden. Clicking anywhere in parent will fade it out again.

How to change this code to mouse hover

I want to change this code to mouse hover.
// Login Form
$(function() {
var button = $('#loginButton');
var box = $('#loginBox');
var form = $('#loginForm');
button.removeAttr('href');
button.mouseup(function(login) {
box.toggle();
button.toggleClass('active');
});
form.mouseup(function() {
return false;
});
$(this).mouseup(function(login) {
if(!($(login.target).parent('#loginButton').length > 0)) {
button.removeClass('active');
box.hide();
}
});
});
When they hover on loginbox and Login form it should be visible otherwise the login form should be hidden.Right now when we click on it it shows up and when we click again it hides.

You want to use mouseover and mouseout instead of mouseup:
$(function() {
var button = $('#loginButton');
var box = $('#loginBox');
var form = $('#loginForm');
button.removeAttr('href');
button.mouseover(function() {
box.show();
button.addClass('active');
});
button.mouseout(function() {
box.hide();
button.removeClass('active');
});
});
From the docs:
The mouseover event is sent to an element when the mouse pointer enters the element. Any HTML element can receive this event.
and
The mouseout event is sent to an element when the mouse pointer leaves the element. Any HTML element can receive this event.
Here's a simple jsFiddle to demonstrate:
http://jsfiddle.net/bryanjamesross/58TqM/1/
NOTE: You probably want to attach these events to a common parent of the box and button, so that the box doesn't hide when the mouse pointer leaves the button. Since the parent container will expand to fit the box when it gets shown, you will then be able to interact with the form until the mouse leaves the parent container area.
*EDIT*: Here's an updated version that uses CSS to achieve the intended effect, rather than manually showing/hiding the form: http://jsfiddle.net/bryanjamesross/58TqM/2/

Just use mouseenter and mouseleave instead. The last event handler seems to close the loginBox when clicked outside it, and you don't really need it, but there's no harm in keeping it as an extra precaution so the user can close the box if mouseleave for some reason should fail :
$(function() {
var button = $('#loginButton'),
box = $('#loginBox'),
form = $('#loginForm');
button.removeAttr('href').on('mouseenter mouseleave', function(e) {
box.toggle();
button.toggleClass('active');
});
$(document).on('click', function(e) {
if( !($(e.target).closest('#loginButton').length)) {
button.removeClass('active');
box.hide();
}
});
});