I'm trying to improve the interface of the menu here:
http://jsfiddle.net/u5brv/2/
I think it's great that it is toggled on click but I do think that if the user clicks anywhere else, for example, the bottom corner of the screen, the menu should toggle close if it isn't already.
$(document).ready(function () {
$('#nav li').mousedown(function () {
$('ul #items').toggle(100);
});
});
How would one approach this in an efficient a way as possible? If the menu is open do we need to track every mouse click and see if it is on the menu or not?
You need to attach a click handler to the document which closes the menu:
$('#nav li').click(function (e) {
e.stopPropagation();
$('ul #items').toggle(100);
});
$(document).click(function() {
$('#items').hide();
});
Note that stopPropagation is required on the opening link to stop the event reaching the document itself.
$(document).ready(function () {
$('#nav li').mousedown(function (event) {
event.stopPropagation();
$('ul #items').toggle(100);
});
$(document).mousedown(function(e) {
$('ul #items').css('display','none'); //make all inactive`enter code here`
});
});
Related
Hello everyone I'm trying to modify the bootstrap tabs plugin, to become a tabbed menu, so that instead of click event, it reacted on mouseover/mouseout events. So far I've made it open the tab-pane on mouseover and close on mouseout, but the problem is that on mouseout tab-panes close before the user can choose anything at tab-pane. I need to make tab-panes not to hide if the mouse is over them and only is the mouse has left them.
Here is the jQuery code I've ended up with
(function ($) {
$('.nav-tabs a').bind('mouseover mouseout', function(e){
if(e.type == 'mouseover'){
e.preventDefault();
$(this).tab('show');
}else{
if($('.tab-pane').hasClass('active')){
$(this).parent('li').removeClass('active');
$('.tab-pane').removeClass('active');
}
}
});
})(jQuery);
You can do as follows
$('.nav-tabs a').bind('mouseover', function(e){
$(this).click();
});
Working fiddle
Update
$('.nav-tabs a').bind('mouseover', function(e){
$('.tab-content').show();
$(this).click();
});
$('.nav-tabs').bind('mouseout', function(e){
$('.nav-tabs li').removeClass('active');
$('.tab-content').hide();
});
Updated fiddle
I've got a problem with the navigation dropdown on my site that I've almost solved but can't quite fix. I'm worried I may have just made a mess out of my code.
When I introduced a "scroll to anchor tags" function with a preventDefault event, it broke my nav menu. The menu wouldn't close unless you clicked on the menu button again. I've finally got it to close after you click one of the links, but that's now the only way to close it. How do I have it close when clicking on the menu button or anywhere else on the site? I'm sure that bit of jQuery is the culprit, but don't know how to fix it or work around it.
HTML for the menu:
<div class="main-nav navbtn">
<div class="dropdown"><i onclick="myFunction()" class="dropbtn material-icons md-48"></i>
<div id="myDropdown" class="dropdown-content">
Home
About
Services
Work
Testimonials
Contact
Blog
</div>
</div>
</div>
And the related jQuery:
// When the user clicks on the button, toggle between hiding and showing the dropdown content
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
//// Close the dropdown menu if the user clicks outside of it
window.onclick = function (event) {
if (!event.target.matches('.dropbtn')) {
dropdowns.forEach(function (openDropdown) {
dropdown.classList.contains('show') && dropdown.classList.remove('show');
});
}
};
////This is the section I made for it to close after clicking a link
jQuery(document).ready(function ($) {
$('.dropbtn').on('click', function () {
$(".dropdown-content").show();
});
$('.navlink').on('click', function () {
$(".dropdown-content").hide();
});
});
This is the potential problem that's screwing the other functions up.
//Scroll to anchor tags
$(document).on('click', 'a:not(.external)', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});
var $root = $('html, body');
$('a').click(function () {
$root.animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
return false;
});
What in the world should I do to fix my menu?
You can take a look at the work-in-progress site at http://idpdx.kreigd.com
Update: I think I've got a lead on where things are getting confused. The function I'm using to add the dropdown functionality requires that the class "show" be added once the .dropbtn element is clicked, and removed when it is clicked again.
So what I really need to do is rework the code so that clicking .dropbtn opens the dropdown, and clicking on anything else, including the nav buttons and the .dropbtn element, will close it.
Update 2: Trying a different method. Ignore that first update.
Try this & let me know
$(document).click(function() {
$(".dropdown-content").hide();
// $(".dropdown-content").removeClass("show");
});
$(".dropdown-content").click(function(e) {
e.stopPropagation(); // if you click on the div itself it will cancel the click event.
});
you can try with something like this
$('body').not("#myDropdown").off('click').on('click',function(){$("#myDropdown").removeClass("show")});
I tried the code in your website but you have written some code on window.click which is causing issue.
#Nikhil's answer got me further but has it's downsides. I came up with the following solution:
$(document).click(function (e) {
var target = $(e.target);
// check the actual element being clicked is not the dropdown trigger itself
if (!target.hasClass('dropdown-trigger') && !target.closest('.dropdown-trigger').length) {
// use the framework to close the dropdown instead of just hiding it: hiding it will require you to click the trigger 2 times to reopen!
$('dropdown-trigger').dropdown('close');
}
});
I have a problem with Bootstrap tabs. I want to create a tab-based menu with a submenu. On all tabs there is a mouseenter event attached, so when I enter the tab with the mouse pointer there appear links in submenu. But some of the tabs do not need a submenu, so I need attach to them a click event, that recognizes what tab i clicked and redirects me to a page. I attached the click event with this code:
$('#mainTabPanel a').click(function (e) {
e.preventDefault();
var $destination = $(this);
if ($destination.hash === "#about") {
window.location.replace("http://stackoverflow.com");
}
});
But it's not working. Can you help me?
EDIT
I've made a example in JsFiddle:
https://jsfiddle.net/Romanus91PL/a12m71pf/5/
When I click the "Bing Link" anchors, they redirect me to the bing.com site. I want to apply such an event too to the About tab (when I click it, it should redirect me to the bing site).
If I understand Your problem correctly, what about this
$(function () {
$('#mainTabPanel a').mouseover(function (e) {
e.preventDefault();
$(this).tab('show');
});
$('#mainTabPanel a').click(function(e) {
e.preventDefault();
if (this.hash === "#about") {
window.location.replace("https://bing.com");
}
});
});
https://jsfiddle.net/szepiet83/myqo4wx7/
Please try below given code.It may help you..
$(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
console.log(e.target) // activated tab
})
I am new to JQuery Development. I am facing a issue with the onblur event, while i am trying to make a custom menu for my website. could any one help me with this please.
Please find ths JS fiddle JS Fiddle
$(document).ready(function () {
$('#showmenu').click(function (e) {
e.preventDefault();
this.focus();
$('#serviceMenu').slideToggle("fast");
$('#Contact').hide();
});
$('#showmenu').blur(function (e) {
$('#serviceMenu').hide();
});
});
The issue is that the show/hide div mechanism is based on a <a> tag. on clicking <a> the menu is toggling fine. i also want menu to toggle, when the user clicks anywhere outside the menu and the appearing div. In the fiddle i have added onblur() event for the anchor, that is making my sub links inside the div trigger onblur() event of main anchor, and hiding the menu. I tried to block event.propagation(), but its not working for me.
The problem here is, that the blur event is called, BEFORE you click on a#serviceMenu
You also should learn how the event-propagation works: Direct and delegated events
I updated your fiddle (with some comments): http://jsfiddle.net/M4LJh/7/
$(document).ready(function () {
$('#showmenu').on('click', function (e) {
this.focus();
$('#serviceMenu').slideToggle("fast");
$('#Contact').hide();
return false;
});
// prevent clickEvent to bubble up to #showmenu
$('#serviceMenu a').on('click', function(e){e.stopPropagation();});
// hide #serviceMenu on bodyClick
// - anywhere but an element with propagation stopped event
$('body').on('click', function (e) {
$('#serviceMenu').hide();
return false; // e.stopPropagtaion(); + e.preventDefault();
});
});
Maybe I'm, just tired but I have a right click menu that I want to close when the user clicks anywhere else than the menu. But I cant figure out how to make it disappear when the user clicks on something else.
Here is the code for showing the menu:
// If mouse click on was pressed
$('#content_list table tr').bind('mouseup', function(event) {
// if right click
if(event.which == 3) {
showRightClickMenu(event);
}
event.preventDefault();
event.stopPropagation();
});
And this is what I got for hiding the menu
// If mouse click outside document
$(document).bind('blur', function(event) {
hideRightClickMenu();
event.stopPropagation();
});
// If mouse click not on the menu
$('*:not(#rightClickMenu *)').bind('mousedown keydown', function(event) {
hideRightClickMenu();
event.stopPropagation();
});
The first bind checks if the user clicks outside the document and the second bind checks if the user clicks on everything except the menu.
But the second one doesn't really work. If I click on the menu the menu is hidden.
Shouldn't be so hard imo... Anyone got any ideas?
Try it this way
$(document.body).bind('click', function() {
hideRightClickMenu();
});
$(window).bind('blur', function() {
hideRightClickMenu();
});
Try with focusout() event and using on() instead of old bind(). This will work even with multiple submenus.
http://jsfiddle.net/elclanrs/jhaF3/1/
// Something like this...
$('#menu li').on('click', function() {
$(this).find('ul').show();
}).find('ul').on('focusout', function(){
$(this).hide();
});