How to select a tab by id in recent versions of jQuery UI? I used to do this:
$(mytabs).tabs("select", "#tab_contents");
And it worked fine, even with some of the tabs hidden. Now I upgraded jQuery UI and the code above does not work anymore. I tried following some other suggestions on this site, and ended up with this:
$(mytabs).tabs("option", "active", $(mytabs).find("li").index("#tab_header"));
Not only it's way more verbose, but it doesn't select the correct tab, since some of them are hidden. How can it be done?
P.S. To hide some tabs, I used $("#tab_header").hide(). Is this still correct in recent versions, or is there a better way?
Found out a solution:
$(mytabs).tabs("option", "active", $("#tab_header").index());
This selects the correct tab, regardless of which ones are visible (it's even possible to select tabs currently invisible - the contents are shown, but the header is not).
<div id="tabs">
<ul>
<li id="ha">A</li>
<li id="hb">B</li>
<li id="hc">C</li>
<li id="hd">D</li>
<li id="he">E</li>
</ul>
<div id="a">AAA</div>
<div id="b">BBB</div>
<div id="c">CCC</div>
<div id="d">DDD</div>
<div id="e">EEE</div>
</div>
.index starts from 0,
$(mytabs).tabs("option", "active", $("#ha").index());
but if you use #a instead of #ha use like this
$(mytabs).tabs("option", "active", $("#a").index()-1);
Related
I am using Dotclear blog software, which provide a widget for the blog categories with a resulting code looking like this:
<div class="widget categories ">
<h3>Catégories</h3>
<ul>
<li>Cat1</li>
<li>Cat2
<ul>
<li>Subcat1</li>
</ul>
</li>
<li>Cat3
<ul>
<li>Subcat2</li>
</ul>
</li>
<li>Cat4</li>
</ul>
</div>
What I am trying to achieve here is using the <a> tag (for Cat2 or Cat3) as header (or a dynamically added <h4> around it) and fold the subcategory list. If I call the accordion like this :
$(".categories").accordion({
header: "li:has(ul) > a",
});
the accordion does work, but when I click on the link it just folds/unfolds the item and doesn’t let me go to the link target (the category page, that is).
I tried wrapping the <a> in an <h4> tag and use that tag as header, but it doesn’t seem to make a difference. Is there a way to do what I seek or should I abandon the idea of collapsing subcategories and have functioning links within the header ?
Thanks for your time.
Well, after reading your comments, I realized I was using the wrong tool to achieve my objective. I have replaced jquery-ui’s accordion with a treemenu jQuery plugin which is actually made for my use. Sorry to have wasted your time and thanks for your kind answers.
I am currently building a small website using ruby on rails and foundation as the css framework. I implemented a top bar for navigation with 2 items being nested drop downs.
Here is the code of the top-bar that is inside my layout/application.html.erb:
<body>
<div class="top-bar">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">Logo</li>
<li>Home</li>
<li>Statistics</li>
<li>News</li>
<li>Items
<ul class="menu">
<li>Infected items</li>
<li>Detective items</li>
</ul>
</li>
<li>Guides
<ul class="menu">
<li>Lore</li>
<li>Beginner tutorial</li>
<li>Mod rules</li>
<li>Strategy guide</li>
<li>How to be a good detective?</li>
</ul>
</li>
</ul>
</div>
</div>
As shown in the following picture:
The code behaves as intended until I open the statistics page right next to home, as shown in this one:
If I enter the stats page manually, I get no problems until I switch back to home. This happens anytime I click a link of the top bar that is not the same page that I currently am at.
I currently have no custom javascript or jQuery listeners implemented at all and I'm using a fresh foundation installation using foundation-rails.
Why is this happening and how can I solve it? Is it related to rails?
Thank you
This was due to a conflict between foundation and turbolinks.
For anyone running into this kind of apparently random issues, I solved this by following the approach suggested here:
http://foundation.zurb.com/forum/posts/2348-foundation-5-topbar-menu-not-responding-on-rails4
I'm using the jquery Mobile AutoDivider for a web project of mine and it works great in IE8, but for some reason in Chrome it's not generating the headers for me.
My question is: How exactly does the AutoDivider determine what to make a 'divider'? Is is just the first item within your <li></li>?
Here's my basic HTML structure (it's ultimately placed in a ASP.Net Repeater:
<ul data-role="listview" data-autodividers="true">
<li>
<img src="mySource.jpg" alt="" />
<h3>John Doe</h3>
<p><strong>Company Name Here</strong></p>
<p>User Address</p>
<p class="ui-li-aside">
<strong style="display: none;"><!-- This is what seems to make the headers in IE, placing this right here: -->
Last Name of Employee</strong>
</p>
</li>
</ul>
see the docu http://jquerymobile.com/demos/1.2.0/docs/lists/docs-lists.html
Autodividers
A listview can be configured to automatically generate dividers for its items. This is
done by adding a data-autodividers="true" attribute to any listview.
By default, the text used to create dividers is the uppercased first letter of the
item's text. Alternatively you can specify divider text by setting the > autodividersSelector option on the listview programmatically.
I want to use jQuery UI 1.9 Tabs like this way:
HTML：
<!-- this is the tab's context -->
<div id="tabs">
<ul id="tabs-ul">
<li id="tabs-email"><a href="#Email" title="Email">Email</li>
<li id="tabs-setting"><a href="#Settings" title="Settings">Setting</li>
</ul>
</div>
<!-- this is the other context -->
<div id="Email">someting</div>
<div id="Settings">someting</div>
JS：
$("#tabs").tabs({});
When I do like blow and click one tab,there will be :
Uncaught Error: jQuery UI Tabs: Mismatching fragment identifier.
What I want is the tab("li#tabs-email"/"li#tabs-setting") can automatic refers to the other div context's panel("div#Email"/"div#Settings").But I can't find the way to change panel context.What am I missing?
I don't think this is possible without significant work. Mainly because the whole "globalPanels" thing is semantically wrong, and is why it's been removed.
The way it works now means that all tab content is implicitly related to the tabs.
Trying to add scrollbars to a listview within a dialog in JQueryMobile with no joy.
I'm using the following code:
<div class="content-primary">
<ul id="lvPages" data-role="listview" data-filter="true" data-inset="true" data-scroll="true"></ul>
</div>
Which works perfect on desktop browsers yet when I test this on an iPad the scrollbars don't appear.
Is there something obvious I'm missing?
Sorry, should actually add:
I'm adding the items via Javascript and am calling a " $("#lvPages").listview('refresh');" upon the end of these additions.
According to this forum article, you have to include the jquery.mobile.scrollview.js script (and its associated CSS file) for the data-scroll attribute to be recognized and acted upon.