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::
Related
I'm using the bootstrap accordion and want to change the accordion-heading background on click, and it works fine when you have to click to close a accordion-group, but when the accordion-group close automatically when you click another it fails. I'm checking for the "in" class that change automatically.
$( ".accordion-group div" ).click(function() {
if ($(".accordion-group div").hasClass( "in" )) {
$(this).css("width","110%");
} else {
$(this).css("width","80%")
}
});
https://jsfiddle.net/bg250Lhe/
This is somewhat ugly, but it works. You can probably find out what gets passed to the methods and simplify selectors with that.
$('#accordion2').on('hidden.bs.collapse shown.bs.collapse', function () {
$(this).find('.accordion-heading a').removeClass('bigger');
$(this).find('.accordion-body.in').prev('.accordion-heading')
.find('a').addClass('bigger');
});
Demo
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';
});
i'm working on a single-page-application. I need the pagecontainerbeforechange event from jQuery-Mobile because i want to check if my site-wrapper has the class "show-nav". When the site-wrapper has this class, the site-menu is opened up and the content moves 350px to the left. So if the user now clicks on register, and before he has the site-menu opened up, my register page is moved away and there is no possiblity to get it back because there is no site-menu on the registerpage.
First i tried to use the pagecontainerload event till i saw that it is deprecated. Then i changed it to the pagecontainerloadbeforechange event but i cant get it work.
The page i want to check for the class ".show-nav" has the id #registration
So, the user is on the main site, he clicks on "register" and before the page changes the class ".show-nav" should be removed. The function for removing the class is already set up, but i don't know how to call it the right way.
function toggleNav() {
if ($('.site-wrapper').hasClass('show-nav')) {
// Do things on Nav Close
$('.site-wrapper').removeClass('show-nav');
}
More detailed Description ->
While i wrote this detailed Description i got the solution and it is so simple that it is embarrassing for me: Removed the site-wrapper from the site #registration...thats all.
Thanks for your help and thanks for you edit omar!
You can add toggleClass to .site-wrapper. If it has the class .show-nav it will remove it, otherwise it will add the class :)
$('.site-wrapper').toggleClass('show-nav');
pagecontainerbeforechange is part of Pagecontainer Widget.
At this moment (jqm 1.4.x) this widget is designed as a singlton, binded to body element. So if you want to detect page change you should use the code above:
$( "body" ).on( "pagecontainerbeforechange", function( event, ui ) {
console.log(event);
console.log(ui);
} );
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 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'} })