Prevent jQuery Tab from Performing Transitioning Effect on Active Tab - javascript

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

Related

Jquery slideToggle, slideUp & stopPropagation in Firefox

I am using jquery slidetoggle & slideup so that, when a user clicks on #link, #div (which is by default hidden) slides open. Additionally, any click anywhere should slideUp and hide #div. So my script is like this:
$( document ).ready(function() {
$('#link').click(function(){
$('#div').slideToggle('fast');
event.stopPropagation();
});
$(window).click(function() {
$('#div').slideUp('fast');
});
});
This works fine in Chrome, but in Firefox the initial click to open the div also triggers the slideUp, so the div slides down and then immediately slides back up. What am I doing wrong here? Is there a better way to accomplish what I'm trying to do?
Seems like you have missed to pass event object to the listener.Correct your code to this and try..
$( document ).ready(function() {
$('#link').click(function(event){ //note here
$('#div').slideToggle('fast');
event.stopPropagation();
});
$(window).click(function() {
$('#div').slideUp('fast');
});
});
for more details refer here event.stopPropogation
hope this helps!

Bootstrap tabs mouse events

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

Slide Down Menu - How to allow only one path open at a time?

Currently if I have a menu open and click on another one it opens the 2nd one and the 1st stays open. I can even have all open at the same time!
I'd like to change this behavior so that I never have more than one menu open at a time. (accounting for all levels/sub-menus)
Say I open "Home" and click on "Item 4". "Sub Item 1" and "Sub Item 2" appear. If I then click on "Contact" at the top the other menu that is open should close (ideally all levels should slide up one at a time) before "Contact" slides down.
I know the issue is the Javascript so I'm not gonna paste the HTML and CSS here to not take too much space.
JSFiddle
Thanks
$(function(){
$('ul#menu li').on('click', function(){
$(this).children('ul').delay(20).slideToggle(600);
});
});
$('ul').on('click', function(e){
e.stopPropagation();
});
Try this Fiddle
JS code:
$(function(){
$('ul#menu li').on('click', function(){
if($(this).children('.drop').size() > 0) {
$("ul.drop").slideUp();
$("ul.drop").find('ul').hide();
} else {
}
$(this).children('ul').delay(20).slideToggle(600);
});
});
$('ul').on('click', function(e){
e.stopPropagation();
});

Interface menu, close if opened and user clicks outside menu

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`
});
});

Stop jquery tabs from moving to the top of the page

I have set up tabs on a site using jquery, so that 4 pages of data can be shown without refreshing the page.
This works fine but there is one quirk which I want rid of! If ive scrolled down the first page a bit, and then click on another tab, the 2nd tab appears but is no longer scrolled down (ie it appears and the page moves back up to the top). This makes the page 'look' as though its reloading even though its not. Is there a way to prevent the page moving, ie locking the scrollbar in its current position?
This is the script for creating the tabs and loading the different sections into view:
<script>
//add the tabs
$(document).ready(function() {
$('.tabs a').click(function() {
var $this = $(this);
$('.panel').hide();
$('.tabs a.active').removeClass('active');
$this.addClass('active').blur();
var panel = $this.attr('href');
$(panel).fadeIn(250);
return false;
}); //end click
$('.tabs li:first a').click();
}); //end ready
</script>
Try to use e.preventDefault():
$('.tabs a').click(function(e) {
e.preventDefault();
Use event.preventDefault(); You can restrict the default behavior using this function and code accordingly to your requirement.
$( ".tabs a" ).click(function( event ) {
event.preventDefault();
});

Categories