We Keep Coding

How do I get bootstrap tabs-left to work in bootstrap 3.3.x

I noticed that nav-tabs left doesn't work in Bootstrap 3.3.0,3.3.2 and was wandering if anyone knew how to re-enable the style. Tabs should run up and down, with content chosen on the right.
Working bootstrap2.3.2 BIN:
http://jsbin.com/vimekuloqo/4/edit
Here's the not working 3.3.0 link:
http://jsbin.com/wituxucuja/1/edit
Relevant code (directly from http://getbootstrap.com/2.3.2/components.html#navs)
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li class="">Section 2</li>
<li class="">Section 3</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="lA">
<p>I'm in Section A.</p>
</div>
<div class="tab-pane" id="lB">
<p>Howdy, I'm in Section B.</p>
</div>
<div class="tab-pane" id="lC">
<p>What up girl, this is Section C.</p>
</div>
</div>
</div>
...
<script language=javascript>
$('#myTab a').click(function (e) {
if($(this).parent('li').hasClass('active')){
$( $(this).attr('href') ).hide();
}
else {
e.preventDefault();
$(this).tab('show');
}
});
</script>

This article provides a full answer with code and demo down the page a ways: http://tutsme-webdesign.info/bootstrap-3-toggable-tabs-and-pills/
The simple answer is you need to add .nav-stacked to the <ul> and then use the normal row/column system to lay it out. BS3 doesn't natively support floating the tabs around on its own like BS2 did.
http://jsbin.com/kobegaguwa/1/edit
Note that for jsbin preview you need to use xs columns or it will stack everything in 1 column responsively.
The default styling doesn't work very well for tabs, but works ok for pills.

jQuery Accordion display specific tab

I'm rusty at javascript and HTML, and trying to get back into it.
Here's the sample code of the element I'd like to modify:
<div id="tabContainer" class="table">
<h1>Container</h1>
<ul class="tabs">
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="tab_display">
<div id="tab1" class="tab_content"></div>
<div id="tab2" class="tab_content"></div>
<div id="tab3" class="tab_content"></div>
</div>
</div>
I'm using a version of jQuery Accordion to switch between tabs,and it works without any trouble. Clicking on tab 2, while tab 1 is selected, will clear 'tab_display' and display the contents of tab 2.
I would like to control what tab is displayed, by clicking for a button for example.
If tab 1 is being displayed and I click another button on the page, I'd like for a specific tab to be displayed (show the selection on the 'tabs' list, and also show the contents in the 'tab_dsiplay').
How can I do this?
Thanks!

Try using the solution here open-jquery-accordion-panel-with-link-outside-of-acccordion
Demo here.

Loading Jquery tab from maphilight href

I have seen many threads about this online but none seem to provide a workable solution. I am simply trying to toggle different tabs in a Jquery UI tabs widget with an external href
The closest I feel I have got with this problem was with this solution, pasted below, which does not seem to work:
<script>
$(document).ready(function(){
$('#tabs2').tabs();
$('.open-tab').click(function(event) {
var tab = $(this).attr('href');
$('#tabs2').tabs('select', tab);
});
});
</script>
<div id="tabs2">
<ul>
<li>Tab header 1</li>
<li>Tab header 2</li>
<li>Tab header 3</li>
<li>Tab header 4</li>
<li>Tab header 5</li>
</ul>
<div id="tabs2-1">
Tab Content 1
</div>
<div id="tabs2-2">
Tab Content 2
</div>
<div id="tabs2-3">
Tab content 3
</div>
</div>
The reason I want to load the tabs with external hrefs is because I will be loading the tab from a david lynch maphilight utility. An example of such a link is as follows:
<area class="EU" shape="poly" title="France" href="#tabs2-1" coords="353,108,345,107,345,104,347,100,345,96,342,94,339,92,339,91,345,91,345,89,348,90,351,88,353,85,359,88,366,91,366,92,362,97,363,99,362,99,365,103,362,106,358,105,354,106,353,108">
As you can see from above the href gives you the ID of the link, so I don't want an indexed solution... Any help would be greatly appreciated as I am slowly but surely starting to lose my sanity and I think I have already broken the enter key :-) Thanks in advance!
Jsfiddle: http://jsfiddle.net/Guill84/spyt9/

I manipulate your fiddle, it's working greate.
updated fiddle
I've just use return false :
$(document).ready(function(){
$('#tabs2').tabs();
$('.open-tab').click(function(event) {
var tab = $(this).attr('href');
$('#tabs2').tabs('select', tab);
return false;
});
});
Edit:
your html code is wrong, you should use the selector in your jQuery for you link, it's working know by this :
TEST 1
try it : http://jsfiddle.net/spyt9/4/

Animate window with jQuery

Hi I am trying to create a one page website that contains multiple div's about the same size as the window.The website will have a menu that will refer to each div on the page.What I want to do is animate the window when the user clicks on one of the menu links to it's coresponding div.
http://www.nistoralexandru.comule.com/div.jpg
When a user clicks on a link I need the window to animate to that div similar to this site:
http://shahkaarshah.com/
How can I do this?

The site you're linking to is built with Flash, replicating the animation of different page elements with javascript should'nt be to hard, but there's really no quick "one size fits all" function to do it.
Here's a quick example of how it's usually done :
Build some sort of HTML structure:
​<div id="site">
<div id="main" class="page">
<ul>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<li>Page 5</li>
</ul>
</div>
<div id="page1" class="page">Back</div>
<div id="page2" class="page">Back</div>
<div id="page3" class="page">Back</div>
<div id="page4" class="page">Back</div>
<div id="page5" class="page">Back</div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
And animate it around the viewport with a little javascript:
$('.page a').on('click', function(e) {
e.preventDefault();
var href = $(this).attr('href'),
top = $(href).css('top'),
left = $(href).css('left');
$("#site").animate({top: '-'+top, left: '-'+left}, 1000);
});
Here's a FIDDLE

You might be meaning something like accordion?
http://jqueryui.com/demos/accordion/
There are many easy-to-use accordion plugins for jquery, so they might be easier to use for complex animations than coding from scratch.
Based on your added information, maybe a grid accordion such as this?
http://css-tricks.com/examples/InfoGrid/

Jquery ui tab issue

I am using jquery UI tabs and want to know that , is it possible to point a div's id which is not present in
the main tab div container, means
<div id="tabs">
<ul>
<li>tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<div id="tabs-1">
<p>Tab 1</p>
</div>
<div id="tabs-2">
<p>Tab 2</p>
</div>
</div>
<div id="outerdiv">
<p>Tab 3</p>
</div>
I tried this but div#outer contents not opening when i click on tab3. How can i do this?

I believe the default jQuery plugin is looking $(this).find("#outerdiv") (where this=#tabs) which your element is not.
There are ways of getting this to work, but I think the neatest thing to do would be to move #outerdiv into #tabs.
If you insist on keeping the markup the same, you can make use of the load method like so:
$("#tabs").tabs({
load: function (event, ui) {
switch (ui.index) {
case 2:
$("#tabs div").hide();
$("#outerdiv").show();
break;
}
}
});
But I don't know how this will affect the rest of your tab panels. You'll probably have to add them all into this switch function.

You could move the div using .appendTo() before initialising the tabs :
$("#outerdiv").appendTo("#tabs");
Working example here