I love jQuery UI and use its "Tabs" on my sites for visual sliders as standart, but UI doesnt have an event for deselect.
What i mean:
I have an animation on tab .show(), but i want to have the deselect (but there is no deselect event on jQuery UI Tabs events) event animation on tab when it autorotates or by selecting another tab - current tab must do deselect animation and then show (with animation) selected tab.
Maybe somebody knows about this problem?
Thanks before!
This logic can occur in the event for selecting. My example here is going to assume that you're linking the tab to the div by id, and that you've got a class called "selected" on the currently active tab. Change as necessary for your code.
$(".tabs li").click(function() {
active_id = $(".tabs li.selected").attr(id);
$this = $(this);
$("div.tab-content#"+active_id).fadeOut("slow", function() {
$this.addClass("selected");
$("div.tab-content#"+$this.attr("id")).fadeIn("slow");
});
});
Have you tried using the fx option?
In particular $("#tabs").tabs("option", "fx", {opacity:'toggle'} ) or when you initialize it $("#tabs").tabs({ fx: {opacity:'toggle'} })
Related
I'm working on updating the code for an ecommerce site, the mobile menu uses the jQuery plugin jPanelMenu and the code is as follows:
var jPM = $.jPanelMenu({
menu: '#mainMenu',
trigger: '.mobileMenuLink',
duration: 300
});
jPM.on();
$('.styloSearch').clone().prependTo($('#jPanelMenu-menu'));
$('#jPanelMenu-menu').removeClass("sf-menu sf-js-enabled sf-arrows");
$('#jPanelMenu-menu li.menu-parent-item a').click(function(e){
$(this).siblings("ul").toggle();
e.preventDefault();
});
The submenu comes up when you click on a menu item, and it can be closed only by clicking on the menu item again, but I want to be able to click anywhere outside to close the submenu.
Any idea how to achieve this?
Thanks a lot!
use the $('*') selector which selects all elements
you need to keep the original function too, and add this:
$('*').click(function(e){
$(this).siblings("ul").hide();
e.preventDefault();
});
I use iscroll 5 and jquery mobile 1.4.5 for cordoba android app. When I am scrolling page the i have tapped at first on start change state as it is clicked. I dont need it to be clicked if I am scrolling. I need it to change state to active only if I have tapped on it without scrolling.
How can I prevent li button item to change state, I have tried some code I found on stackoverflow but with no success.
$(document).on('tap', function(e) {
$('#lista li').removeClass($.mobile.activeBtnClass);
});
I tried this too, but is deprecated
$( document ).on( "mobileinit", function() {
$.mobile.activeBtnClass = 'unused';
});
How can I activate a particular tab programmatically? I tried the following code after reading online jQuery docs:
$("#MyTabsDiv").tabs( "option", "active", 1 );
This does bring up the specified tab contents, but it doesn't highlight the selected tab's header, which is what happens when I manually click on the tab header. I have tried the "refresh" option too, without any success. I am using Bootstrap 3's TAB css on top of jQuery's tabs()
You can hack a user manually clicking the tab by firing a .click() event on the desired tab.
You can also see bootstrap's own jQuery plugin to manage your tabs .
Since Bootstrap's CSS for tabs uses a class of active, add class when tab is activated - Demo
$( "#MyTabsDiv" ).tabs({
activate: function( event, ui ) {
$(ui.newTab).addClass('active')
$(ui.oldTab).removeClass('active')
}
});
or attach to event using on() - Demo
$("#MyTabsDiv").on( "tabsactivate", function( event, ui ) {
$(ui.newTab).addClass('active')
$(ui.oldTab).removeClass('active')
});
Try this in the CSS:
#tabs .ui-tabs-active {
background: yellow;
}
::source::
I
I have below html line.
d
replaced with below line:
d
Inside CallFunc() , i need to write jquery which will give me same function as href="#tab-3"
(so, switch to that tab)
Please share me how it is achieve in jquery ?
When we click at href="#tab-3 then it page just switch to that particular DIV, due to some UI design, i needed to remove this line from UI though need to maintain that feature using JQUERY, so, what is equivalent jquery ?
You can use in your CallFunc() this:
$("#tabs").tabs({active: 2}); //it will make your 3rd tab active
And if you want to set it after the plugin's initialization do this:
$( "#tabs" ).tabs( "option", "active", 2 ); //just select the right tab as the third parameter
More Info: Tabs Widget Doc options:active
Also you can leave the tabs, and fire CallFunc() in the activate event.
activate( event, ui )Type: tabsactivate
Triggered after a tab has been activated (after animation completes).
If the tabs were previously collapsed, ui.oldTab and ui.oldPanel will
be empty jQuery objects. If the tabs are collapsing, ui.newTab and
ui.newPanel will be empty jQuery objects.
Tabs Widget Docs
I'm using an exposed filter in Drupal7 to filter items using ajax.
I have a menu with checkboxes to decide what is being filtered that is hidden until you hover over the menu category. This is all working fine until you select a checkbox.
The page filters correctly, but when the new content loads, the mouseover menu is loosing focus. I'm trying to keep the menu open when the new content is loading in, not sure what's wrong with my js.
$('.views-exposed-widget').live({
mouseover:
function()
{
$(this)
.children('.views-widget')
.addClass('show');
},
mouseout:
function()
{
$(this)
.children('.views-widget')
.removeClass('show');
}
});
** Edit: Removed .end(); Still loosing focus when content is loaded.