I'm currently using the following code to allow a user to show/hide a div on click.
When clicking anywhere outside of the div, it closes the div.
However, there is a link within the div which can open a lightbox. When a user goes to close that lightbox, it also closes the div that the link was contained. Is there anything I can add into the script to stop that from happening?
$(document).ready(function(){
$("a.dropdown-link").click(function(evt) {
evt.preventDefault();
var $div = $(this).next('.info-container');
$(".info-container").not($div).slideUp();
if ($div.is(":visible")) {
$div.slideUp()
} else {
$div.slideDown();
}
});
$(document).click(function(e){
var p = $(e.target).closest('.dropdown').length
if (!p) {
$(".info-container").slideUp();
}
});
$('.movie-link').magnificPopup({type:'iframe'});
});
<a class="dropdown-link" href="#"><div class="dropdown dropdown-processed">More info</div></a>
<div class="info-container" style="display: none;">Video preview: <a class="movie-link" href="videourl"></a></div>
I'm using Magnific Popup for the lightbox: http://dimsemenov.com/plugins/magnific-popup/
My JavaScript knowledge is pretty basic so any help is appreciated.
In the "click to close div function, you can check if the lightbox is on or not. A simple if ($("#lightbox").css("display") == "none") should be able to do the trick
EDIT: put this line after the $(document).ready line
var state = 0; // default state
$('.movie-link').click(function() { state = 1; }); // state = 1, lightbox on
in the source code, on line 384, insert this code
state = 2; //state = 2, lightbox close button clicked
the idea is not firing the "close div" function when the state is 1 (lightbox is on and clicking random stuffs inside, or outside the lightbox) or 2 (lightbox's close button got clicked), and return state to 0 when it was 2
so instead of the if I provided in the comment use this
if (state == 2) {
state = 0;
} else if (state == 0) {
//rest of the code
}
this is just something I put together and haven't tested yet, so I don't actually know if it works or not so just back up your js files just in case.
EDIT 2:
remove all the changes in edit 1 and use this on instead of the if (state == 2) {
if (e.target != $('.mfp-bg')[0] and e.target != $('.mfp-wrap')[0]) {
EDIT 3
var e_class = $(e.target).attr('class');
if (e_class != 'mfp-close' && e_class != 'mfp-container') {
working example: http://imgcrash.comeze.com/test.html
I'm not 100% without actually testing this out but you may be running into issues with $(document).click(...); since clicking anywhere on the document would trigger this event.
When you close the popup you're probably triggering this event and sliding up the info-container div.
It seems that you're looking for clicks on the divs with the class .dropdown. Why not use something like:
$('.dropdown').click(function(e) { ... });
Try this:
$("a.dropdown-link").click(function(evt) {
evt.preventDefault();
evt.stopPropagation(); //We stop the propagation of the event
//Changed it to slideToggle and added stop to prevent weird animation
//on multiple clicks
$(this).next('.info-container').stop().slideToggle()
});
$(document).click(function(e){
//Check if it has the class info-container
if (!$(e.target).hasClass("info-container")) {
$(".info-container").slideUp();
}
});
$('.movie-link').magnificPopup({type:'iframe'});
Fiddle
Related
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
Here's my function,
$(document).ready(function () {
$('.a').click(function () {
var here = $(this).next('.b');
if (here.is(":visible")) {
here.hide();
} else {
here.show();
}
return false;
});
});
So, whenever I click the button it opens a small tab on same webpage & whenever I click it again it closes it. But once I open the tab I can't close it by just clicking somewhere on webpage apart from tab. I have to click the button again to close it.
How can I close tab just by clicking somewhere on webpage also by on the button?
I end up searching for this on almost every project, so I made this plugin:
jQuery.fn.clickOutside = function(callback){
var $me = this;
$(document).mouseup(function(e) {
if ( !$me.is(e.target) && $me.has(e.target).length === 0 ) {
callback.apply($me);
}
});
};
It takes a callback function and passes your original selector, so you can do this:
$('[selector]').clickOutside(function(){
$(this).removeClass('active'); // or `$(this).hide()`, if you must
});
Nice, chainable, elegant code.
On document click, the closest helps to check whether the tab has been clicked or not:
$(document).click(function (e) {
if($('.b').is(':visible')&&!$(e.target).closest('.b').length){
$('.b').hide();
}
});
You want to check for a click on the body :
$("body").click(function(e) {
if(e.target.id !== 'menu'){
$("#menu").hide();
}
});
menu would be the id of the menu.
If the body is clicked and the id of the div clicked doesn't equal that of the menu, then it closes.
Check this implementation
jQuery(document).ready(function() {
$(document).on('click','body, #btn',function(ev){
ev.stopPropagation()
if(ev.target.id== "btn"){
if($('#modal').is(':visible')) {
$('#modal').fadeOut();
} else{
$('#modal').fadeIn();
}
} else {
$('#modal').fadeOut();
}
});
});
html, body {
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">
Click Me!
</button>
<div id="modal" style="background-color:red;display:none;">
BLA BLA BLA
</div>
To check if the clicked element is outside of a given container, i.e. a menu, we can simply check if the event target is a child of the container. Using JQuery -
$('body').click(function(e) {
if ( 0 === $(e.target).parents('#container-id').length ) {
/// clicked outside -> do action
}
})
you have to add a click listener to the parent element, like here:
$('.parent-div').click(function() {
//Hide the menus if visible
});
Also because click events bubbled up from child to the parent,
you can exclude the click on the child element to get bubbled up and count as the parent click too. you can achieve this like below:
//disable click event on child element
$('.child-div').click(function(event){
event.stopPropagation();
});
It's a rich-text editor,there is a div show the content users typed in, just like this:
<div class=‘content’>
<iframe data-role=text-editable.></iframe>
</div>
When i click a icon who's used to call the color panel，the panel will show.And i wish when i click outside the panel,it will be hide.so my code is:
var color_panel = $('.color-panel');
color_panel.on("clickoutside", function (e) {
var t = $(e.target);
if ($.contains(color_panel[0], t[0]))
return;
color_panel.hide();
})
It works well when i click outside the panel will disappear except i click the iframe.when i click the ifame,nothing happens,the panel is still shown,
Help......i want to know the reason .please...is the ifame not the dom element outside the panel?
You can listen for outside clicks by listening for clicks on the body element of the webpage (so, clicking on anything element) and then you can exclude your .color_panel from this event by making another event that says "when I get clicked on, ignore any other clicks". The effect will be exactly what you want, that you can listen for outside clicks:
var panelOpen = false;
$('body').click(function(event) {
if (panelOpen) {
panelOpen = false;
color_panel.hide();
}
});
$('.color_panel').click(function(event) {
panelOpen = true;
//callYourMethodToShowThePanelHere();
e.preventDefault(); // these methods will stop the body click event
e.stopPropagation();
return false;
});
I have having a little trouble with the slideToggle when I have a link inside of the slideup panel. What I am trying to do is have the ability to press a button and a div will slide up and display related posts and once you press another or the related project button on the page it will close the toggle and reveal another effect that I am using (100% width and heigh popup). The script I am using works perfect but I am running into one problem. When I click a related post inside of the slideToggle it causes the div to slide down instead of going to the page that represents the link.
Here is my code below and an example http://jsfiddle.net/K8vBg/15/.
$(document).ready(function(){
// build a variable to target the #menu div
var menu = $('#menu')
// bind a click function to the menu-trigger
$('#menu-trigger').click(function(event){
event.preventDefault();
event.stopPropagation();
// if the menu is visible slide it up
if (menu.is(":visible"))
{
menu.slideUp(1000);
}
// otherwise, slide the menu down
else
{
menu.slideDown(400);
}
});
$(document).not('.projectHolder-small,#projectSpecs').click(function(event) {
event.preventDefault();
if (menu.is(":visible"))
{
menu.slideUp(400);
}
});
})
If I change .projectHolder-small,#projectSpecs in the .not function to just read #menu then I am able to click the link inside of the panel but the panel will not slideDown when I click another button on the page. The popup from #project specs will just go over the panel instead of closing it.
Is there something I am missing in my script?
Thank you
Try changing the $(document).not().click() to:
$(document).click(function(event){
if(!$(event.target).closest('.projectHolder-small,#projectSpecs').length){
if (menu.is(":visible")){
menu.slideUp(400);
}
}
});
I am using closest() instead of the usual is(), so that even clicking on the children elements of '.projectHolder-small,#projectSpecs' the panel won't close.
I rewrote the script to the following and it works perfect
$(document).ready(function () {
var $frm = $('#menu').hide();
var $bts = $("#menu-trigger").on('click', function () {
var $this = $(this)
$bts.filter(".selected").not(this).removeClass('selected');
$this.toggleClass('selected');
if ($this.hasClass('selected') && $frm.is(':visible')) {
$frm.stop(true, true).slideUp(function () {
$(this).slideDown()
});
} else {
$frm.stop(true, true).slideToggle();
}
});
$bts.filter('.selected').click();
$("#projectSpecs, #menuButton").click(function () {
$bts.filter(".selected").removeClass('selected');
$frm.slideUp();
});
});
The Fiddle: http://jsfiddle.net/bscn3/
Scenario:
I want to use nested toggles inside tabbed containers, as in the fiddle.
My Issue:
When I click on Main Toggle ("Toggle 1") or ("Toggle 2"), the inner contents display.
But it closes if I click on anything inside. For Eg. If I click on Toggle 2, and if I click on Tab 1 -> Nested Toggle 1, Toggle 2 itself closes.
I want it to remain open.
My Guess:
The JQuery working closes the toggle if anything related to the Toggle (Even text content) is clicked.
My Need:
I want the Toggle to close only if those rectangular headers are clicked.
Also, if you can help clean up the code in such a way, that I don't need to write separate JS to make inner nested Toggles work independently of its parent or children toggles, it would great.
Currently I have two Toggle JS Functions written for the two toggles in example.
//TOGGLE
$('.toggle-view li').click(function () {
var text = $(this).children('.t');
if (text.is(':hidden')) {
text.slideDown('fast');
$(this).children('.toggle').addClass('tactive');
} else {
text.slideUp('fast');
$(this).children('.toggle').removeClass('tactive');
}
});
//TOGGLE L2
$('.toggle-view2 li').click(function () {
var text2 = $(this).children('.t2');
if (text2.is(':hidden')) {
text2.slideDown('fast');
$(this).children('.toggle2').addClass('tactive2');
} else {
text2.slideUp('fast');
$(this).children('.toggle2').removeClass('tactive2');
}
});
P.S. I haven't written the JS Code, I am using someone's template.
Thanks! :)
Seems like a pretty simple solution...
It's happening because the toggle currently activates whenever you click anythin inside of the li element (which includes the other toggle elements: .toggle2).
The solution therefore is to make it only activate the toggle when the .toggle/h6 element is clicked and change $(this).children(...) to $(this).siblings(...)
You can use the following as things are (same changes in TOGGLE and TOGGLE L2):
//TOGGLE
$('.toggle-view li .toggle').click(function () { // Changed selector
var text = $(this).siblings('.t'); // Changed to .siblings(...)
if (text.is(':hidden')) {
text.slideDown('fast');
$(this).addClass('tactive'); // Removed .children(...)
} else {
text.slideUp('fast');
$(this).removeClass('tactive'); // Removed .children(...)
}
});
//TOGGLE L2
$('.toggle-view2 li .toggle2').click(function () {
var text2 = $(this).siblings('.t2');
if (text2.is(':hidden')) {
text2.slideDown('fast');
$(this).addClass('tactive2');
} else {
text2.slideUp('fast');
$(this).removeClass('tactive2');
}
});
OR
Just use the first section...
//TOGGLE
$('.toggle-view li .toggle').click(function () {
var text = $(this).siblings('.t');
if (text.is(':hidden')) {
text.slideDown('fast');
$(this).addClass('tactive');
} else {
text.slideUp('fast');
$(this).removeClass('tactive');
}
});
and rename all of the .t2, .toggle2 etc. in your html to the same as the first one (i.e. .t2 becomes .t)
use event.stopPropagation()
i have updated jsfiddle
$('.toggle-view2 li').click(function (event) {
event.stopPropagation();
var text2 = $(this).children('.t2');
if (text2.is(':hidden')) {
text2.slideDown('fast');
$(this).children('.toggle2').addClass('tactive2');
} else {
text2.slideUp('fast');
$(this).children('.toggle2').removeClass('tactive2');
}
});