Callback event when jQuery 'mmenu' closed - javascript

Using the jQuery mmenu plugin, I need to call a JavaScript function either after the menu has finished closing or simultaneously.
In the documentation I can't see any suggestion for closing entire menu but only for closePanel.
I need to insert in mmenu closing function another one (custom) to hide lightbox effect on the page.
<script type="text/javascript">
$(document).ready(function() {
$("#menu").mmenu({
"extensions": [
"theme-white"
],
"offCanvas": {
"zposition": "front"
},
"slidingSubmenus": false
});
$("#menu").show();
});
</script>
<script type="text/javascript">
function lightbox(){
(function($) {
// some stuff
})(jQuery);}
</script>
is there a way to bind another function after the plugin has been closed or better, when entire menu closing action?

I had the same exact question today and after some tinkering, this works for me. Bind to the opened/closed events like so:
$('#mmenu_id').data('mmenu').bind('opened', function () {
console.log('opened');
});
$('#mmenu_id').data('mmenu').bind('closed', function () {
console.log('closed');
});

you could try binding to the closing event
$('#mmenu').on('closing.mm', function() {
// do something
});
There is also a closed event too, so you can use which ever is appropriate
$('#mmenu').on('closed.mm', function() {
// do something
});

Related

jQuery bind event not firing on elements loaded via $().load()

I have a DIV that is in an .html file that is loaded into my document via:
$(document).Ready( function() {
$("#contentDiv").load("some.html")
//some.html contains a button id=saveButton
$("#saveButton").click( function () {
alert("Here I am!");
}
});
The event will not fire. If I cut the content of some.html and put it in the document, uhm, "physically", the event will fire.
So, I am pretty sure this issue is related to the fact that the html is injected via .load().
It's bothersome, because if you look at the page source, all the HTML is in fact there, including the button.
So, the question is, is there ANY way to make this work? I am using .load() to reduce page complexity and increase readability, and, code-folding notwithstanding, I really do not want to have to pull all this HTML into the document.
EDIT: This code was just typed in off the cuff. It's not a cut-n-past of the actual code, and it is just to demonstrate what the problem is. But, thanks for pointing it out.
EDIT2: Grrrrrrr. });
load() is asynchronus so you need to the job in the callback :
$(document).ready(function() {
$("#contentDiv").load("some.html", function(){
//some.html contains a button id=saveButton
$("#saveButton").click( function () {
alert("Here I am!");
});
});
});
Hope it helps :)
one way is by adding to the some.html the script line which will be loaded as the div appears.
You can add this script to some.html(in a script tag):
registerButton();
and then you can define registerButton() in your current document.
other way, if I remember correctly is by using something like the function bind( )
If you want to fire event on element which was not available at the time when DOM was ready then you need to use .on event.
http://api.jquery.com/on/
$("#saveButton").on("click", function() {
alert("Here I am!");
});
jquery load() function is asynchronous. If you want to bind events to the loaded content, you should put the code into the callback function:
$(document).ready(function() {
$("#contentDiv").load("some.html", function() {
//you should put here your event handler
});
});
Your issue is that jquery load() function is asynchronous as #lucas mention. But his code has syntax errors, try this:
$(document).ready(function () {
$("#contentDiv").load("some.html", function () {
$("#saveButton").click(function () {
alert("Here I am!");
});
});
});
Hope it helps now
You need to bind the event handler either after the load OR to the container of the HTML from the load
$(document).ready(function() {
$("#contentDiv").load("some.html", function() {
$("#saveButton").on('click',function() {
alert("Here I am! Bound in callback");
});
});
});
OR use: (not needed that it be in the document ready just that the contentDiv be present)
$("#contentDiv").on('click','#saveButton',function(){
alert("Here I am! bound to container div");
});
EDIT: load on the SAVE button click (per comments) (this makes no sense though)
$(document).ready(function() {
$("#saveButton").on('click',function() {
$("#contentDiv").load("some.html", function() {
alert("Here I am! Bound in callback");
});
});
});

jQuery issue with fancybox

I am using jquery click event to open fancybox and it is working perfect. I have added one textbox inside this inline1 div but when I input something I can't writer anything.
My Code:
$(document).ready(function() {
$(".fancybox").on("click", function() {
$("#inline1").fancybox().trigger('click');
})
});
jsFiddle: my code
Any Idea?
Thanks
There was a problem with the triggering of 'click', I managed to fix this by simply using the Fancybox API to open the Fancybox without requiring a trigger.
$(".fancybox").on("click", function () {
$.fancybox.open( '#inline1' )
});
http://jsfiddle.net/xW5gs/1171/
$(".fancybox").on("click", function() {
$.fancybox($('#inline1').html())
})
check here

Bootstrap modal on shown method run multiple times

I use twitter bootstrap modals's js to show and hide a modal:
$('#myModal').modal('show')//show
$('#myModal').on('shown', function () {
// do something…
})
$('#myModal').on('hidden', function () {
// do something…
})
....
$('#myModal').modal('hide')//hide
My problem is when show and hide modal multiple times, the code in //do something... run multiple times. I guess that's because every time i show a modal, it listen to shown and the function run 5 times when the modal hide and open 5 times, any way to prevent this?
Using the way fco suggested below did solve the shown problem, but unfortunately the hide does not work, i.e. still execute more than one times, one thing different, i hide the dialog using the data-dismiss="modal" markup, not through js.
Any ideas?
You should use one instead of on
The .one() method is identical to .on(), except that the handler is unbound after its first invocation. For example:
$('#myModal').modal('show')//show
$('#myModal').one('shown', function () {
// do something…
})
$('#myModal').one('hidden', function () {
// do something…
})
....
$('#myModal').modal('hide')//hide
check out .off()
if you want the event handler to run only the first time you need to do something like:
function myHandler() {
//your event handling code here
$('#myModal').off('show', myHandler);
}
$('#myModal').on('shown', myHandler);
$('#myModal').modal('show');
//...
$('#myModal').modal('hide');

How to use Zurb Foundation reveal with open, opened, close, closed callback functions?

On zurb foundation's website at http://foundation.zurb.com/docs/reveal.php they listed some Options including
open: callback function that triggers 'before' the modal opens.
opened: callback function that triggers 'after' the modal is opened.
close: callback function that triggers 'before' the modal prepares to close.
closed: callback function that triggers 'after' the modal is closed.
But I have no idea how to use them with my modal.
I tried:
$('#myModal').closed(function()
{});
$('#myModal').trigger('reveal:closed')(
{});
$('#myModal').reveal.closed(function()
{});
$('#myModal').reveal().closed(function()
{});
I have Googled but found no hits. Anyone who can explain it or give me an example or provide a related link?
The suggestion given works, however
I have yet another closely related question for reveal():
Click Me For A Modal);
I tried to add one attribute like data-closeOnBackgroundClick="false" That doesn't seem to work. What should be the correct syntax? Will it work for callback function as well?
The above answer did not work for me. Here's what worked (Foundation 4 and jQuery):
$('#myModal').bind('opened', function() {
console.log("myModal opened");
});
Event Bindings for Zurb Foundation Reveal -
There are a series of events that you can bind to for triggering callbacks:
$(document).on('open.fndtn.reveal', '[data-reveal]', function () {
// your code goes here...
});
$(document).on('opened.fndtn.reveal', '[data-reveal]', function () {
// your code goes here...
});
$(document).on('close.fndtn.reveal', '[data-reveal]', function () {
// your code goes here...
});
$(document).on('closed.fndtn.reveal', '[data-reveal]', function () {
// your code goes here...
});
If you have multiple data-reveal used in single page as follows :
<div class="content reveal-modal" id="element-1" data-reveal>
<div class="content reveal-modal" id="element-2" data-reveal>
Then in this situations you can trigger callback same as explained above but with little modification as shown below :
$(document).on('open.fndtn.reveal', '#element-1[data-reveal]', function () {
// your code goes here...
});
$(document).on('open.fndtn.reveal', '#element-2[data-reveal]', function () {
// your code goes here...
});
Call reveal like you normally would, but include the name of the option and corresponding function as an object:
//Reveal the modal and say "Good bye" when it closes
$("#myModal").reveal({ "closed": function () { alert("Good bye") } });
On Zurb Foundation v6, these events were renamed to xxx.zf.reveal:
closeme.zf.reveal Fires immediately before the modal opens. Closes any other modals that are currently open
open.zf.reveal Fires when the modal has successfully opened.
closed.zf.reveal Fires when the modal is done closing.
Source: http://foundation.zurb.com/sites/docs/reveal.html#js-events
Examples:
Generic callback that will fire for all modals:
$(document).on('open.zf.reveal', '[data-reveal]', function() {
console.log('This works');
});
Callback that will fire when a specific modal is opened:
$(document).on('open.zf.reveal', '#<ELEMENT-ID>[data-reveal]', function() {
console.log('This works');
});
Like meatrobot said, to get this working you want to bind to the modal with the action you are targetting. I got this to work:
$('#myModal').bind('closed', function() {
console.log("myModal closed!");
});
This is a little late but for the second part you add the attributes as a semi-colon separated list of values in the data-options attribute (tested with foundation 5), i.e:
<div id="myModal" data-options="close_on_background_click:false;" class="reveal-modal">
And no, you cannot pass functions this way, i tried :)
Looking at Foundation 5 and found that the reveal library triggers open, opened, close, and closed events. Just attach a handler to the event you want.
$('#myModal').on([event], handler)
You can also pass the handlers via the settings argument.
Check this out: https://github.com/zurb/foundation/blob/master/js/foundation/foundation.reveal.js#L92
The foundation 5 documentation specifies scoping of reveal events to the 'reveal' eventspace. However, the actual modal events do not seem to fire consistently within this eventspace. Removing this specification fixes the issue:
$(document).on('opened.fndtn', '[data-reveal]', function() {
console.log('This works');
});
In foundation 3.2.5 you should bind 'reveal:opened' like this:
$('#myModal').bind('reveal:opened', function() {
console.log("myModal opened");
});
Regards, MarianoC.

Trigger a jQuery Event Handler Assigned in a Different Code Block

I have a case where a click handler is defined/assigned in one jQuery code block (file) and I want to trigger it from another click event defined/assigned in a different jQuery code block. How can I accomplish this?
The following code is a greatly simplified version of what I am trying to accomplish. The behavior I want to see is a JavaScript alert "Element One" when I click #Element2.
Example HTML:
<p id="Element1">Element One</p>
<p id="Element2">Element Two</p>
First jQuery code block:
$(document).ready(function() {
$('#Element1').click(function() {
alert('Element One');
});
});
Second jQuery code block:
$(document).ready(function() {
$('#Element2').click(function() {
$('#Element1').click();
});
});
UPDATE: My original example actually works. I was building upon my field hint jQuery UI Dialog solution, and didn't account for about the 'clickoutside' handler that I was using. Adding a check to for the second element in my 'clickoutside' handler allows the dialog to display.
You need to trigger a click when you click on the first element. You can use the trigger method for this.
function element1Hanlder () {
alert('Element One');
}
$(document).ready(function() {
$('#Element1').click(function() {
alert('Element One');
});
});
$(document).ready(function() {
$('#Element2').click(function() {
$('#Element1').trigger('click');
});
});
EDIT: This is based on JohnP's "trigger" suggestion (so you should choose him as the right answer)...
If I load this block from an external js file...
$(document).ready(function() {
$('#Element1').click(function () {
alert( $(this).text() );
});
});
Then load this in a script tag within the HTML itself...
$(document).ready(function() {
$('#Element2').click(function () {
$('#Element1').trigger('click');
});
});
Seems to be working as intended.

Categories