Menu icon Foundation
How to catch Off-canvas Events In ZF6 ?

Hi,

I'm trying to handle events when ZF6 Offcanvas is opened... Currently with no chance.
I've tried this code so far, but no success.

How could I catch such an event ?

    $(document).on("opened.zf.off-canvas", function(ev){
		alert("off_canvas Opened 1");
	});
	$(".off-canvas-wrapper").on("opened.zf.off-canvas", function(ev){
		alert("off_canvas Opened 2");
	});
	$(".off-canvas-wrapper-inner").on("opened.zf.off-canvas", function(ev){
		alert("off_canvas Opened 3");
	});
	$(".off-canvas").on("opened.zf.off-canvas", function(ev){
		alert("off_canvas Opened 4");
	});

offcanvasoff-canvaseventfiringevents

Hi,

I'm trying to handle events when ZF6 Offcanvas is opened... Currently with no chance.
I've tried this code so far, but no success.

How could I catch such an event ?

    $(document).on("opened.zf.off-canvas", function(ev){
		alert("off_canvas Opened 1");
	});
	$(".off-canvas-wrapper").on("opened.zf.off-canvas", function(ev){
		alert("off_canvas Opened 2");
	});
	$(".off-canvas-wrapper-inner").on("opened.zf.off-canvas", function(ev){
		alert("off_canvas Opened 3");
	});
	$(".off-canvas").on("opened.zf.off-canvas", function(ev){
		alert("off_canvas Opened 4");
	});
Brian Tan over 3 years ago

Docs error. Should be opened.zf.offcanvas

$(".off-canvas").on("opened.zf.offcanvas", function(e) {

Alex Laforge over 3 years ago

Hi Brian,

You're the winner ;) it works !

The docs are very very incomplete... That's so sad.. It seems Zurb released ZF6 because Bootstrap 4 was launched this year, and they did not wished to "wait no more" in order to look like "still in the race". But I really really hope the docs will be fully completed soon, very soon.

Thanks again Brian, you seem having the whole science of the entire world concerning Foundation !

Brian Tan over 3 years ago

Just dip into foundation.offcanvas.js (line 217) and you can see the error. :)

Cheers!

Alex Laforge over 3 years ago

Yes Brian, the foundation .JS files are always opened in my editor, because that seems to be the only place to dig real documentation...

Brian Tan over 3 years ago

Merry Christmas and happy holidays !

Alex Laforge over 3 years ago

Thank you very much Brian ;)
I wish a good moment with all your loved ones !

Colin Marshall over 3 years ago

Good find on this. It was driving me crazy the other day when I couldn't figure out why the Off Canvas events were not working. I opened an issue to get this fixed: https://github.com/zurb/foundation-sites/issues/7681

Andrew Sepic 3 months ago

Thank Goodness!  Was looking all over on how to call this Javascript event to tag on some animation to the Hamburger icon. 

THe docs have been updated and do have the event handlers listed properly, but I'm not savvy enough to know how to call them without the proper element and  the .on() function.  

Thanks Brian!