We Keep Coding

smooth-scrolling on second click with data-toggle

My smooth scroll wont execute correctly. I have several tab menys with content in them and when I click a tab0 I want the smooth scroll to scroll down to the conent area. I have sevral conent areas.But nothing happens on the first click, but on the second click the scoll executes. The data-toggle gets all messed up also. It loses track of the tab with the active class on it. I am using Bootstraps data-toggleto switch between tab content. The tabs and smooth scroll apperantly wont co-exist. I have banged my head bloody on this problem for awhile. What am I doing wrong? This is my code.
JS code
$(document).ready(function(){
$(".tabs a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 1000, function(){
window.location.hash = hash;
});
}
});
});
HTML code: tab links
<div class="tabs">
<ul id="myTabContent" class="nav nav-tabs">
<li class="active">Hem</li>
<li class="">Historia</li>
<li class="">Ridlärare</li>
<!--<li class="">Avbokning och igenridning</li>-->
</ul>
HTML code: tab-content
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="Hem">
<div class="media">
<div class="media-body">
<h1 class="media-heading ruler-bottom">Hem</h1>
<p class="diffrentFont">Text...</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="Historia">
<div class="media">
<img src="images/firstpage.jpg" class="spacing-r imgRadius ResponsiveImgWidth" alt="">
<div class="media-body">
<h1 class="media-heading ruler-bottom">Historia</h1>
<p class="diffrentFont">Text...</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="Ridlärarna">
<div class="media">
<img src="images/Ridlärare/Sample.jpg" class="spacing-r imgRadius customlärare" alt="">
<img src="images/Ridlärare/Sample.jpg" class="spacing-r imgRadius customlärare" alt="">
<div class="media-body">
<h1 class="media-heading ruler-bottom">Ridlärare</h1>
<p class="diffrentFont">Text...</p>
</div>
</div>
</div>

Anchor links for accordion menu on different page not working (Bootstrap)

I have a similar problem to one I posted before. I have a page built in Bootstrap, and I have several links that jump the reader to anchor links that require an accordion menu to open a specific tab. With the help of Stack Overflow I got it to work, but it only works on my computer and not online (my unfinished draft is on verbiadastra.com - I mean the links under "Services").
My other problem is that I can't get it to open a tab that's on a different page rather than the same one (from index.html to contact.html)
Here's the JS Fiddle.
I would really appreciate your help!
Here's the HTML:
<p>Go to Tab1.</p>
<p>Go to Tab2.</p>
<p>Go to Tab3.</p>
<section id="content">
<div class="container">
<div class="row">
<div class="col-xs-12 wow fadeInDown">
<div class="tab-wrap">
<div class="media">
<div class="parrent pull-left">
<ul class="nav nav-tabs nav-stacked">
<li class="active"><i class="fa fa-comments"></i>Tab1</li>
<li class=""><i class="fa fa-pencil-square-o"></i>Tab2</li>
<li class=""><i class="fa fa-check-square-o"></i>Tab3</li>
</ul>
</div>
<div class="parrent media-body">
<div class="tab-content">
<div class="tab-pane fade active in" id="tab1">
<div class="media">
<div class="pull-left">
<img class="img-responsive" src="images/services/tab1-1.png">
<br>
<img class="img-responsive" src="images/services/tab1-2.png">
<br>
<img class="img-responsive" src="images/services/tab1-3.png">
</div>
<div class="media-body">
<a name="Tab1"></a>
<h2>Tab1</h2>
<p>Tab1Tab1Tab1.</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab2">
<div class="media">
<div class="pull-left">
<img class="img-responsive" src="images/services/tab2.jpg">
</div>
<div class="media-body">
<a name="Tab2"></a>
<h2>Tab2</h2> <p>Tab2Tab2Tab2.</p> </div>
</div>
</div>
<div class="tab-pane fade" id="tab3">
<div class="media">
<div class="pull-left">
<img class="img-responsive" src="images/services/tab3.jpg">
</div>
<div class="media-body">
<a name="Tab3"></a>
<h2>Tab3</h2>
<p>Tab3Tab3Tab3 </p>
</div>
</div>
</div>
</div> <!--/.tab-content-->
</div> <!--/.media-body-->
</div> <!--/.media-->
</div><!--/.tab-wrap-->
</div><!--/.col-sm-6-->
</div><!--/.row-->
</div><!--/.container-->
And here's the JavaScript:
var openTab1 = function() {
$('[href="#tab1"]').tab('show');
}
var openTab2 = function() {
$('[href="#tab2"]').tab('show');
}
var openTab3 = function() {
$('[href="#tab3"]').tab('show');
}

Okay, I figured it out - here's my solution in case it helps anyone, and maybe someone can let me know if I should have done it differently:
I deleted the JavaScript code I posted above, and my links no longer call that function on click. Instead, I write a function that is called on page load: It checks if there is any hashtag (#) in the URL, and if there is, I have it compare its value to the ones I'm using to call the different tabs. Then for each tab id, I have it do the function that opens the tab. Then it also jumps down to a div that has the id of the hashtag (instead of the link anchors, which I learned are obsolete in HTML5). Here's the function:
<body class="homepage" onload="TabHash()">
and then:
<script>
var TabHash = function() {
//check if hash tag exists in the URL
if(window.location.hash) {
//set the value as a variable, and remove the #
var hash_value = window.location.hash.replace('#', '');
if (hash_value == "Tab1Name") {
$('[href="#tab1"]').tab('show');
}
if (hash_value == "Tab2Name") {
$('[href="#tab2"]').tab('show');
}
if (hash_value == "Tab3Name") {
$('[href="#tab3"]').tab('show');
}
}
}
</script>
The links look like this:
Go to Tab 1.
Go to Tab 2.
Go to Tab 3.

Masonry js is messing with the Bootstrap tab function

I am using the Bootstrap tab function with Desandro's Masonry, and the problem is that when I load the page, it starts on the first tab for half a second, then jumps to the tab with the Masonry.
I am guessing that I could fix this with some scripting, but I am too new to js/jquery to figure it out.
I tried changing the order of the script code, because it looks to me like the page loads and then the Masonry script happens and forces its tab to the active state. But it still happens no matter what order the code is in.
Specifically what I need is either for someone to point out a mistake I overlooked or give me some pointers on how to make the page stay on the first tab when it loads.
I have included my html and js controls here, but I also made a fiddle with the full code at http://jsfiddle.net/jccarter1990/o15e98ts/3/
Thanks in advance
<ul class="nav nav-pills" role="tablist" id="myTab">
<li role="presentation" class="active">Cover Letter</li>
<li role="presentation">Features</li>
<li role="presentation">Gallery</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="page-one">Cover Letter</div>
<div role="tabpanel" class="tab-pane" id="page-two">Features</div>
<div role="tabpanel" class="tab-pane" id="page-three">
<div class="masonry js-masonry" >
<div class="item"><img class="thumbnail" src="img/paigeJohnLasVegas.jpg"></div>
<div class="item"><img class="thumbnail" src="img/engagementsCloseUp.jpg"></div>
<div class="item"><img class="thumbnail" src="img/jimmyJohns.jpg"></div>
<div class="item"><img class="thumbnail" src="img/paigeNinjaTurtle.jpg"></div>
<div class="item"><img class="thumbnail" src="img/sprayPaintSid.jpg"></div>
</div>
</div>
<script>
var container = document.querySelector('.masonry');
var msnry;
// initialize Masonry after all images have loaded
imagesLoaded( container, function() {
msnry = new Masonry( container );
});
var container = document.querySelector('.masonry');
var msnry = new Masonry( container, {
// options
columnWidth: 200,
itemSelector: '.masonry.item'
});
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
$(function () {
$('#myTab a[href="#page-one"]').tab('show')
$('#myTab a[href="#page-two"]').tab('show')
$('#myTab a[href="#page-three"]').tab('show')
})
</script>

UPDATED ANSWER: Set your first tab and panel as the active tab:
Fiddle
<div class="container navigation"> <span class="nt-name">John Carter</span>
<br> <span class="nt-title">Professional Portfolio</span>
<ul class="nav nav-pills" role="tablist" id="myTab">
<li role="presentation" class="active">Cover Letter
</li>
<li role="presentation">Features
</li>
<li role="presentation">Gallery
</li>
</ul>
</div>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="page-one">
<div class="container">
<h1>Cover Letter</h1>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="page-two">
<div class="container">
<h1>Features</h1>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="page-three">
<div class="container">
<h1>Gallery</h1>
</div>
<div class="masonry js-masonry">
<div class="item">
<img class="thumbnail" src="img/paigeJohnLasVegas.jpg">
</div>
<div class="item">
<img class="thumbnail" src="img/engagementsCloseUp.jpg">
</div>
<div class="item">
<img class="thumbnail" src="img/jimmyJohns.jpg">
</div>
<div class="item">
<img class="thumbnail" src="img/paigeNinjaTurtle.jpg">
</div>
<div class="item">
<img class="thumbnail" src="img/sprayPaintSid.jpg">
</div>
</div>
</div>
</div>
Change your script to just this:
//bootstrap tab function
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
Leave out:
BTW, you don't have to include the bootstrap.js for tabs in your jsfiddle if you check the box to include Bootstrap, it includes the js. If you have other js to include, like masonry.js, add them using external resources instead of pasting them into the script panel This will make it much easier fior people to see the relevant code.

How to return content to two separate tabbable ID's upon one tab click using Twitter Bootstrap's Tabbable Tabs in a Rails 3.2 App

Using Twitter Bootstrap's bootstrap-tab.js, I have:
<ul class="tabnavcenter" id="myTab">
<li class="active">about</li>
<li>education</li>
<li>experience</li>
<li>verified skills</li>
<li> video</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">Content 1</div>
<div class="tab-pane" id="profile">...</div>
<div class="tab-pane" id="messages">...</div>
<div class="tab-pane" id="settings">...</div>
</div>
How can I get it so if I put:
<div class="tab-content">
<div class="tab-pane active" id="home">Content 2</div>
</div>
... two places in the profile (once above and once below a navbar) and with different content in each, it would work? As of now, the content appears, but once its clicked, it disappears. Can there be two "active" li's at the same time?
Edit:
Since I'm using this in a Rails 3.2 App, I currently have the following in bootstrap-tab.js:
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
})
$('#myTab a[href="#home"]').tab('show');
$('#myTab a[href="#tab2"]').tab('show');
$('#myTab a[href="#tab3"]').tab('show');
$('#myTab a[href="#tab4"]').tab('show');
$('#myTab a[href="#tab5"]').tab('show');
$('#myTab a[href="#home2"]').tab('show');
$('#myTab a[href="#tab22"]').tab('show');
and after putting the following in user_body.html.erb:
<script type="text/javascript">
$(function () {
$('#myTab >li>a').on('click', function (e) {
e.preventDefault();
$(this).tab('show');
//
$(this.getAttribute('href') + '2').html($(this).html());
});
});
... I get the second content in the div after refreshing the page, no change when I click on the second tab, and then a change back to the name of the first 'a' when I click back on the first one.
It's a mess.

Here is one solution without extra javascript, and compatible with the plugin API.
The principle is to use 2 .tab-content and take advantage of the data-target selector attribute.
HTML
The first .tab-content contains your normal .tab-pane
<div class="tab-content">
<div class="tab-pane active" id="home">home</div>
<div class="tab-pane home-tab">class home</div>
<div class="tab-pane profile-tab">profile</div>
<div class="tab-pane messages-tab">messages</div>
<div class="tab-pane settings-tab">settings</div>
</div>
and the second .tab-content contains the extra .tab-panes that are optionnal - plus an empty one (#notab_else here)
<div class="tab-content">
<div class="tab-pane active" id="home_else">home_else</div>
<div class="tab-pane home-tab">class home</div>
<div class="tab-pane profile-tab messages-tab settings-tab" id="notab_else"></div>
</div>
Then you have your tabs with one extra attribute, data-target :
<ul class="nav nav-tabs" id="myTab">
<li class="active">Home</li>
<li class="">Class Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
This attribute data-target defines the .tab-pane(s) associated with it. The magic is that you can use #ids or .classes or any valid jQuery selector.
JavaScript
All you need to activate everything is the default code :
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
And you can also use your own actions to trigger the tabs as defined by the API.
You do not need that if you keep the default behavior for tabs.
$('#myTab a:first').tab('show');
EXTRA
You can be free of any javascript if you set data-toggle="tab" to the a elements
There is a fade effect available if you add the fade class to the .tab-pane (and fade in for the .active one)
DEMOS
Here is the demo (jsfiddle) and the demo with extra (jsfiddle)

you can only access one id at a time, this is why it is called an id.
Get the content from the first one and apply it to the second one.
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
$(this.href +'2').html($(this.href).html()
})
<div class="tab-content">
<div class="tab-pane active" id="home">Content 1</div>
</div>
<div class="tab-content2">
<div class="tab-pane active" id="home2">Content 2</div>
</div>

Here is a working solution for your problem (updated):
<ul class="nav nav-tabs" id="myTab">
<li class="active">Home</li>
<li>Profile</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">Tab-1</div>
<div class="tab-pane" id="profile">Tab-2</div>
</div>
<div class="tab-content" id="tab-content2">
<div class="tab-pane active" id="home2">Home Content 2</div>
<div class="tab-pane" id="profile2">Profile Tab-2</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#tab-content2 div").each(function(i, e){
if(!$(e).hasClass('active')) $(e).hide();
});
$('#myTab>li>a').on('click', function (e) {
e.preventDefault();
$(this).tab('show');
$("#tab-content2 div").each(function(i, e) {
$(e).hide();
});
$(this.getAttribute('href') + "2").show();
});
});
</script>

<script type="text/javascript">
$(function () {
$('#myTab >li>a').on('click', function (e) {
e.preventDefault();
$(this).tab('show');
//
$('#extendedView').html($(this).html());
});
});
</script>
<ul class="nav nav-tabs" id="myTab">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">Tab-1</div>
<div class="tab-pane" id="profile">Tab-2</div>
<div class="tab-pane" id="messages">Tab-3</div>
<div class="tab-pane" id="settings">Tab-4</div>
</div>
<div class="tab-content2">
<div class="tab-pane active" id="extendedView">Content 2</div>
OR
<script type="text/javascript">
$(function () {
$('#myTab >li>a').on('click', function (e) {
e.preventDefault();
$(this).tab('show');
//
$(this.getAttribute('href') + '2').html($(this).html());
});
});
</script>
<ul class="nav nav-tabs" id="myTab">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">Tab-1</div>
<div class="tab-pane" id="profile">Tab-2</div>
<div class="tab-pane" id="messages">Tab-3</div>
<div class="tab-pane" id="settings">Tab-4</div>
</div>
<div class="tab-content2">
<div class="tab-pane active" id="home2"></div>
<div class="tab-pane" id="profile2"></div>
<div class="tab-pane" id="messages2"></div>
<div class="tab-pane" id="settings2"></div>
</div>

trying to implement a 'next' button using twitter bootstrap-tabs.js

I'm using Twitter's bootstrap and have implemented basic tabs for some help screens using bootstrap-tabs.js. I was surprised that I couldn't find any documentation on how to create a 'next' button. I'd like to create a separate 'next' button to loop through all tabs(e.g: $('#next_tour'), below). Any ideas on how to implement the javascript for this?
aside/comment: I also noticed that fragment identifiers aren't added to the url with the bootstrap solution - which might be nice to have, too. (for that feature it's making me consider this: http://flowplayer.org/tools/demos/tabs/ajax-history.html instead, but I'm undecided right now.)
<div class="span11 columns">
<div class="row">
<div id="my-tab-content" class="tab-content">
<div class="active tab-pane" id="home">
<p>Raw denim</p>
</div>
<div class="tab-pane" id="sensors">
<p>Food truck.</p>
</div>
<div class="tab-pane" id="encouragment">
<p>Banksy.</p>
</div>
<div class="tab-pane" id="teammates">
<p>biodiesel.</p>
</div>
<div class="tab-pane" id="privacy">
<p>mollit.</p>
</div>
</div>
</div>
</div>
<div class="span1 columns offset11">
<div class="row">
<a id="next_tour" class="button_blue" href="">Next</a>
</div>
</div>

Here's what I came up with, you can alter the only two selectors (a[data-toggle="tab"], ._tabs_navigation) to specify which buttons switch which tabs if you have more than one set:
$(document).ready(function() {
var tabIndex;
var tabs = $('a[data-toggle="tab"]');
tabs.on('shown', function(e) {
tabIndex = $(e.target).closest('li').index();
}).eq(0).trigger('shown');
$('._tabs_navigation').on('click', 'a', function() {
var index = tabIndex + ($(this).index() ? 1 : -1);
if (index >= 0 && index < tabs.length) {
tabs.eq(index).tab('show');
}
return false;
});
})​
Markup for buttons, only the class _tabs_navigation is important:
<div class="btn-toolbar clearfix">
<div class="btn-group pull-left _tabs_navigation" data-toggle="buttons-radio">
<a class="btn btn-small btn-info" href="#">
<i class="icon-arrow-left icon-white"></i>
</a>
<a class="btn btn-small btn-info" href="#">
<i class="icon-arrow-right icon-white"></i>
</a>
</div>
</div>
Working example:
http://jsfiddle.net/gEn8f/2/

My variant for Bootstrap 3.0 (only Next):
<ul class="nav nav-tabs" id="myTab">
<li class="active">Base tab</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="base">
<p>This is content of Tab 1</p>
Next →
</div>
<div class="tab-pane fade" id="tab2">
<p>This is content of Tab 2</p>
Next →
</div>
<div class="tab-pane fade" id="tab3">
<p>This is content of Tab 3</p>
</div>
</div>
<script>
$(document).ready(function() {
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
})
tabNext = function(e) {
var nextTab = $(e).attr('href');
$('#myTab a[href="' + nextTab + '"]').tab('show');
}
})
</script>

the answer is here
http://twitter.github.com/bootstrap/javascript.html#tabs
but try the below code
<ul id="myTab" class="nav nav-tabs">
<li class="active">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
<li>Tab 4</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="tab1">
<p>This is content of Tab 1</p>
</div>
<div class="tab-pane fade" id="tab2">
<p>This is content of Tab 2</p>
</div>
<div class="tab-pane fade" id="tab3">
<p>This is content of Tab 3</p>
</div>
<div class="tab-pane fade" id="tab4">
<p>This is content of Tab 4</p>
</div>
</div>
<div>
‹ Prev
Next ›
</div>
<script>
var myTab, myTabsActive, tabNext, tabPrev;
$(function() {
myTabs = $('#myTab li').length;
myTabsActive = 0; //or yours active tab
tabNext = function() {
var index = myTabsActive + 1;
index = index >= myTabs ? 0 : index;
$('#myTab li:eq(' + index + ') a').tab('show');
myTabsActive = index;
}
tabPrev = function() {
var index = myTabsActive - 1;
index = index < 0 ? myTabs - 1 : index;
$('#myTab li:eq(' + index + ') a').tab('show');
myTabsActive = index;
}
});
</script>