I have a div who can be displayed or not. When it's display I want to pass display to none if you click somewhere not in that div. So what I did is :
document.addEventListener('click',closeDiv)
document.getElementById('myDiv').addEventListener('click',stopPropagation)
function closeDiv(){
let div = document.getElementById('myDiv')
div.style.display='none'
}
But with that even if I click on the div, the display goes to none
Found the solution :
document.addEventListener('click',closeModal)
document.getElementById('myDiv').addEventListener('click',stopPropagation)
function stopPropagation(e){
e.stopPropagation();
}
function closeDiv(){
let div = document.getElementById('myDiv')
div.style.display='none'
}
If you make an window.addEventListener('click', outDiv);
and this function :
let myDiv = document.querySelector('myDiv');
function outDiv (event) {
if (!myDiv.classList.contain(event.target)) {
// Make Something
}
}
Related
I am building a chrome extension that adds a button to https://www.fashionnova.com/ items.
I'd like to only append my button once, but when I used an if statement my button did not appear. Any suggestions on how to solve this?
jQuery("document").ready(function ($) {
var button = CreateButton();
$(window).scroll(function () {
className = ".product-tile__badges";
console.log($(className).children()[1].className);
console.log("i work");
$(className).append(button);
$(".product-tile__badges").mouseenter(function () {
button.childNodes[1].style.display = "block"; // Makes the dropdown appear
});
$(".product-tile__badges").mouseleave(function () {
button.childNodes[1].style.display = "none"; // Makes the dropdown appear
});
});
});
You could use jQuery's unbind to remove the scroll event listener once the button has been appended.
That would give something like:
jQuery("document").ready(function ($) {
var button = CreateButton();
function injectButton() {
var className = ".product-tile__badges";
// append button
$(className).append(button);
// add event listener to show dropdown on mouse enter
$(className).mouseenter(function () {
button.childNodes[1].style.display = "block";
});
// add event listener to hide dropdown on mouse leave
$(className).mouseleave(function () {
button.childNodes[1].style.display = "none";
});
// remove handler from window scroll event listenenr
$(window).unbind('scroll', injectButton);
}
// attach the event handler on window scroll
$(window).scroll(injectButton);
});
I want to display a form in a sidebar using a panel (https://developer.microsoft.com/en-us/fabric-js/components/panel/panel). The description of this control suggests it's modal, but it's implemented in such a way that panel is dismissed when the overlay is clicked. I want to stop this behaviour so that the panel is only dismissed when the user clicks Ok, Cancel or the close button at the top right.
I know that this is possible using react. I'm trying to achieve something similar to the Panel - Scrolling Content Sample at https://developer.microsoft.com/en-us/fabric#/components/panel
var t = function() {
function e(e) {
if (e)
this.overlayElement = e;
else {
var t = document.createElement("div");
t.setAttribute("class", "ms-Overlay"),
this.overlayElement = t
}
this.overlayElement.addEventListener("click", this.hide.bind(this), !1)
}
return e.prototype.remove = function() {
this.overlayElement.parentElement.removeChild(this.overlayElement)
}
,
e.prototype.show = function() {
this.overlayElement.classList.add("is-visible"),
document.body.classList.add("ms-u-overflowHidden")
}
,
e.prototype.hide = function() {
this.overlayElement.classList.remove("is-visible"),
document.body.classList.remove("ms-u-overflowHidden")
}
,
e
}();
Here's the fabricJS source code, which binds the "hide" function to the click event for the element with class ms-Overlay
if you remove/comment the hide function. The overlay won't be able to be removed on click. That's the easy but dangerous way. Another approach would be to removeEventListener
How to expand one element at a time and the others to be closed?
When click open one at a time...
Thanks!
jQuery(document).ready(function($) {
$(".se-q").click( function () {
var container = $(this).parents(".se-c");
var answer = container.find(".se-a");
var trigger = container.find(".se-t");
answer.slideToggle(200);
if (trigger.hasClass("se-o")) {
trigger.removeClass("se-o");
}
else {
trigger.addClass("se-o");
}
})
});
You can use .not() , removeClass() , toggleClass();
jQuery(document).ready(function($) {
$(".se-q").click( function () {
var container = $(this).parents(".se-c");
var answer = container.find(".se-a");
var trigger = container.find(".se-t");
answer.slideToggle(200);
$('.se-t').not(trigger).removeClass('se-o'); // remove the class from all .se-t element but not this one(container.find(".se-t"))
trigger.toggleClass("se-o"); // toggle class for this(container.find(".se-t"))
})
});
Note: you can catch the point from my code .. but actually you need to provide your html code .. what I got from your code its
question/answer script .. so you may need to toggle answer as
well
For answer you can use the next line before answer.slideToggle(200);
$('.se-a').not(answer).slideUp(200);
I use the jQuery to hide and show a div.
function bindIconClick() {
$('span.scroIcon').click(function(event) {
var eventIcon = $(event.target);
var contentPanel = eventIcon.parents('.panelTitle').next();
if (contentPanel.is(':hidden')) {
contentPanel.slideDown('slow');
} else {
contentPanel.slideUp('slow');
}
});
}
I want to test the function, I can use the trigger() to simulate the click event, but I don't know how to test the slideDown() and slideUp() effect.
I want to test the function bindIconClick ,means if I use the trigger() function simulate the click event, I want know does the contentPanel hide or show.
I want to test the full function bindIconClick , not the part of it. I want to test the full function is correct!
In fact , I want to test the effetc that when the span be clicked, will contentPanel hide or show ?
Use slideToggle function instead of if and else
function bindIconClick() {
$('span.scroIcon').click(function(event) {
var eventIcon = $(event.target);
var contentPanel = eventIcon.parents('.panelTitle').next();
contentPanel.slideToggle('slow');
});
}
I'm trying to write a web app which replaces the context menu (right-click menu) with my own customized ones. I want it so that when the user clicks on a table row, they get one certain context menu and when they click on the background of the page, they get a different one.
I have already written the menus and gotten them working. The problem comes in when trying to figure out how to get the background's menu to show ONLY when clicking on the background and how to get the table row's menu to show when that is clicked.
I tried using document.body.oncontextmenu for the body and and setting the oncontextmenu function for each table row, but the body's oncontextmenu function overrides the row's so I get the wrong menu. The menu for the table rows DOES work if I stop using the body's menu, so that's not the issue.
I could be using the wrong events, so is there a different event for just the background (and not the elements on top of the background)? Or a way to "prioritize" the events so the table row's function takes precedence?
This is how the code looks:
var tableMenu;
var bodyMenu;
window.onload = function()
{
bodyMenu = new rightClickMenu("bodyMenu");
document.body.oncontextmenu = function() { bodyMenu.show(); tableMenu.hide(); }
bodyMenu.add("Add Entry", function()
{
alert("ADD");
});
tableMenu = new rightClickMenu("tableMenu", "tblSims");
simRows = getElementsByClassName("trSimRow");
for (var i in simRows)
simRows[i].oncontextmenu = function() { tableMenu.show(this.id.substring(2)); bodyMenu.hide(); }
tableMenu.add("Delete Entry", function(mac)
{
alert("DELETE");
});
document.body.onclick = function()
{
bodyMenu.hide();
tableMenu.hide();
};
}
You can capture the target element, e.g.:
$('*').click(function(e) {
alert(e.target);
alert(e.target.tagName);
if(e.target.tagName == 'html') {
// show background menu
}
});
You have to work with the Javascript Event Propagation model. What happens is that your click event is automatically passed down the layers of objects on a page that have been registered as event listeners, unless you explicitly tell it to stop, try something like this:
function setupClickHandlers()
{
document.getElementsByTagName('body')[0].onclick = doBodyMenu;
document.getElementById('tableID').onclick = doTableMenu;
}
function doBodyMenu()
{
//do whatever it does
}
function doTableMenu(e)
{
//do whatever it does
//stop the event propagating to the body element
var evt = e ? e : window.event;
if (evt.stopPropagation) {evt.stopPropagation();}
else {evt.cancelBubble=true;}
return false;
}
This should deal with the way each browser handles events.
$( document ).ready(function() {
var childClicked = false;
// myContainer is the nearest container div to the clickable elements
$("#myContainer").children().click(function(e) {
console.log('in element');
childClicked = true;
});
$("#myContainer").click(function(e){
if(!childClicked) {
console.log('in background');
e.preventDefault();
e.stopPropagation();
}
childClicked = false;
});
});
#myContainer {
width:200px;
height:200px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myContainer" style="">
link
<div style="width:50px;height:50px;background-color: white;">
another link
</div>
</div>