I have been working on this menu plugin, and its working fine, however there is one problem I've noticed, please see this JSFiddle Demo
When menu is opened, I have added a close button (x) on the top right corner of the menu, when I click on close its sliding to left and hiding but when I click on menu again its not opening but if you click once again it works perfectly.
Can somebody please guide how to make my custom close icon working perfectly, as its doing with outside menu click?
I found that on close click, its removing a class and adding inline css of translate3D which I have done same in my jquery, but no luck
Here is my close jQuery function
$(document).ready(function(){
$('.nav-close').click(function(){
$("#mp-pusher").removeClass('mp-pushed').css("transform","translate3d(0px, 0px, 0px)");
$(".mp-level").removeClass('mp-level-open');
});
});
What you want to do is keep a reference to the menu so you can close it in your event.
https://jsfiddle.net/ps855n8r/14/
var menuItem = new mlPushMenu( document.getElementById( 'mp-menu' ), document.getElementById( 'trigger' ) );
That way in your event you can close like so :
menuItem._resetMenu();
Don't try to close it manually using the DOM, which means your even function becomes like this :
$(document).ready(function(){
$('.nav-close').click(function(el){
menuItem._resetMenu();
});
});
Also helpful for calling other methods on the mlPushMenu object elsewhere. In the above example; menuItem is your reference.
Related
I have an off canvas navigation menu (classname that is enabled via hover-over using jQuery on my Wordpress site. It is, as it should be, not visible on page load.
For the mobile version, I want the same nav menu to be activated by clicking on a menu icon (that I've given two classes, in this order: mobile-nav-toggle show-nav-mobile). The toggle method seems to only work for a vertical toggle. My solution to replicating the same animation on click rather than hover, is by using the toggleClass method on the icon to toggle between a classname that opens the menu nav (show-nav-mobile) and closes it (hide-nav-mobile) Using the below code:
jQuery(".show-nav-mobile").click(function(){
jQuery(".offcanvasmainnav").animate({left:'0px' }, 250);
});
jQuery(".mobile-nav-toggle").click(function(){
jQuery(".mobile-nav-toggle").toggleClass("show-nav-mobile hide-nav-mobile");
});
jQuery(".hide-nav-mobile").click(function(){
jQuery(".offcanvasmainnav").animate({left:'-640px' }, 250);
});
That doesn't seem to do the job though. The jQuery opens the offcanvasmain div just fine, but doesn't close it again.
What is wrong with my approach?
I assume your element initially looks somewhat like this:
<nav class="mobile-nav-toggle hide-nav-mobile">...</nav>
This means that
a) Both these click handlers will always run when clicking, no matter if the element still has the class hide-nav-mobile:
jQuery(".mobile-nav-toggle").click(function(){
jQuery(".mobile-nav-toggle").toggleClass("show-nav-mobile hide-nav-mobile");
});
jQuery(".hide-nav-mobile").click(function(){
jQuery(".offcanvasmainnav").animate({left:'-640px' }, 250);
});
jQuery finds the element at the moment you define the click handler; it doesn't recheck if the element still has this class when clicking later.
b) This never attaches a click handler:
jQuery(".show-nav-mobile").click(function(){
jQuery(".offcanvasmainnav").animate({left:'0px' }, 250);
});
because at the time of calling jQuery(".show-nav-mobile") it cannot find any element with that class.
To fix it, do this all in a single click handler:
jQuery(".mobile-nav-toggle").on('click', function(){
const that = jQuery(this);
that.toggleClass("show-nav-mobile hide-nav-mobile");
jQuery(".offcanvasmainnav").animate({left: that.hasClass('show-nav-mobile') ? '0px' : '-640px' }, 250);
});
I guess this is a noob question. I want Bootstrap "navbar-collapse" to close by clicking away or by clicking one of list items. I found this code somewhere and it works.
$(document).on('click',function() {
$('.collapse').collapse('hide');
});
But this code also makes Bootstrap "panel-collapse" elements close by clicking away and of course I don't want this to happen.
How can I specify that I want this code to work only for "navbar-collapse" elements?
Give your navbar collapse elements a new class and assign it inside:
$('.NewClassName').collapse('hide');
Note that you ADD that class to the navbar collapse elements without removing the old class.
Your code is correct.
The above displayed a weird behavior for me where sometimes a scroll bar would appear on the nav. That could be from some fancy css but the below fixed it for me.
$(document).on('click',function(e){
if($('#navbar-collapse').hasClass('in')){
$('.collapse').collapse('hide');
}
})
Also, make sure you have the
<script src="/js/bootstrap.min.js"></script>
in your file.
Check whether you are clicking outside the navbar. Collapse method can be fired expectedly by using our reference to the navbar
$(document).click(function (event) {
var target = $(event.target);
var $navbar = $(".navbar-collapse");
var opened = $navbar.hasClass("in");
if (opened === true && !target.hasClass("navbar-toggle")) {
$navbar.collapse('hide');
}
});
If you are using the bootstrap navbar class, you can simply do:
$('.navbar .collapse').collapse('hide');
This will hide all collapse elements which are children of the navbar class.
I'm working within WordPress and have two menus on a mobile site using viewport media queries to control elements. When viewing the site in 768 wide two mobile menus replace the desktop. To achieve this I'm using widgets in the top left drop down with two custom menus.
The left widget drop down is a Shortcodes Unlimited shortcode embedded.
The main menu on the right is just a basic menu using jquery.dlmenu.js v1.0.1 from http://www.codrops.com.
When visiting the page you can click on the left dropdown widget and it works as expected. You can also click the right dropdown menu and it works as expected. However, once you click on the right downdown menu, you cannot click on the left dropdown widget.
mobile/jquery.dlmenu.js registers first.
shortcodes-ultimate/assets/js/other-shortcodes.js registers second.
jQuery(function($) {
$( "#dl-menu" ).dlmenu({
animationClasses : {
classin : "dl-animate-in-2", classout : "dl-animate-out-2" }
});
});
The scripts are all loaded in the footer.
There are no console errors.
http://iemajen.com/lexingtonhabitatforhumanity/
I think that the problem is in this lines in jquery.dlmenu.js file (themes/bonesv2/mobile/jquery.dlmenu.js);
// clicking somewhere else makes the menu close
$body.off( 'click' ).on( 'click.dlmenu', function() {
self._closeMenu() ;
} );
Your plugin Shortcodes Unlimited bind click listeners to body tag, which listen for the click event into .su-spoiler-title in this case. But in your jquery.dlmenu.js when you click dlmenu, it unbind all click events from body and bind its own.
So to be sure that this is the problem, try to remove this .off('click') command:
// clicking somewhere else makes the menu close
$body.on( 'click.dlmenu', function() {
self._closeMenu() ;
} );
If problem is here, you can try to unbind only 'click.dlmenu' event:
// clicking somewhere else makes the menu close
$body.off( 'click.dlmenu' ).on( 'click.dlmenu', function() {
self._closeMenu() ;
} );
P.S. You must inspect in Inspector if this will unbind properly.
I'm trying to figure out how to make a pop-up menu using the jQuery UI menu widget.
After searching around, I finally found the following demo that does what I want:
http://view.jqueryui.com/menubar/demos/popup/popup-menu.html
However, I am having a little trouble understanding this demo. For example:
What is making the menu hidden before any of the buttons are clicked?
What is causing the menu to close when it's open and I click somewhere else on the page?
Any help appreciated.
That demo uses a modified version of jquery.ui.menu.js along with the popup widget: http://view.jqueryui.com/menubar/ui/jquery.ui.popup.js
Menu itself, as released in 1.9, doesn't have any code for showing it as a popup. I recommend writing some custom code to build a popup menu, until a stable release offers a proper solution.
The jQuery UI Popup - Popup Menu you referenced uses unreleased code as Jörn Zaefferer said. (Notice that Jörn is the same guy that closed the bug)
But there is an almost identical-looking solution in jQuery UI Button's Split Button example that doesn't use .popup() and does all the hiding etc. explicitly.
Perhaps you could use that as a starting point instead. I know I'm going to! ;-)
I believe this may be what you're looking for. When you call .menu(), lots of things are triggered in the _create() function (as Derek said), like setting class names etc. Then, at lines 123-135 in jquery.ui.menu.js, this happens:
this.refresh();
// Clicks outside of a menu collapse any open menus
this._on( this.document, {
click: function( event ) {
if ( !$( event.target ).closest( ".ui-menu" ).length ) {
this.collapseAll( event );
}
// Reset the mouseHandled flag
mouseHandled = false;
}
});
The second part makes sure all menus are collapsed when the user clicks on the page (this.document) outside a menu (.ui-menu): this.collapseAll() is called, which calls this._close(), which in turn calls hide(). This should answer your second question.
As for your first question, The first thing the refresh() function does is:
// Initialize nested menus
var menus,
icon = this.options.icons.submenu,
submenus = this.element.find( this.options.menus + ":not(.ui-menu)" )
.addClass( "ui-menu ui-widget ui-widget-content ui-corner-all" )
.hide()
.attr({
role: this.options.role,
"aria-hidden": "true",
"aria-expanded": "false"
});
This finds all submenus not previously initialized (in this case all of them since we're coming from _create()) and initializes them, which includes hiding them.
at the moment Im only learning javascript and could do with some help here as Im a little confused as to where to go from here.
I have a site with a modal using jquery, I can get it to show when I click on the image, but when I click elsewhere it doesnt turn it off.
Ive tried toggle, but that makes it turn on and off no matter where I click.
Ive tried hide but that stops it working at all (assuming its applying the hide function even when I click on the link)
Heres what I have so far, any help would be great...
jQuery('#youtube').click(function(){
jQuery('#youtubemodal').show();
});
make an function that checks for youtubemodal that is shown and then hide.
$("document").click(function() {
if( $('#youtubemodal').is(':visible') ) {
$('#youtubemodal').hide();
}
});
Here's what you need to do:
$('#youtube').click(function(){
$('#youtubemodal')
.show()
.on("click", function(e){
e.stopPropagation();
});
$(document).on("click.youtubemodal", function(){
$(this).off(".youtubemodal");
$('#youtubemodal').hide();
});
});
This is how it will behave:
When you click on the image, the modal appears
When the modal appears, we add a listener to document so that when you click anywhere, the modal is hidden (and the listener is removed as well)
When the modal appears, we also add a listener to it, so that if you click on the modal if doesn't hide it: the modal is only hidden if you click outside of it
Note: if you're not using jQuery 1.7 or above, replace .on() with .bind(), and .off() with .unbind()
I came up with my own workaround for this, where I set up a div with a dark background with an opacity of 40%,that appears throughout the page when the modal is loaded.
#modalbackground {
width:100%;
height:100%;
background-image: url('images/modalbackground.png');
background-repeat: repeat;
position:fixed;
z-index:600;
display:none;
}
I then put this div outside of everything to insure it covers the entire page
<div id="modalbackground"> </div>
I then applied this code to make sure the div and the modal closes when I click on the new dark "background".
jQuery('#youtube').click(function(){
jQuery('#youtubemodal').show();
});
jQuery('#youtube').click(function(){
jQuery('#modalbackground').show();
});
jQuery('#modalbackground').click(function(){
jQuery('#modalbackground').hide();
});
jQuery('#modalbackground').click(function(){
jQuery('#youtubemodal').hide();
});