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
Related
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'm using jQuery tabs, and I currently have a slide effect whenever you click on a tab. My question is: How do you prevent a slide effect from happening on the current active tab if you click it again.
Here is my jQUery:
$(document).ready(function(){
$('#tabs').tabs();
$("#tabs a").click(function() {
$('#tabs p').effect( "slide", "medium" );
});
});
Here is the fiddle:
http://jsfiddle.net/YRp62/2/
If you click "Second" and then click "Second" again. It slides into itself. How do you break the effect if you click on the active tab?
use tabs activate event instread of click event
$(document).ready(function(){
$('#tabs').tabs({
activate: function(event, ui){
$('#tabs p').effect( "slide", "medium" );
}
});
});
Demo
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`
});
});
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();
});
});
So I want to get the button .notification to make .notificaiton-dropdown appear, and clicking outside of this element would close it. This works.
However, when I go to click on the element, it causes it to close. I want the current functionality, but not when clicking on the element itself so I can interact with it.
$(document).ready( function(){
$('.notification').click( function(event){
event.stopPropagation();
$('.notification-dropdown').toggle();
});
$(document).click( function(){
$('.notification-dropdown').hide();
});
});
I hope that's enough information. Thanks as always.
you need to stop the event propagation from notification-dropdown also
$(document).ready( function(){
$('.notification-dropdown').click( function(event){
event.stopPropagation();
});
$('.notification').click( function(event){
event.stopPropagation();
$('.notification-dropdown').toggle();
});
$(document).click( function(){
$('.notification-dropdown').hide();
});
});
I'd say:
$(document).click( function(e){
if($(e.target).closest('.notification-dropdown').length) return;
$('.notification-dropdown').hide();
});