I have a popup window which disappears on click inside, but my purpose is to make it disappear on click outside.
At the moment the popup works fine but it disappears whenever I click inside the window. When I click outside the window, it stays. How do I make it work the oppersite way around?
Code as:
function deselect(e) {
$('.pop').slideFadeToggle(function() {
e.removeClass('selected');
});
}
$(function() {
$('.invite_room_btn').on('click', function() {
if($(this).hasClass('selected')) {
deselect($(this));
} else {
$(this).addClass('selected');
$('.pop').slideFadeToggle();
}
return false;
});
$('.close').on('click', function() {
deselect($('.invite_room_btn'));
return false;
});
});
$.fn.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};
And HTML is:
<span class="invite_room_btn">
<div class="messagepop pop">
</div>
</span>
Thanks!
Your question can be interpreted as "how to identify when the click is made outside the popup window"?
as suggested here, you can work by difference, checking that the click occurred anywhere but the popup window (and eventually some other elements)
This can be achieved as follows:
the HTML code may be something like:
<div id="popup" class="popup">
Content
<div>DIV inside</div>
</div>
<button id="open">Open</button>
while the javascript is:
$(document).ready(function () {
$('#popup').hide()
});
$('#open').on('click', function () {
$('#popup').show(500)
});
$(document).mouseup(function (e) {
var popup = $("#popup");
if (!$('#open').is(e.target) && !popup.is(e.target) && popup.has(e.target).length == 0) {
popup.hide(500);
}
});
Full example with some CSS-styling: http://jsfiddle.net/sLdmxda8/2/
I figured it out with the following code!
$(document).ready(function () {
$('.messagepop').hide()
});
$('.invite_room_btn').on('click', function () {
if($(this).hasClass("selected")) {
var popup = $(".messagepop");
popup.hide(150);
$(".invite_room_btn").removeClass("selected");
}
else {
$('.messagepop').show(150);
$('.invite_room_btn').addClass("selected");
}
});
$(document).mouseup(function (e) {
var popup = $(".messagepop");
if (!$('.invite_room_btn').is(e.target) && !popup.is(e.target) && popup.has(e.target).length == 0) {
popup.hide(150);
}
});
Thanks for the help!
Related
I have an accordion where open/closes on click. However I would like the accordion to be open when the page loads. Does anyone know what I need to add/remove from the below code? all suggestions are welcome.
reviewsLink.on('click', function() {
util.scrollBrowser(feefoCont.offset().top - 97);
$('.js-feefo-content').delay(500).slideDown();
if (reviewstitle.text() === originaltitle) {
reviewstitle.toggleText(Resources.REVIEWS_HIDE, originaltitle);
}
});
reviewsLinkM.bind('click', function() {
util.scrollBrowser(feefoContM.offset().top);
$('.js-feefo-toggle.pdp-main__feefo-slot__toggle.js-slot-accordion.pdp-main__slot--accordion').delay(500).slideDown();
feefoContM.find('h3').addClass('pdp-main__tab--icon-minus');
});
var reviewsCont = $('.pdp-main__feefo-slot .js-reviews-toggle'),
reviewsClose = $('.js-feefo-content').find('.js-feefo-close');
reviewsCont.bind('click', function() {
$('.js-feefo-content').slideToggle();
reviewstitle.toggleText(Resources.REVIEWS_HIDE, originaltitle);
});
reviewsClose.bind('click', function() {
$('.js-feefo-content').slideUp();
reviewstitle.toggleText(Resources.REVIEWS_HIDE, originaltitle);
});
}
};
The issue I'm having is every time you resize the browser a function is called, that function will make a side panel into an accordion if the screen width is a certain number or below or on a larger screen it's just displaying like an open side panel with no interaction.
In the resize event I call the sidepanel function. Unfortunately every time I resize the browser my side panel function is duplicated. I've been seeing stuff on unbinding but nothing that seems to make sense for how I'm calling the side panel function.
Is there a way in the resize.js to unbind the sidepanel function and rebind to the window so it's only called once every time the window is resized?
Resize.js
$(document).ready(function() {
var resizeTimer;
$(window).on('resize', function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
sidePanelAccordion();
}, 250);
});
});
Side-panel.js
function sidePanelAccordion() {
var panelAccordion = $('.side-panel-accordion');
var panelHeader = $('.side-panel-header');
var panelBody = $('.side-panel-body');
var panelHeaderActive = $('.mobile-header-active');
if (userScreen.type === 'mobile') {
panelAccordion.find(panelBody).hide();
panelAccordion.find(panelHeader).addClass('mobile-header-active');
} else if (userScreen.type === 'desktop') {
panelAccordion.find(panelBody).show().removeClass('open');
panelHeader.removeClass('mobile-header-active');
}
panelHeaderActive.on('click', function(e) {
console.log('clicked');
if (panelBody.hasClass('open')) {
panelBody.removeClass('open').stop(true, true).slideUp().clearQueue();
//console.log('panel had class open');
e.stopPropagation();
return false;
} else {
panelBody.addClass('open').stop(true, true).slideDown().clearQueue();
//console.log('panel now has class open');
e.stopPropagation();
return false;
}
});
}
Try this code:
panelHeaderActive.unbind('click').on('click', function(e){
console.log('clicked');
if (panelBody.hasClass('open')) {
panelBody.removeClass('open').stop(true,true).slideUp().clearQueue();
//console.log('panel had class open');
e.stopPropagation();
return false;
} else {
panelBody.addClass('open').stop(true,true).slideDown().clearQueue();
//console.log('panel now has class open');
e.stopPropagation();
return false;
}
});
I have the following script which works the way it should, on click it bring a div out from the right and when you click the close div it returns back to its original position. It works once but if I try to click more than once it doesn't respond. I know its because of how I have the script laid out so if anyone could show me where I'm going wrong then that would be much appreciated.
<script type="text/javascript">
$(document).ready(function () {
var clicked = true;
$(".open-big").on('click', function () {
if (clicked) {
clicked = false;
$(".expandedImage").css({
"right": "100%"
});
}
});
});
$(document).ready(function () {
var clicked = true;
$(".close-big").on('click', function () {
if (clicked) {
clicked = false;
$(".expandedImage").css({
"right": 0
});
}
});
});
</script>
Your problem is you have wrapped both handlers in separate document.ready closures so you have 2 instances of clicked.
In order to share access to the same clicked variable put all the code in one closure with only one clicked variable that is in scope for both event handlers
$(document).ready(function () {
var clicked = false;
$(".open-big").on('click', function () {
if (clicked) {
clicked = true;
$(".expandedImage").css({
"right": "100%"
});
}
});
$(".close-big").on('click', function () {
if (clicked) {
clicked = false;
$(".expandedImage").css({
"right": 0
});
}
});
});
wrap both event is document.ready and use one global flag for both.
you have to write like this:
$(document).ready(function () {
var open = true;
$(".open-big").on('click', function () {
if (open) {
open = false;
$(".expandedImage").css({
"right": "100%"
});
}
});
$(".close-big").on('click', function () {
if (!open) {
open = true;
$(".expandedImage").css({
"right": 0
});
}
});
});
<script type="text/javascript">
$(document).ready(function () {
var clicked = true;
$(".open-big").on('click', function(){abcde('100%')};
$(".close-big").on('click',function(){abcde(0)});
});
function abcde(percentage){
if (clicked) {
clicked = false;
$(".expandedImage").css({
"right": percentage
});
}
}
</script>
Use one document.ready.
Use one global clicked var.
Use one function with a param to prevent duplicates.
Btw only the first event will run since clicked is true and is in a global scope(I assume you want it that way).
What are you trying to do here?
The prompt popup that occurs when I click the button with class 'alert3' does not close.
CLICKMEMEMEMEMEME
and this is the function that I am invoking:
<script>
$(document).on("click", ".alert3", function(e) {
bootbox.prompt("What is your name?", function(result) {
if (result === null) {
Example.show("Prompt dismissed");
} else {
Example.show("Hi <b>"+result+"</b>");
}
});
});
</script>
The popup does not close because you have an error in the callback function, so it crashes before bootbox can make the popup disappear.
The best guess is that Example is not defined in your code. Maybe you took it on the Bootbox website, they are using a javascript object called Example.
If you want to show the result with your callback function, you can add this to your html:
CLICKMEMEMEMEMEME<br/>
<p id='result'></p>
And then change your javascript:
<script>
$(document).on("click", ".alert3", function(e) {
bootbox.prompt("What is your name?", function(result) {
if (result === null) {
$('#result').html("Prompt dismissed");
} else {
$('#result').html("Hi <b>"+result+"</b>");
}
});
});
</script>
Prompt popup in bootbox.js
That is not working because Example function is not defined there.We need to first defined them that using current selector value and text associated with them.here $("#result") is used to show error message in particular div.
html code:
<p>Click here-><a class="alert" href=#>Alert!</a></p><p id='result'</p>
code:
var Example = (
function()
{
"use strict";
var elem,
hideHandler,
that = {};
that.init = function(options) {
elem = $(options.selector);
};
that.show = function(text) {
clearTimeout(hideHandler);
$("#result").html(text);
$("#result").fadeIn();
hideHandler = setTimeout(function() {
that.hide();
}, 4000);
};
that.hide = function() {
$("#result").fadeOut();
};
return that;
}());
I need to write some code which is supposed to wait until a predefined div is no longer visible in order to process the next line. I plan on using jQuery( ":visible" ) for this, and was thinking I could have some type of while loop. Does anyone have a good suggestion on how to accomplish this task?
$( document ).ready(function() {
$(".scroller-right" ).mouseup(function( event ) {
alert('right');
pollVisibility();
});
});
function pollVisibility() {
if ($(".mstrWaitBox").attr("visibility")!== 'undefined') || $(".mstrWaitBox").attr("visibility") !== false) {
alert('inside else');
microstrategy.getViewerBone().commands.exec('refresh');
} else {
setTimeout(pollVisibility, 100);
}
}
$( document ).ready(function() {
$(".scroller-right" ).mouseup(function( event ) {
alert('right');
pollVisibility();
});
});
function pollVisibility() {
if (!$(".mstrWaitBox").is(":visible")) {
alert('inside if');
microstrategy.getViewerBone().commands.exec('refresh');
} else {
setTimeout(pollVisibility, 100);
}
}
div when not visible:
<div class="mstrWaitBox" id="divWaitBox" scriptclass="mstrDialogImpl" dg="1" ty="edt">
</div>
div when visible:
<div class="mstrWaitBox" id="divWaitBox" scriptclass="mstrDialogImpl" dg="1" ty="edt" visibility="visible">
</div>
You can use the setTimeout function to poll the display status of the div. This implementation checks to see if the div is invisible every 1/2 second, once the div is no longer visible, execute some code. In my example we show another div, but you could easily call a function or do whatever.
http://jsfiddle.net/vHmq6/1/
Script
$(function() {
setTimeout(function() {
$("#hideThis").hide();
}, 3000);
pollVisibility();
function pollVisibility() {
if (!$("#hideThis").is(":visible")) {
// call a function here, or do whatever now that the div is not visible
$("#thenShowThis").show();
} else {
setTimeout(pollVisibility, 500);
}
}
}
Html
<div id='hideThis' style="display:block">
The other thing happens when this is no longer visible in about 3s</div>
<div id='thenShowThis' style="display:none">Hi There</div>
If your code is running in a modern browser you could always use the MutationObserver object and fallback on polling with setInterval or setTimeout when it's not supported.
There seems to be a polyfill as well, however I have never tried it and it's the first time I have a look at the project.
FIDDLE
var div = document.getElementById('test'),
divDisplay = div.style.display,
observer = new MutationObserver(function () {
var currentDisplay = div.style.display;
if (divDisplay !== currentDisplay) {
console.log('new display is ' + (divDisplay = currentDisplay));
}
});
//observe changes
observer.observe(div, { attributes: true });
div.style.display = 'none';
setTimeout(function () {
div.style.display = 'block';
}, 500);
However an even better alternative in my opinion would be to add an interceptor to third-party function that's hiding the div, if possible.
E.g
var hideImportantElement = function () {
//hide logic
};
//intercept
hideImportantElement = (function (fn) {
return function () {
fn.apply(this, arguments);
console.log('element was hidden');
};
})(hideImportantElement);
I used this approach to wait for an element to disappear so I can execute the other functions after that.
Let's say doTheRestOfTheStuff(parameters) function should only be called after the element with ID the_Element_ID disappears, we can use,
var existCondition = setInterval(function() {
if ($('#the_Element_ID').length <= 0) {
console.log("Exists!");
clearInterval(existCondition);
doTheRestOfTheStuff(parameters);
}
}, 100); // check every 100ms