Based on Bootstrap 3..... all I want is, the tab switch to 2nd tab after some time interval and stays.
I need jquery/javascript code fix this issue... kindly help me as I'm a newbie, many thanks...!!!
Here is the code of tab section:
<!-- Nav Tabs -->
<ul id="tabsnav" class="nav nav-tabs">
<li class="active">Daily</li>
<li>Weekly</li>
</ul>
<!-- Tab Panels -->
<div style="min-height:400px;" class="tab-content">
<!-- Tab Content 1 -->
<div class="tab-pane fade in active" id="tab-4">
<p>Report Goes Here</p>
</div>
<!-- Tab Content 2 -->
<div class="tab-pane fade" id="tab-5">
<p>2 Report Goes Here</p>
</div>
</div>
<!-- End Tab Panels -->
</div>
</div>
<!-- End Page Content -->
Related
I have a jQuery Mobile page (Fiddle here) which loads an external footer like so:
<!-- Start of universal footer -->
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<div data-role="navbar">
<ul>
<li>One</li>
<li>Two</li>
</ul>
</div>
</div>
<!-- /End of universal footer -->
<!-- Start of first page -->
<div data-role="page" id="tabOne">
<div data-role="header">Page 1</div>
<div role="main" class="ui-content">Content</div>
</div>
<!-- /End of first page -->
<!-- Start of second page -->
<div data-role="page" id="tabTwo">
<div data-role="header">Page 2</div>
<div role="main" class="ui-content">Content</div>
</div>
<!-- /End of second page -->
With some js:
$(function() {
$("[data-role='navbar']").navbar();
$("[data-role='footer']").toolbar({theme: "a"});
});
This is all working perfectly, but I'd like to have another page (a login page which displays first) which doesn't show the footer (or shows an alternate one) but I can't seem to make that happen. Any ideas?
My Bootstrap Tabs are working fine but the URL is built wrong like below. I checked many Sites and mine is definitly wrong.
If I am at http://domain.com/blog it shows me:
http://domain.com/#vote
instead of
http://domain.com/blog/#vote
If the Javascript has loading problems it should still go to the Anchor and not to the URL.
My HTML
<div class="nav nav-tabs" role="tablist">
<a href="#vote" aria-controls="vote" role="tab" data-toggle="tab">
{lang key="Votes" section="global"}
</a>
</div>
<div role="tabpanel" class="tab-pane" id="vote">
Votes
</div>
Javascript
// Tabs
$('.nav-tabs a').on('click', function (e) {
e.preventDefault();
$(this).tab('show');
});
If this is all your HTML markup, then you are using an incorrect HTML structure. according to the documentation for javascript bootstrap tabs.
I have tested the following on my own localhost, and your example as well. With the official version there is no issue, while what you have copied above had a broken styling and it did not properly work.
Example
<!-- start container for tabs, required -->
<div role="tabpanel">
<!-- Nav tabs menu, required -->
<ul class="nav nav-tabs" role="tablist">
<!-- repeat the row below for extra menu items, 3x used in example -->
<li role="presentation" class="active">Tab1 title</li>
<li role="presentation">Tab 2 title</li>
<li role="presentation">Tab 3 title</li>
<!-- close tabs menu -->
</ul>
<!-- start tab content panes container. do not forget this, required -->
<div class="tab-content">
<!-- repeating content pane. make sure that the id="xxxx" matches the href from the menu item -->
<div role="tabpanel" class="tab-pane active" id="tab1">tab 1 content</div>
<div role="tabpanel" class="tab-pane" id="tab2">tab 2 content</div>
<div role="tabpanel" class="tab-pane" id="tab3">tab 3 content</div>
<!-- close tab content panes -->
</div>
<!-- close container for tabs -->
</div>
I want bootstrap to show several elements inside tab header button, currently it breaks into multiple buttons...
Consider example jsFiddle:
<ul class="nav nav-tabs">
<li class="allmembers">
The first
tab
</li>
<li class="additional">
The second
tab
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="allmembers">
Content
<p> next</p>
</div>
<div class="tab-pane" id="additional">
Content 2
</div>
</div>
In example above it would show four tabs instead of two, but I need bootstrap to be able to render complex html, something like:
<ul class="nav nav-tabs">
<li class="all members">
<div>
Any type of content displayed inline here
The first
tab
</div>
</li>
<li class="additional">
<div>
Any type of content displayed inline here
The second
tab
</div>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="allmembers">
Content
<p> next</p>
</div>
<div class="tab-pane" id="additional">
Content 2
</div>
</div>
How can
You can use all inline elements inside a tab header, you just need to wrap them inside an anchor, like this:
<a href="#additional" data-toggle="tab">
The second <br/>
Any type of content displayed inline here <br/>
<span>Span</span>
</a>
The reason is that bootstrap style for panel header is placed on anchor, if you need more complex structures you might need to change bootstrap and place the styles on li instead.
your demo: http://jsfiddle.net/zd1368yu/3/
I am using bootstrap and I have a page that is causing me trouble when I use the Tab plugin. The tab body is getting pushed down about 400px below the actual tabs. It is only happening on this one page, most of the other pages are very similar and use the same tab plugin but they are not causing as much problems.
Tab Code:
<ul class="nav nav-tabs">
<li class="active">Entire Asset</li>
<li>Entire Site</li>
<li>Single Service</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="entireAsset">
<p>Hello tab 1</p>
</div><!--End Entire Asset tab-->
<div class="tab-pane" id="entireSite">
<p>Hello tab 2</p>
</div>
<div class="tab-pane" id="singleService">
<p>Hello tab 3</p>
</div>
</div>
jsFiddle: http://jsfiddle.net/f2TG8/
My css and all resources are in the JSFiddle.
There is a problem with the class .nav who has :after and :before styles that creates such white space. You can add this to your css:
.nav {
overflow:hidden;
}
View the demo http://jsfiddle.net/f2TG8/2/
I'm trying to pop up a very simple "are you sure?" popup in jQuery Mobile. But if I use the data-rel="popup" on the button, nothing happens. If I remove the data-rel it opens - but as a full window. The logic works well, but still, I'd like to see a popup.
Here's the code (simplified - I removed the other pages, the header, html etc. - the app works well other than this issue, so no need to debug those). The 2 elements to look at are the button "clearHistory" and the popup itself "history":
<!-- history page -->
<div data-role="page" id="history">
<div data-role="header" data-position="fixed">
Back
<h1>History</h1>
Delete
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" id="historyList" data-inset="true" data-theme="f"></ul>
<h4 id="historyEmpty">History is empty</h4>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<h4><a class="ttg" href="http://www.TravelingTechGuy.com" rel="external" target="_blank">Traveling Tech Guy</a></h4>
</div><!-- /footer -->
</div>
<!-- end history page -->
<!-- delete history popup -->
<div data-role="popup" id="deletePopup" data-overlay-theme="a" data-theme="c" data-dismissible="false">
<div data-role="header" data-theme="a">
<h1>Delete History?</h1>
</div>
<div data-role="content" data-theme="d">
<h3>Delete all items in history?</h3>
Cancel
Delete
</div>
</div>
<!-- delete history popup -->
Any idea what am I missing here?
Place popup inside <div data-role=page> and that div should be the direct parent of popup div. I placed before <div data-role=content> in the below demo.
Demo
Dialog should be placed outside <div data-role=page> because they are treated as a page.