I used the tab feature in Bootstrap in a different way for a high-fidelity prototype. Using it to go from one section to another but not using the tabs so the first page shows, then you just use an anchor to go from section to section. The problem I have come up with is that I need to go from one page to a specific section "tab" within another. I can't figure out how to do this. I am not great with javascript so any help would be greatly appreciated.
Page 1 - Home.cshtml
<a class="btn btn-primary" href="AlignTeam#stepAlign2" data-target="#stepAlign2">Next</a>
Page 2 - AlignTeam.cshtml
<div class="page-body myWizard">
<div class="tab-content">
<!-- STEP ONE -->
<div class="tab-pane fade in active" id="stepAlign1">
Content
</div>
<!-- STEP TWO -->
<div class="tab-pane fade" id="stepAlign2">
Content
</div>
<!-- STEP THREE -->
<div class="tab-pane fade" id="stepAlign3">
Content
</div>
</div>
You might be forgot to include .html (file extension) on AlignTeam
which is href="AlignTeam#stepAlign2". It has to be href="AlignTeam.html#stepAlign2".
You need a bit of knowledge on Javascript & JQuery to be able to achieve that.
I have provided you the solution on Plunker. You could learn more from it because you can preview it's result as well.
Let me know later if you find this helpful. Cheers !
Related
New to this forum so please be gentle! I have been having issues with jQuery Accordions which are inside a set of tabs. The tabs work fine and so does the Accordion, but... what I really would like is to be able to use a link from within part of the Accordion to go to another part of the Accordion. The Accordion will be used as an instruction manual so therefore in certain sections there will be a bit that basically says to the user to "see this section".
I have checked on here at certain answers such as: jquery ui accordions within tabs and http://jsfiddle.net/9nKZp/1/show/#1| and have checked all over the internet searching for Accordions with anchors as well as Nested Accordions in tabs but I have YET to come across this being done!! Can't really believe that no one has done this!
Here is the code I have so far:
<!-- tabs -->
<link rel="stylesheet" href="/resources/css/tabs.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="/resources/js/tabs.js"></script>
<!-- ENDS tabs -->
<!-- accordion -->
<link rel="stylesheet" href="/resources/css/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!-- ENDS accordion -->
<script>
$(function () {
$(".accordion").accordion({
collapsible: true,
heightStyle: "content",
active: false,
});
});
</script>
<!-- TABS START -->
<div class="tabs_wrapper">
<!-- 1st new tab design START -->
<div id="new_tabs">
<ul>
<li class="active">Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
</ul>
</div>
<div id="new_tabs_content">
<div id="tab1" class="tab_content" style="display: block;">
<p>
Data on first tab
</p>
</div>
<div id="tab2" class="tab_content">
<h1>Tab2</h1>
<div class="accordion">
<h3><a id="#1">1</a></h3>
<div>
Content of 1
<div class="accordion">
<h3><a id="#1.1">1.1</a></h3>
<div>
Content of 1.1
<div class="accordion">
<h3><a id="#1.1.1">1.1.1</a></h3>
<div>
Content of 1.1.1, please see 2.1.2
</div>
<h3><a id="#1.1.2">1.1.2</a></h3>
<div>
Content of 1.1.2
</div>
<h3><a id="#1.1.3">1.1.3</a></h3>
<div>
Content of 1.1.3
</div>
</div>
</div>
</div>
</div>
<h3><a id="#2">2</a></h3>
<div>
Content of 2
<div class="accordion">
<h3><a id="#2.1.1">2.1.1</a></h3>
<div>
Content of 2.1.1
</div>
<h3><a id="#2.1.2">2.1.2</a></h3>
<div>
Content of 2.1.2
</div>
<h3><a id="#2.1.3">2.1.3</a></h3>
<div>
Content of 2.1.3
</div>
</div>
</div>
</div>
</div>
<div id="tab3" class="tab_content">
<h1>Tab3</h1>
<p>another load of data</p>
</div>
</div>
<!-- 1st new tab design END -->
</div>
<!-- TABS END -->
Please let me know if you require any further code that I am using such as the tabs.js etc.
Please help me! Is this at all possible?!
Many thanks and big hugs if you can help!!:-)
Here is the idea of how to get this one to work.
In the example http://jsfiddle.net/9nKZp/1/show/#1|1 it seems like the tabs linking works, but it only works when you load the page in a new tab, not from link.
You need your own jsfiddle (you already have one v.1), where you should place some example content WITH links from one tab/question to another pair tab/question (or there may have links to the same tab, but another question)! You also should implement the code from the semi-working example to your code.
Then the logic is as follows (examples using jQuery):
(1) Create on click event for each link you place inside the tabs, something like that:
$('#all_tabs_container a').click( function(){
checkInternalLinks();
});
In the function checkInternalLinks()...:
(2) You should check if the link is internal (#...) and if it is in a know format (like: #x|x or #x|x|x or both)
(3) When you validate this link you'll need to make the specific functionality to switch tabs and accordeons.
(4) The needed functionality already exists(!), but on page load, so you'll need to take some time on it and realize what is hapenning, so you can copy the same code to the onclick event function.
If you like the idea, you can start! Even if you can't complete it, I'm sure someone else will help :-)
so I am making a page with three nav tabs on the left and a map on the right. I have my code here for the nav tabs. On the first tab I want a field where the user can enter some info and the map will adjust accordingly. It works fine once the page loads, but if I visit another tab and come back then the input field will be gone. Any ideas?
<div class="tabbable" class='span4'> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li id='tab1' class="active">Browse</li>
<li>History</li>
<li>Wishlist</li>
</ul>
<div class="tab-content">
<!-- Browse tab -->
<div class="tab-pane active" id="tab1">
<form class="form-search">
<input type="text" class="input-medium search-query" id='location'>
<button type="submit" class="btn">Search</button>
<p><b>Find brewery by name..</b></p>
</form>
</div><!-- end Browse Tab -->
<!-- History tab -->
<div class="tab-pane" id="tab2">
<p>I've been here!</p>
</div><!-- end History tab -->
<!-- Wishlist tab -->
<div class="tab-pane" id="tab3">
<p>We still have to check these places out!</p>
</div><!-- end Wishlist tab -->
</div>
</div>
Since your nav links are a tags using anchors in their href, the page is reloaded on click. A page reload will reset any entered form information.
Is there a way to do it where I do not have to refresh? Should I change the a tags to something else?
Yes like this (looks ugly, works great IMO):
alternatively, with HTML5 you can leave out the href altogether
<a></a>
but...I wouldn't recommend that, probably some backwards compatibility issues.
After re-reading your original question though I don't think this is the root of the problem, hard to tell without a live example though.
I have what should be a very simple modal using Twitter Bootstrap 3. The modal displays no problem, but it doesn't fade in from the top, as it does in this example, http://getbootstrap.com/javascript/#modals. Instead, it just plonks itself on the screen.
Here's the trigger:
<a href='#registerEmail' data-toggle='modal' class='btn btn-primary btn-lg'>Sign up with Email</a>
Here's the modal:
<div class='modal fade' id='registerEmail' tabindex='-1' role='dialog'>
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-header'>
This is the header
</div>
<div class='modal-body'>
This is the body
</div>
<div class='modal-footer'>
This is the footer
</div>
</div>
</div>
</div>
I am pretty sure that it was working before.
I checked out this other answer, Twitter Bootstrap: Modal popup won't fade, where the modal was nested within another .fade class, but that's not the case with my code above.
Also, I'm including the entire bootstrap javascript file (at the bottom of the page) so this can't be the problem. I am loading jQuery too (before the bootstrap js).
EDIT:
This is bizarre. In the process of creating a JS fiddle I went through and eliminated extraneous elements in the page, one at a time. When I commented out a line so that my own site-wide.js would not load in the document head, the problem ceased. I then restored the line that includes site-wide.js, but I can't recreate the problem???
Firstly, thanks for the comments above.
In the end I commented out some unnecessary javascript includes and that solved the problem. Presumably it was a namespacing issue? Interesting to see that it could manifest in such a subtle manner.
Why the tabs are not shown with AngularJS tabbale directive.
http://plnkr.co/edit/yu0Bh0?p=preview
This is optional part of angularJS, which is used everywhere in the docs (here)
The source of the directive is here.
I don't see any special css in the doc site.
EDIT:
the markup of the plunkr (above) was copied from the doc link given above.
But, when tried with the markup on Angular main page (angularjs.org), it works.
Not sure how it works at doc site.
The working markup has data-toggle attributes, and url fragments to tab pane.
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="">index.html</li>
<li class="">project.js</li>
<li class="">list.html</li>
<li class="active">detail.html</li>
<li class="">mongolab.js</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="project-html">
<h1>project</h1>
</div>
<div class="tab-pane" id="project-js">
<h1>project js</h1>
</div>
<div class="tab-pane" id="list-html">
<h1>project html</h1>
</div>
<div class="tab-pane active" id="detail-html">
</div>
<div class="tab-pane" id="mongolab-js">
</div>
</div>
</div>
There has to be some functionality / code written somewhere that makes the tabs work. Currently, what you have there is just the html and css ( which provides the structure and the styling ) and the behaviour part is missing ( the JS part ).
In angular, this behaviour is custom written and is provided the directive. In bootstap, you need to include the js file ( bootstrap.js ? ). Then there are two ways of making this work. Either include the data-* elements as specified in the docs in their appropriate places or on document ready call something like
$(".tabbable").tabs();
in your JS code somewhere. This is the behavioural pieces that is missing from your plunker.
I would like to create a simple javascript slideshow that allows a user to click 'Previous' or 'Next' and have the element slide in from the right or left depending. Content will be coming in from a CMS, so it's not 'hard-coded' persay. My markup would look like this ideally (where the most recent entry receives the 'show' class):
<span class="back">Previous slide</span>
<span class="next">Next Slide</span>
<div id="slideshow">
<div class="client show">
<p>Yada</p>
</div>
<div class="client hide">
<p>Yada</p>
</div>
<div class="client hide">
<p>Yada</p>
</div>
<div class="client hide">
<p>Yada</p>
</div>
</div><!--end slideshow-->
I need something that will automatically detect order and allow the number of .client classes to be anything. This seems very close: http://jsbin.com/ekecu but I don't want it to be based on visible links to switch, just the same absolutely positioned previous and next buttons.
Would really appreciate some help, or if you were feeling especially generous an source snippet I could use.
Shadow Box or Fancybox?