I'm using jQueryUI to display some tabs on a page. The tab that is displayed is not always the same, so sometimes I set a different tab as active.
<script>
$(function() {
$("#tabs").tabs({'active': 1});
});
</script>
I generate this code on the back-end, so it's there when the browser loads the page, but, no matter what, the first tab is displayed for a fraction of a second and only then the active tab is displayed.
How can I make the activate tab be displayed from the start?
Just change your code to:
<script>
$(function() {
$("#tabs").tabs({selected: index});
});
</script>
where index is tab number starting from 0
Related
This is driving me a little crazy as I just can't get it to work :(!
I have jQuery tabs set-up as follows (all working) :
$(".tabs_area" ).tabs({
fx: { duration: 'slow', opacity: 'toggle' }
});
I then have a scroll to anchor focus mechanism (again works fine in terms of the function itself) :
$('.tabs_area li a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 500,'easeInOutExpo');
event.preventDefault();
});
My problem is that sadly they won't work simultaneously. When I click the tab, it correctly displays the corresponding tab content BUT it doesn't scroll you to the start of this content. You have to click the tab again for it to then do the scroll to the content, which isn't good.
Sadly the reason I need is that I am using this on a mobile website, and when you click the tab, although it does actually change the content, it is bellow the tabs menu, and therefore below the visible area of the screen, hence why I want it to swap the content then scroll you down to this so you can see it, and of course with one click only.
So I think I need to combine the scroll functionality within the tabs set-up code... somehow... as a callback or something... but I just keep breaking it :(!!
Any help would be so much appreciated.
Thanks in advance,
TJ
Why don't you use the show option for jQuery Tabs?
Seems to do what you wish to do.
Check the solution
$(".tabs_area" ).tabs({
show: function(e,ui){
$('html, body').stop().animate({
scrollTop: $(ui.tab.getAttribute('href')).offset().top
}, 500,'easeInOutExpo');
}
});
I have a page where I need to show/hide divs based on what button the user clicks. In the page, I have two divs (divBranchList and divGrowerList) and two buttons (btnBranch and btnGrower). I am using the following code to show/hide the divs.
$(document).bind('pageinit', function () {
alert("here");
$("#divBranchList").hide();
//show hide lists
$("#btnGrower").click(function () {
$("#divGrowerList").show();
$("#divBranchList").hide();
});
$("#btnBranch").click(function () {
$("#divBranchList").show();
$("#divGrowerList").hide();
});
});
While this works perfectly when the page loads or if I refresh the page, but fails to work when the user clicks on a listitem and the page comes back from the server after getting some data. The page has both lists visible although if I put a breakpoint at the following line in Firebug's script panel, it does get hit.
$("#divBranchList").hide();
Any ideas why the div is not hiding or how to make it work?
If you're showing and hiding content in a JQueryMobile page, you will probably need to trigger the UpdateLayout event
$("#divBranchList").trigger("updatelayout");
after you've done your showing / hiding...
I am loading the data in jquery tabs using ajax based on the combobox selection it's working fine for first time ,the data are loading properly if i change the combobox selection at that time the first tabs becomes empty if i switch to second tab and came for first tab then the data is loading fine.I don't know why it's not loading while changing the combox selection in first tab.
In the below example i am checking the condition like "Value L" ,if it's "L" then i need to show the three tabs,If the value is not "L" then i need to show the two tabs.
While the two tabs are displaying at that time the first tab data is not loading.
$(function() {
$("#contractType").change(function(){
if($("#contractType").val()=="L") //Combo Selection Values
{
$("#hidetab").show();//Loading tabs
$("#tabs-0").show();
$("#dispEmp").removeClass('ui-tabs-selected ui-state-active');
}//if
else
{
$("#hidetab").hide();
$("#tabs-0").hide();//Hides the first tab
$("#tabs-1").show();/*Displays remaining two tabs below*/
$("#tabs-2").show();
$("#dispEmp").addClass('ui-tabs-selected ui-state-active');
$("#jqgrid").show();//Here i am trying to load the data in second tab using ajax call.
$("#dispEquip").removeClass('ui-tabs-selected ui-state-active');
}
});
});
I got the answer and it's working fine now.
While i am changing the combobox at that time based on the condition i am making the tab as selected.
$( "#yourtabId" ).tabs( "option", "selected", 0 );//this code will select the index of the tab as selected.
0->Index of the tab.
While selecting the tab if we need to return the tab index value then this function will get invoked.
$('#yourtabId').tabs({
select: function(event, ui) {
ui.index // Will return the selected index of the tabs.
}
});
I've implemented jquery tabs and want to call the page they are on in two ways. Firstly with the first tab open and the others hidden which works fine. But secondly I want tab 4 to be visible when landing on the page. So I have simply duplicated the page - Page A opens with the first tab in view. Page B has this code....
<script type="text/javascript">
$(function() {
$("#tabs").tabs();
});
</script>
<script type="text/javascript">
$(function() {
$("#tabs").tabs( 'select' , 3 )
});
</script>
and opens the forth tab. BUT it opens the first tab first then flashes to tab 4.
How can I get the page to open tab 4 initially without opening the first tab first.
Hope you can follow my ramble!!!
Nick
There does not appear to be an obvious solution. One suggestion I have seen is to use jQuery to keep the tabs hidden until they have loaded and then show them after the selection has taken place.
That would be how to open to the 4th tab using their API.
Perhaps you can try hiding the tab div, creating it, and then showing it in the show event when the 4th tab is shown (which will happen after everything is initialized).
I'm using jQuery tabs and I'm having some problems. Let me detail them for you here and then I'll put code below:
PROBLEM 1:
I have a total of 6 tabs (default tab in local div, other 5 loading via Ajax). When the page loads, I need the 3rd tab to be selected by default. Easy. Problem is, say I link to http://example.com/index.html#services the 3rd tab still shows up instead of the services tab.
I've tried to use cookie to set the selected value but it just isn't working right.
PROBLEM 2:
This is major and I can't seem to figure it out. The 3rd tab is the default data and if I click on a tab to the right of that tab and come back everything is golden. BUT... If I click on a tab to the left of the 3rd tab (all tabs left or right of default are loaded via Ajax) and then click back to the 3rd tab the panel goes away completely and it's blank. Then, clicking on a different tab not only leaves the 3rd tab in a selected state (not the content just the tab itself) AND ALSO the selected tab shows in a selected state as well.
I'm pulling my hair out trying to figure out what in the world is going on here. I'll be on the road a bit today, but will check in as it's possible. Hopefully one of you can help me straighten this out.
Okay... here's the code from my jquery
$(document).ready(function() {
//build tabs
$("#tabs").tabs( {
cookie: { expires : 30 },
load: function(ui) {
//initilize accordion
$("#accordion").accordion( { active: 2 } );
},
show: function(event, ui) {
//initialize accordion
$("#accordion").accordion( { active : 2 } );
//cookie select
var cookie = $("#tabs").tabs("option", "cookie");
/*
if(cookie) {
$("#tabs").tabs("select", $.cookie('ui-tabs-1'));
} else {
$("#tabs").tabs("select", 2);
}
*/
},
ajaxOptions: {
dataFilter: function(data, dataType) {
return $(data).find("#content_area");
}
}
} );
});
Here's the code from my tabs:
<div id="tabs">
<ul>
<li>Home</li>
<li>Services</li>
<li>Company</li>
<li>Employee</li>
<li>Work Tools</li>
<li>Contact</li>
</ul>
<div id="content_area">
<p>CONTENT HERE</p>
</div>
<!-- end #content_area -->
I sincerely appreciate your help.
Okay... Figured it out! Went in a completely new direction and actually ended up better as I can use the tabs and the back button with custom address bar changes.
I highly recommend the jQuery Address plugin as I used it to solve my problems. I had to do some tweaking with the accordion in the tabs because the autoHeight wouldn't work, but fixed that by checking the height() of accordion divs and setting changestart.