Develop Reference

Hiding <div> block doesn't work on mobile

I have callback button and hidden callback form.
Form shows up after click on button and hide after click on any place on the screen except the form-space.
BUT! Form don't hide on mobile devices. I think that problem is in touch tracking on iOS.
How can i fix this problem?
function showcallbackform (objName) {
if ( $(objName).css('display') == 'none' ) {
$(objName).animate({height: 'show'}, 200);
} else {
$(objName).animate({height: 'hide'}, 200);
}
};
jQuery(function($){
$(document).mouseup(function (e){
var div = $("#callback-form");
if (!div.is(e.target)
&& div.has(e.target).length === 0) {
div.hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You can bind both actions (mouse and touch events) like this:
jQuery(function($){
$(document).bind( "mouseup touchend", function(e){
var div = $("#callback-form");
if (!div.is(e.target)
&& div.has(e.target).length === 0) {
div.hide();
}
});
});

Hide popover on body click only if already visible

Hiding a div (for example #popover) on click is easy:
$(document).ready(function() {
$("#trigger").click(function(e) {
$("#popover").toggle();
e.stopPropagation();
});
$(document).click(function(e) {
if (!$(e.target).is('#popover, #popover *')) {
$("#popover").hide();
}
});
});
But isn't this function fired every time the user uses a click? (Which does not make sense for me). Can I somehow limit this function to fire only if #popover is already visible?

In that case you can try using $(document).one(function(e) {...}); every time you show #example.
$(document).ready(function() {
var didBindToBody = false;
function closePopOverOnBodyClick() {
didBindToBody = true;
$(document).one('click', function(e) {
if (!$(e.target).is('#popover, #popover *')) {
$("#popover").hide();
}
else {
closePopOverOnBodyClick();
}
didBindToBody = false;
});
}
$("#trigger").click(function(e) {
$("#popover").toggle();
e.stopPropagation();
if (!didBindToBody && $("#popover").is(":visible")) {
closePopOverOnBodyClick();
}
});
closePopOverOnBodyClick();
});
DEMO

You could try something like
$(document).click(function(e) {
if (!$('#example').is(":visible")) {
return false;
} else if (!$(e.target).is('#popover, .login-panel *')) {
$("#popover").hide();
}
});
Or you could combine the two conditionals into one, just thought I'd keep it separate for readability and to make my suggestion easier to spot.

Close pop-up menu by clicking anywhere on the page

I have the following code:
var toggleButton = $('.menu-toggle'),
timerDelay;
toggleButton.on("click", function() {
var elem = $(this),
menu = elem.siblings('ul'),
parent = elem.parent(),
parentParent = parent.parent(),
pageH = $(window).height();
elem.toggleClass('pressed');
menu.stop(true);
clearTimeout(timerDelay);
if (menu.is('.scrollable')) {
menu.css({"max-height": pageH - 80});
}
parent.toggleClass('showed');
if (menu.is('.parent')) {
parentParent.toggleClass('showed');
}
if (menu.is('.hidden')) {
menu.css({"height": "100%", "padding": 5}).toggleClass('hidden showed');
} else {
menu.toggleClass('hidden showed');
if (menu.is('.nodelay')) {
menu.css({"height": 0, "padding": ""});
} else {
timerDelay = setTimeout(function() {
menu.css({"height": 0, "padding": ""});
}, 450);
}
}
});
This is the code for a pop-up menu. The problem is that it requires clicking on a specific button to close it. I'm trying to also make it close whenever the user clicks anywhere on the page.
Is there a way?
Maybe I gave the wrong code. This is another section:
$(document).click(function (e)
{
var container = $("#wrapper");
if (!container.is(e.target) && container.has(e.target).length === 0 && event.target.id!=="menu-toggle")
{
container.addClass("toggled");
}
});
Could I mix it with this?
$(document).mouseup(function (e)
{
var container = $("YOUR CONTAINER SELECTOR");
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
{
container.hide();
}
});

$(document).one("click",function() {
if ($(".showed").is(":visible")) {
$(".pressed").trigger("click");
}
});

This would help, provided your menu has a class 'menu'.
$('.menu, .menu-toggle').on('click', function(e) {
e.stopPropagation();
});
$('body').on('click', function(e) {
if($('.menu').hasClass('showed')){
//code to hide menu
// i have clicked the toggle button here since the logic to hide menu is not separate in your code
toggleButton.click();
}
});
Here is an example jsfiddle:
https://jsfiddle.net/okbpxb14/

Without a working example...
You can do something like this:
var toggleButton = $('.menu-toggle'),
timerDelay;
toggleButton.on("click", toggleDisplay);
function toggleDisplay() {
var elem = $(this),
menu = elem.siblings('ul'),
parent = elem.parent(),
parentParent = parent.parent(),
pageH = $(window).height();
elem.toggleClass('pressed');
menu.stop(true);
clearTimeout(timerDelay);
if (menu.is('.scrollable')) {
menu.css({"max-height": pageH - 80});
}
parent.toggleClass('showed');
if (menu.is('.parent')) {
parentParent.toggleClass('showed');
}
if (menu.is('.hidden')) {
menu.css({"height": "100%", "padding": 5}).toggleClass('hidden showed');
$(window).addEventListener('click', toggleButton);
} else {
menu.toggleClass('hidden showed');
if (menu.is('.nodelay')) {
menu.css({"height": 0, "padding": ""});
} else {
timerDelay = setTimeout(function() {
menu.css({"height": 0, "padding": ""});
}, 450);
}
$(window).removeEventListener('click', toggleDisplay);
}
}
addEventListener to the window when it is show. When window is clicked run the toggle function.
removeEventListener from the window when it is hidden.
One issue this still has is that if the menu is clicked it will still hide, so you would need to add logic that if the menu is clicked to return;
Update After looking at you're live example.... Instead of using window you can use '.blog-content'

Hide button on toggle

I have a simple request but I have a a toggle button which basically hides a div off screen to the left which works fine. The button is on the inside of the div so when it hides the div you are unable to open it again because the button is off the screen. Now I have created a new button to open it but I only want it to show once the div has been hidden, so its like a tab just showing to open the div again.
// Slider info box toggle
function toggleDivs() {
var $inner = $("#slideToggle");
if ($inner.position().left == 0) {
$inner.animate({
left: "-840px"
});
}
else {
$inner.animate({
left: "0px"
});
}
}
$(".sliderClose").bind("click", function() {
toggleDivs();
});
$(".sliderOpen").bind("click", function() {
toggleDivs();
});

Assuming the button you want to hide/show has class .slideOpen then
function toggleDivs() {
var $inner = $("#slideToggle");
if ($inner.position().left == 0) {
$inner.animate({
left: "-840px"
});
$(".sliderOpen").fadeIn();
}
else {
$inner.animate({
left: "0px"
});
$(".sliderOpen").fadeOut();
}
}
$(".sliderClose").bind("click", function() {
toggleDivs();
});
$(".sliderOpen").bind("click", function() {
toggleDivs();
});

change text on link when div is open

I have a button on my page
<button id="show1" class="morelinkblack">Find Out More</button>
When clicked it runs this code
$("#show1").click(function(){
$(".hidden-div1").slideToggle("slow");
});
Is there a way of changing the text to say "Close" instead of "find out more" while the div is visible?

You can do:
$("#show1").click(function(){
var that = $(this);
$(".hidden-div1").slideToggle("slow", function() {
if ($(this).is(":visible")) {
that.text("Close");
} else {
that.text("Find out more");
}
});
});
Based on the comments, the div could be opened or closed depending on where the user is directed from. A simple check in the DOM ready can set the text accordingly:
$(".hidden-div1").is(":visible") ? $("#show1").text("Close") : $("#show1").text("Find out more");

Maybe this :
$("#show1").click(function () {
var $div = $(this);
$(".hidden-div1").slideToggle("slow").promise().done(function () {
$div.text(function () {
return $(this).is(":visible") ? "Close" : "Find Out More"
});
});
});

Updated code
$("#show1").click(function() {
var el = $(this);
$(".hidden-div1").slideToggle("slow", function() {
if ($(this).css('display') == 'none') { // <- Updated here to check if div is close or open
el.text('Find Out More');
} else {
el.text('Hide More');
}
});
});
Update button text on document ready / page load
$(document).ready(function() {
if ($(".hidden-div1").css('display') == 'none') {
$("#show1").text('Find Out More');
} else {
$("#show1").text('Hide More');
}
});