I have this div which shows/hides with display:none/block by clicking on an id #cart. The div opens and closes by clicking on element with the id but I want to close the div on body click too. How can I do it please?
Code I am using is below:
jQuery("#cart").on("click", function() {
jQuery(".shopping-cart").fadeToggle( "fast");
});
jQuery("#cart, body").on("click", function() {
jQuery(".shopping-cart").fadeToggle("fast");
});
What you can do is add a listener to the entire window and check for clicks. When there is a click, we check which element has been clicked and check on whether it's the element. We repeat this for the parent element as well.
<!DOCTYPE html>
<html>
<head>
<script>
function checkClickOutsiteElement(clickedElement, elementToCheck){
var iterator = clickedElement;
while(true){
// The click was in the element.
if( iterator === elementToCheck )
return;
// Go to the parent.
if( !iterator.parentElement ){
alert('outside menu');
return;
}
iterator = iterator.parentElement;
}
}
window.addEventListener('click', function(event){
checkClickOutsiteElement(event.target, document.getElementById('menu'));
});
</script>
</head>
<body>
<div class="wrapper">
<div id="menu" style="width: 100px; height: 100px; background-color: red;"></div>
</div>
<div class="wrapper">
<div id="not_menu" style="width: 100px; height: 100px; background-color: green;"></div>
</div>
</body>
</html>
You probably want two separate functions, since your cart button should toggle both ways, but the body click handler should only toggle out.
Protip: on() isn't doing anything for you that click() wouldn't, the way you're using it. The latter is a bit cleaner.
jQuery("#cart").click(function() {
jQuery(".shopping-cart").fadeToggle("fast");
});
jQuery("body").click(function() {
jQuery(".shopping-cart").fadeOut("fast");
});
Protip 2: Easily and safely alias jQuery to $ like so:
jQuery(function($) { // document ready with dollar alias
$("#cart").click(function() {
...
});
I have this div which shows/hides with display:none/block by clicking
on an id #cart. The div opens and closes by clicking on element with
the id but I want to close the div on body click too.
In vanilla javascript, you can:
write a function to show / hide the div
add a click event listener to #cart
add a click event listener to body
Working Example:
// Grab #cart
const cart = document.getElementById('cart');
// Grab .myDiv
const myDiv = document.getElementsByClassName('div')[0];
// Function to toggle .myDiv
const toggleMyDiv = (e) => {
if (e.target === e.currentTarget) {
myDiv.dataset.display = (myDiv.dataset.display === 'show') ? 'hide' : 'show';
}
}
// Add Click Event Listener to #cart
cart.addEventListener('click', toggleMyDiv, false);
document.body.addEventListener('click', toggleMyDiv, false);
body,
#cart {
cursor: pointer;
}
div {
display: inline-block;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
font-weight: bold;
}
#cart {
color: rgb(255, 255, 255);
background-color: rgb(255, 0, 0);
}
.div {
color: rgb(255, 0, 0);
background-color: rgb(255, 255, 0);
}
.div[data-display="show"] {
opacity: 1;
}
.div[data-display="hide"] {
opacity: 0;
}
<div id="cart">Cart</div>
<div class="div show" data-display="show">myDiv</div>
Related
i make profile form, i clicked this, form is show but hidden instally
I want to click the link if the form appears without disappearing again, and if clicked outside in the form, from hidden and the web position stay without scrolling to up
i code used
$('.profile-link').click(function(e) {
$(".profile-frm").addClass("show-prfrm");
});
$(document).mouseup(function(e) {
var container = $(".profile-frm");
var clickfuncion = $('.profile-link').click;
if (container.is(':visible')) {
// if the target of the click isn't the container nor a descendant of the container
if (!container.is(e.target) && container.has(e.target).length === 0) {
e.preventDefault();
$('body').width($('body').width());
container.removeClass("show-prfrm");
}
}
});
I think the only tricky part is to put a click handler on the document and do different things when the target element is the button, the menu, or anything else.
const button = document.querySelector('button');
const menu = document.querySelector('#menu');
document.addEventListener('click', event => {
menu.classList.add('hide');
if (event.target == button || event.target == menu)
menu.classList.remove('hide');
});
#menu {
position: absolute;
top: 50;
border: 1px solid #555;
background-color: #555;
border-radius: 10px;
height: 175px;
width: 100px;
}
.hide {
display: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" />
<button>Menu</button>
<div id="menu" class="hide"></div>
var click = 10;
$(document).ready(function() {
// nav bar event listeners set up
$('.navDiv').mouseenter(mouseEnterButton);
$('.navDiv').mouseleave(mouseLeaveButton);
//TODO add your code below to attach event listeners to the buttons
// We did the first one for you. You can use the `.click()` function or
// the .on('click') like we did below.
$('#fadeDiv').on('click', fadeCat());
$('#fadeDiv').on('click', hideCat());
$('#fadeDiv').on('click', animateCat());
$('#fadeDiv').on('click', resetCat());
});
// nav bar function to fade when mouse enters button
function mouseEnterButton() {
console.log('enter');
$(this).fadeTo('fast', 0.5);
}
// nav bar function to fade when mouse enters button
function mouseLeaveButton() {
console.log('leave');
$(this).fadeTo('fast', 1);
}
// fadeCat is a function to fade cat in or out when that button is clicked
function fadeCat(e, complete) { // ignore e, use complete as the last argument to any jQuery fade functions
//TODO your function code here
// toggle catImg fade
// append '<p>fade toggle</p>' to 'clickList'
$("#fadeDiv").click(function() {
$("#catImg").fadeToggle('fast', "linear");
$("#clickList").append('<p>fade toggle</p>');
});
}
// hideCat is a function to hide and show the cat image when that button is clicked
function hideCat() {
//TODO your function code here
// hide catImg
// append '<p>hide toggle</p>' to 'clickList
$("#hideDiv").click(function() {
$("#catImg").toggle('slow');
$("#clickList").append('<p>hide toggle</p>');
});
}
// animateCat is a function to grow the cat's height and width by 10px when that button is clicked
function animateCat(e, complete) { // ignore e, use complete as the last argument to the jQuery animate function
//TODO your function code here
// animate catImg
// append '<p>animate</p>' to 'clickList'
$('#animateDiv').click(function () {
$('#catImg').animate({
height:'+= 10px',
width:'+=10px'
});
$("#clickList").append("<p>animate</p>");
});
}
// Hard Mode
// resetCat is a function to reset the cat photo to its original size
// when that button is clicked.
function resetCat() {
// reset catImg
// append '<p>reset</p>' to 'clickList'
$('#resetDiv').click(function () {
$('#catImg').animate({
height:'-= 10px' ,
width:'-=10px'//solution for now untill i find out how to make it work
});
$("#clickList").append("<p>reset</p>");
});
}
body {
font-family: Verdana, Arial, Sans-Serif;
}
.navDiv {
height: 30px;
width: 120px;
border-radius: 5px;
padding-top: 10px;
margin: 5px;
text-align: center;
color: #FFFFFF;
background-color: #69D2E7;
font-family: Verdana, Arial, Sans-Serif;
display: inline-block;
}
#outPut {
height: 200px;
width: 400px;
}
img {
margin-left: auto;
margin-right: auto;
}
<!DOCTYPE html>
<html>
<head>
<title>Assignment 6-2</title>
<link href='styles.css' rel='stylesheet' type='text/css'/>
<script src="http://code.jquery.com/jquery-3.2.1.min.js" charset="utf-8"></script>
<script src='script.js' type='text/javascript' ></script>
</head>
<body>
<h1>Burrito Cat</h1>
<div class="navDiv" id="fadeDiv">Fade Me!</div>
<div class="navDiv" id="hideDiv">Hide Me!</div>
<div class="navDiv" id="animateDiv">Animate Me!</div>
<div class="navDiv" id="resetDiv">Reset Me!</div>
<div id="outPut">
<img id="catImg" src="imgs/burrito-cat.png" alt="burrito cat">
</div>
<div id="clickList">
</div>
</body>
</html>
How do I make the image resize to the correct size? (I don't know how to put in the cat picture.)
You can read in the original height and width after the image loads, and either just keep it in a variable or assign it as a data- attribute to the element.
Here's an example.
$(window).on("load", function() {
var $cat = $("#catImg"),
height = $cat.height(),
width = $cat.width();
$cat.on("click", function() {
if ($(this).hasClass("big")) {
$(this).animate(
{
height: height,
width: width
},
500
);
} else {
$(this).animate(
{
height: "+=10px",
width: "+=10px"
},
500
);
}
$(this).toggleClass("big");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="catImg" src="https://d4n5pyzr6ibrc.cloudfront.net/media/27FB7F0C-9885-42A6-9E0C19C35242B5AC/4785B1C2-8734-405D-96DC23A6A32F256B/thul-90efb785-97af-5e51-94cf-503fc81b6940.jpg?response-content-disposition=inline">
find the height and width of img first, then reset to it:
var click = 10;
var imgHeight;
var imgHeight;
$(document).ready(function() {
imgHeight = $('#catImg').height();
imgWidth = $('#catImg').width();
// nav bar event listeners set up
$('.navDiv').mouseenter(mouseEnterButton);
$('.navDiv').mouseleave(mouseLeaveButton);
//TODO add your code below to attach event listeners to the buttons
// We did the first one for you. You can use the `.click()` function or
// the .on('click') like we did below.
$('#fadeDiv').on('click', fadeCat());
$('#fadeDiv').on('click', hideCat());
$('#fadeDiv').on('click', animateCat());
$('#fadeDiv').on('click', resetCat());
});
// nav bar function to fade when mouse enters button
function mouseEnterButton() {
console.log('enter');
$(this).fadeTo('fast', 0.5);
}
// nav bar function to fade when mouse enters button
function mouseLeaveButton() {
console.log('leave');
$(this).fadeTo('fast', 1);
}
// fadeCat is a function to fade cat in or out when that button is clicked
function fadeCat(e, complete) { // ignore e, use complete as the last argument to any jQuery fade functions
//TODO your function code here
// toggle catImg fade
// append '<p>fade toggle</p>' to 'clickList'
$("#fadeDiv").click(function() {
$("#catImg").fadeToggle('fast', "linear");
$("#clickList").append('<p>fade toggle</p>');
});
}
// hideCat is a function to hide and show the cat image when that button is clicked
function hideCat() {
//TODO your function code here
// hide catImg
// append '<p>hide toggle</p>' to 'clickList
$("#hideDiv").click(function() {
$("#catImg").toggle('slow');
$("#clickList").append('<p>hide toggle</p>');
});
}
// animateCat is a function to grow the cat's height and width by 10px when that button is clicked
function animateCat(e, complete) { // ignore e, use complete as the last argument to the jQuery animate function
//TODO your function code here
// animate catImg
// append '<p>animate</p>' to 'clickList'
$('#animateDiv').click(function () {
$('#catImg').animate({
height:'+= 10px',
width:'+=10px'
});
$("#clickList").append("<p>animate</p>");
});
}
// Hard Mode
// resetCat is a function to reset the cat photo to its original size
// when that button is clicked.
function resetCat() {
// reset catImg
// append '<p>reset</p>' to 'clickList'
$('#resetDiv').click(function () {
$('#catImg').animate({
height: imgHeight,
width: imgWidth//solution for now untill i find out how to make it work
});
$("#clickList").append("<p>reset</p>");
});
}
body {
font-family: Verdana, Arial, Sans-Serif;
}
.navDiv {
height: 30px;
width: 120px;
border-radius: 5px;
padding-top: 10px;
margin: 5px;
text-align: center;
color: #FFFFFF;
background-color: #69D2E7;
font-family: Verdana, Arial, Sans-Serif;
display: inline-block;
}
#outPut {
height: 200px;
width: 400px;
}
img {
margin-left: auto;
margin-right: auto;
}
<!DOCTYPE html>
<html>
<head>
<title>Assignment 6-2</title>
<link href='styles.css' rel='stylesheet' type='text/css'/>
<script src="http://code.jquery.com/jquery-3.2.1.min.js" charset="utf-8"></script>
<script src='script.js' type='text/javascript' ></script>
</head>
<body>
<h1>Burrito Cat</h1>
<div class="navDiv" id="fadeDiv">Fade Me!</div>
<div class="navDiv" id="hideDiv">Hide Me!</div>
<div class="navDiv" id="animateDiv">Animate Me!</div>
<div class="navDiv" id="resetDiv">Reset Me!</div>
<div id="outPut">
<img id="catImg" src="imgs/burrito-cat.png" alt="burrito cat">
</div>
<div id="clickList">
</div>
</body>
</html>
I have a form/div displayed on top of the map. I want to make it so that it is hidden when there is a click outside the form/div area but not when the click is inside the form/div.
I can't get to detect when the click is done inside the div. Instead all clicks inside the form/div are detected as done on the map, as if the div doesn't exist.
<div id="map" class="map"><div id="popup">
//input data of form
</div> </div>
<script>
map.on('click', function(evt) {
console.log('Clicked #map');
//one method I tried from another stack overflow answer
(evt.target !== this) ? $("#popup").show() : $popup.hide();
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature) {
return feature;
});
if (feature) {
loadInfo(feature.get('id'));
$("#popup").show();
}
});
$("popup").on('click', function(e) {
e.stopPropagation();
console.log('Clicked #popup');
});
</script>
Output
Clicked #map
Clicked #popup
As you can see in the code I tried few different methods on detecting clicks on the popup but none of them worked. All of them are as if, the popup is not even there.
I am using openlayers3 if that matters.
You can use Event.stopPropagation() to prevent further propagation of the current click event in the capturing and bubbling phases:
var $map = $('#map'),
$popup = $('#popup');
$map.on('click', function(e) {
console.log('Clicked #map');
(e.target !== this) ? $popup.show() : $popup.hide();
});
$popup.on('click', function(e) {
e.stopPropagation();
console.log('Clicked #popup');
});
#map {
background-color: grey;
width: 80%;
height: 120px;
margin: auto;
padding: 40px;
}
#popup {
background-color: #000000;
color: #ffffff;
width: 60%;
margin: auto;
padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map" class="map">
<div id="popup">
// input data of form
</div>
</div>
I would like to add event listener to a right click event, i know how to deal with a simple click:
document.getElementById("myBtn").addEventListener("mousedown", function(){ });
What about a right click event ?
Listen to the contextmenu event.
Just testing the click type using :
alert("You pressed button: " + event.button)
<!DOCTYPE html>
<html>
<head>
<style>
div { background: yellow; border: 1px solid black; padding: 10px; }
div {
background: yellow;
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<div oncontextmenu="myFunction(event)">
<p>Right-click inside this box to see the context menu!
</div>
<script>
function myFunction(e) {
e.preventDefault();
//do something differant context menu
alert("You right-clicked inside the div!");
}
</script>
<!--if it helpful visit once http://topprojects.ml for more stuf-->
</body>
</html>
document.body.addEventListener("mousedown", event => {
if (event.button == 0) { // left click for mouse
doSomething;
else if (event.button == 1) { // right click for mouse
doAnotherThing;
else { // other buttons on the mouse
doOtherThings;
}
}
I have 2 divs that are initially hidden
<div id="whistle" style="display:none;">
<div id="lean" style="display:none;">
I also have a div that is visible
<div id="me" style="display:block">
I have jQuery code that allows only the #whistle or #lean divs to be open at once, their buttons will hide the other.
I currently have code that also hides the #me div, but I would now like the #me div to open back up when both #whistle and #lean are closed.
If you want to see the site, the link is maxdev.tk
The jQuery code is
$(document).ready(function(){
$("#calc").click(function(){
$("#whistle").hide(600);
$("#lean").toggle(900);
});
});
$(document).ready(function(){
$("#whi").click(function(){
$("#lean").hide(600);
$("#whistle").toggle(900);
});
});
This is one way to solve it. Find it also as a pen at the end of this post.
$(document).ready(function() {
function callback() {
if( $('#whistle').hasClass('hidden') && $('#lean').hasClass('hidden') ) {
$('#me').removeClass('hidden');
} else {
$('#me').addClass('hidden');
}
}
$('button[data-for=whistle]').on('click', function() {
$('#whistle').toggleClass('hidden');
$('#lean').addClass('hidden');
callback();
});
$('button[data-for=lean]').on('click', function() {
$('#lean').toggleClass('hidden');
$('#whistle').addClass('hidden');
callback();
});
})
.hidden {
opacity: 0;
height: 0;
overflow: hidden;
padding: 0;
}
div {
background-color: #ccc;
border-radius: 25px;
margin-top: 20px;
padding: 50px;
text-align: center;
transition-duration: 0.4s;
width: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button data-for="whistle">Whistle</button>
<button data-for="lean">Lean</button>
<div id="whistle" class="hidden">Whistle!</div>
<div id="lean" class="hidden">Lean!</div>
<div id="me">Me!</div>
http://codepen.io/anon/pen/yNJrwe
Add this code to the end of whatever buttons' click function.
if( !$('#whistle').is(':visible') && !$('#lean').is(':visible') ) {
$('#me').css("display","block"); // or use .show();
} else {
$('#me').css("display","none"); // or use .hide();
}