I use this code to hide block when user scrolling the page. How can i hide block only when scrolling outside it.
$('html, body').bind('scroll',function (e) {
var container = $("CONTAINER SELECTOR");
if (container.has(e.target).length === 0){
container.hide();
}
});
This is my html
<div class="parent_block">
<div class="menu-button">
<img src="/img.svg" />
</div>
<div class="toggled_block">
<nav>Home</nav>
</div>
</div>
<script>
$(".menu-button").click(function() {
$('.toggled_block').toggle();
});
$(document).on('click', function(e) {
if (!$(e.target).closest(".parent_block").length) {
$('.toggled_block').hide();
}
e.stopPropagation();
});
$(document).bind('scroll',function (e) {
var container = $(".toggled_block");
if (container.has(e.target).length === 0){
container.hide();
}
});
Related
There is a website, there is a mobile version. The mobile version has a drop-down menu. This menu works fine, but it doesn't close when clicked outside the block.
I've been looking for a solution on the Internet for a really long time, but nothing came up( I'll be very grateful for the help!
HTML
<header class="header" id="header">
<div class="container">
<div class="header__inner" id="header">
<div class="header__logo">
<img src="Images/ActiveBox_logo.png" alt="Logo" class="img__logo">
</div>
<nav class="nav" id="nav">
Features
Works
Our Team
Testimonials
Download
</nav>
<button class="burger" type="button" id="navToggle">
<span class="burger__item">Menu</span>
</button>
</div> <!-- header__inner -->
</div>
</header>
JS
let header = $("#header");
let intro = $("#intro");
let introH = intro.innerHeight();
let scrollPos = $(window).scrollTop();
let nav = $("#nav");
let navToggle = $("#navToggle");
checkScroll(scrollPos, introH);
$(window).on("scroll resize", function() {
introH = intro.innerHeight();
scrollPos = $(this).scrollTop();
checkScroll(scrollPos, introH);
});
function checkScroll(scrollPos, introH) {
if( scrollPos > introH ) {
header.addClass("fixed");
} else {
header.removeClass("fixed");
}
}
/* Smooth scroll */
$("[data-scroll]").on("click", function(event) {
event.preventDefault();
let elementId = $(this).data('scroll');
let elementOffset = $(elementId).offset().top;
nav.removeClass("show");
$("html, body").animate({
scrollTop: elementOffset - 70
}, 700);
});
// Nav Toggle
navToggle.on("click", function(event) {
event.preventDefault();
nav.toggleClass("show");
});
How about something like this?
$(document).on('click', function (e) {
if ($(e.target).closest("#box").length === 0) {
$("#box").hide();
console.log('clicked outside the box');
}
else {
console.log('clicked on the box');
}
});
#box{
width:100px;
height:40px;
background-color:blue;
color:white;
padding:5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='box'>
click me, then click outside
</div>
I am using jQuery 1.7.2. Originally, my HTML was rendered on page load:
<div class="my_div_class">
<button class="my_button_class" >
</button>
<div>
Then I was registering below JavaScript function:
$(".my_div_class").on('click', function(event){ //function_1
}
It was working fine.
Because of some reason I need to change it to below
$(document).on('click','.my_div_class', function(event){}
Then its not working ? But If change above functiion to use my_button_class it works. Why it is not working with div ?
$(document).ready(function() {
$(document).on("click",".my_div_class",function(event) {
alert("Heyy! clicked me!");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="my_div_class">
<button class="my_button_class" >
</button>
<div>
You can use $(event.target).closest(".my_div_class").length == 1 to see if you clicked on my_div_class or any element inside it.
$(document).on('click', function(event) {
if ($(event.target).closest(".my_div_class").length == 1) {
console.log("clicked on button or div")
} else {
console.log("clicked outside")
}
})
demo
$(document).on('click', function(event) {
if ($(event.target).closest(".my_div_class").length == 1) {
console.log("clicked on button or div")
} else {
console.log("clicked outside")
}
})
.my_div_class {
width:200px;
background-color:yellow}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my_div_class">
<button class="my_button_class">click
</button>
<div>
I have the following JQuery which displays a menu if a DIV is pressed:
var pull = $('#mmTrigger');
menu = $('.ulMM');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
HTML:
<div class="dvMain">
<ul class="ulMM specClear">
<li class="liMM">Portfolio</li>
<li class="liMM">About</li>
<li class="liMM">Contact</li>
<li class="liMM">Forum</li>
</ul>
<div id="mmTrigger"><img src="nav-icon.png" class="imgMenu" /></div>
</div>
I modified the script to this:
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
if (menu.is(':hidden')) {
$(".imgMenu").attr("src", "nav-icon.png");
} else {
$(".imgMenu").attr("src", "iconx.png");
}
});
But after clicking the DIV, the X stays and doesn't go back to the nav-icon.png once the menu is closed.
How can I resolve it so that the X changes to the menu icon.
I added this statement: alert (menu.is(':hidden')); it always returns false.
You should change the icon after the slideToggle animation has stopped. You can do this in callback like this:
$(pull).on('click', function (e) {
e.preventDefault();
menu.slideToggle(function () {
// slideToggles callback
if (menu.is(':hidden')) {
$(".imgMenu").attr("src", "nav-icon.png");
} else {
$(".imgMenu").attr("src", "iconx.png");
}
});
});
try changing image on complete of slide toggle: see here:http://api.jquery.com/slidetoggle/
$(document).ready(function(){
var pull = $('#mmTrigger');
menu = $('.ulMM');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle("slow", function() {
alert( ! menu.is(":visible") );
if (! menu.is(":visible")) {
$(".imgMenu").attr("src", "https://maps.google.com/mapfiles/kml/shapes/schools_maps.png");// icons added to show demo use your own icons.
} else {
$(".imgMenu").attr("src", "http://labs.google.com/ridefinder/images/mm_20_black.png");
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dvMain">
<ul class="ulMM specClear">
<li class="liMM">Portfolio</li>
<li class="liMM">About</li>
<li class="liMM">Contact</li>
<li class="liMM">Forum</li>
</ul>
<div id="mmTrigger"><img src="https://maps.google.com/mapfiles/kml/shapes/schools_maps.png" class="imgMenu" /></div>
</div>
Consider the following code, which toggles visibility of two classes with separate click() functions:
<!-- Toggles -->
<div class="a"></div>
<div class="b"></div>
<!-- Result -->
<div class="x" style="display:none"></div>
<div class="y" style="display:none"></div>
<div class="z" style="display:none"></div>
<!-- Script -->
$( ".a" ).click(function() {
var $this = $(this);
$this.siblings(".x").toggle();
});
$( ".b" ).click(function() {
var $this = $(this);
$this.siblings(".y").toggle();
});
How would I update this so that any time both x and y are visible, a third class, "z" is shown instead of both x and y?
Demo http://jsfiddle.net/Yn3L2/
API is(':visible') http://api.jquery.com/visible-selector/
Rest should fit your needs :)
Code
$(".a").click(function () {
var $this = $(this);
$this.siblings(".x").toggle();
checkZ();
});
$(".b").click(function () {
var $this = $(this);
$this.siblings(".y").toggle();
checkZ();
});
function checkZ() {
$('.z').hide();
if ($('.x').is(':visible') && $('.y').is(':visible')) {
$('.z').show();
}
}
This works as show here: http://jsfiddle.net/DKRe2/1/
HTML:
<!-- Toggles -->
<div class="a">a</div>
<div class="b">b</div>
<!-- Result -->
<div class="x" style="display:none">class x</div>
<div class="y" style="display:none">class y</div>
<div class="z" style="display:none">class z</div>
JS:
<!-- Script -->
$(".a").click(function () {
var $this = $(this);
if ($this.siblings(".y").css('display') != 'none' && $this.siblings(".x").css('display') == 'none') {
//now Hide y and show Z
$this.siblings(".y").toggle();
$this.siblings(".z").toggle();
} else {
$this.siblings(".z").css('display', 'none');
$this.siblings(".x").toggle();
}
});
$(".b").click(function () {
var $this = $(this);
if ($this.siblings(".x").css('display') != 'none' && $this.siblings(".y").css('display') == 'none') {
//now Hide y and show Z
$this.siblings(".x").toggle();
$this.siblings(".z").toggle();
} else {
$this.siblings(".z").css('display', 'none')
$this.siblings(".y").toggle();
}
});
I think this is what you really want.
Working DEMO
Added jQuery code
function checkZ() {
$('.z').hide();
if ($('.x').is(':visible') && $('.y').is(':visible')) {
$('.x').hide(500);
$('.y').hide(500)
$('.z').show();
}
}
How can I trigger the following function for a specific DIV
$(document).ready(function() {
if($('div.trigger').length > 0) {
$('div.trigger').click(function() {
if ($(this).hasClass('open')) {
$(this).removeClass('open');
$(this).addClass('close');
$(this).next().slideDown(100);
return false;
} else {
$(this).removeClass('close');
$(this).addClass('open');
$(this).next().slideUp(100);
return false;
}
});
}
});
My html looks like this:
<div class="trigger open"><strong>Dropdown 1</strong></div>
<div class="cnt">
foo<br>
bar
</div>
<div class="trigger open"><strong>Dropdown 2</strong></div>
<div class="cnt">
baz<br>
boo
</div>
My solution was to this:
$(document).ready(function()
{
$('div.trigger:eq(<?=$_GET[exp];?>)').trigger('click');
});
Thanks for the help :)
$('div.trigger:eq(0)').trigger('click');//trigger click event of the Oth element
$('div.trigger:first').trigger('click');//trigger click event of first
$('div.trigger:last').trigger('click');//trigger the click of last one