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.
Related
I would like to animate jQuery Mobile tab content. I have 2 tabs. You start on the left tab, with its content showing. When you click on the right tab, the right tab's content slides in from the right. I have this part working. I am using this script for my animation:
$(document).on("tabsbeforeactivate", "#tabs", function (e, ui) {
$(ui.newPanel).addClass("in slide").one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
$(this).removeClass("in slide");
});
});
See JSFiddle here:
http://jsfiddle.net/69om1nsc/4/
And credit to Omar on this stackoverflow answer:
Data-transition effects does not work with tab navigation jquery mobile
Here's what I need help with: when you click on the left tab, I would like the left tab's content to slide in from the left. Currently, it is sliding in from the right. I'm not very experienced with Javascript, and I could not find anything on jQuery Mobile's site to help me.
Can anyone help me alter the script so that when the left tab is clicked on, its content comes in from the left?
Thank you!
Check the .index() of both newPanel and oldPanel, if the .index() of newPanel is greater than oldPanel's index, add class reverse.
$(document).on("tabsbeforeactivate", "#tabs", function (e, ui) {
var reverse = ui.newPanel.index() < ui.oldPanel.index() ? " reverse" : "",
classes = "in slide" + reverse;
$(ui.newPanel).addClass(classes).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
$(this).removeClass(classes);
});
});
Demo
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'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
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'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).