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.
Related
I have created bootstrap tab option and I also apply masonry js. So that box will appear one small and another big.On first tab it is working fine but in another tab it is not working.
My HTML code give below
<ul class="tabs" id="myTab">
<li class="tab-link current" data-tab="tab-1">First</li>
<li class="tab-link" data-tab="tab-2">Second</li>
</ul>
<div id="tab-1" class="tab-content current">
<div class="container">
<div class="gridnew">
<div class="grid-item">
<img src="Result-img-1.jpg" alt="">
<img src="Result-img-1.jpg" alt="">
<img src="Result-img-1.jpg" alt="">
</div>
</div>
</div>
</div
<div id="tab-2" class="tab-content current">
<div class="container">
<div class="gridnew">
<div class="grid-item">
<img src="Result-img-1.jpg" alt="">
<img src="Result-img-1.jpg" alt="">
<img src="Result-img-1.jpg" alt="">
</div>
</div>
</div>
</div
My JS code Given Below
<script type="text/javascript">
$('.gridnew').masonry({
itemSelector: '.grid-item'
});
Finally i got answer.
Trigger .masonry() on every click of my tab.
<script type="text/javascript">
$('#myTab li').click(function (e)
{
$("[id^='tab']").hide();
e.preventDefault()
var ids=$(this).data('tab');
$("#"+ids).show();
$('.gridnew').masonry({
itemSelector: '.grid-item'
});
})
</script>
To call 'shown.bs.tab' with no issues use jQuery.noConflict(). For masonry grid, you will need to call 'layout' method.
// Create the masonry grid
var $grid = $('.gridnew').masonry({
itemSelector: '.grid-item',
fitWidth: true,
gutter: 0,
percentPosition: true
});
// Issues with bs tabs and masonry refresh
jQuery.noConflict();
$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
// Reload the already created masonry grid, each time you click the Bootstrap tab
$grid.masonry('layout');
});
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>
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.
end developer. I have little problem with sliders in tabs. My sliders work but while i switch to second slider I can't see it. slider lost width and height If I resize site by responsive tools of firefox slider generates width and height. I used resizeFix() and reInit() but doesn't work
Can Anybody Help Me?
HTML
<ul id="tabs-wrapper" class="nav nav-tabs" data-tabs="tabs">
<li id="tabs-button" class="active">Projects</li>
<li id="tabs-button">Shots</li>
</ul>
</div>
<!-- Tab panes -->
<div class="tab-content">
<!-- First slider -->
<div class="tab-pane fade in active" id="home">
<div class="device">
<div class="arrows">
<a class="arrow-left al1" href="#"></a>
<a class="arrow-right ar1" href="#"></a>
</div>
<div class="swiper-container s1">
<div class="swiper-wrapper" style="width:100%; height:100%;">
<div class="swiper-slide">
<div class="content-slide">
<h3 class="title">Slide with HTML</h3>
website
</div>
<img class="img-work" src="images/drop1.jpg">
</div>
<div class="swiper-slide">
<div class="content-slide">
<h3 class="title">Slide with HTML</h3>
website
</div>
<img class="img-work" src="images/nu.jpg">
</div>
</div>
</div>
<div class="pagination p1"></div>
</div>
</div>
<!-- Second slider -->
<div class="tab-pane fade" id="profile">
<div class="device">
<div class="arrows">
<a class="arrow-left al2" href="#"></a>
<a class="arrow-right ar2" href="#"></a>
</div>
<div class="swiper-container s2">
<div class="swiper-wrapper" style="width:100%; height:100%;">
<div class="swiper-slide">
<div class="content-slide">
<h3 class="title">Slide with HTML</h3>
website
</div>
<img class="img-work" src="images/drop1.jpg">
</div>
<div class="swiper-slide">
<div class="content-slide">
<h3 class="title">Slide with HTML</h3>
website
</div>
<img class="img-work" src="images/nu.jpg">
</div>
</div>
</div>
<div class="pagination p2"></div>
</div>
</div>
CSS
.swiper-container {
width: auto;
height: auto;
cursor: default !important;
min-height: 729px !important;
}
JS
<script>
var Swiper1 = new Swiper('.s1',{
pagination: '.p1',
loop:true,
grabCursor: true,
paginationClickable: true
})
$('.al1').on('click', function(e){
e.preventDefault()
Swiper1.swipePrev()
})
$('.ar1').on('click', function(e){
e.preventDefault()
Swiper1.swipeNext()
})
var Swiper2 = new Swiper('.s2',{
pagination: '.p2',
loop:true,
grabCursor: true,
paginationClickable: true
})
$('.al2').on('click', function(e){
e.preventDefault()
Swiper2.swipePrev()
})
$('.ar2').on('click', function(e){
e.preventDefault()
Swiper2.swipeNext()
})
$('#shots_button').on('click', function() {
Swiper2.resizeFix() ;
Swiper2.reInit() ;
});
</script>
You need to use 'update' method on Swiper instance for latest versions of Swiper in place of something like reInit() or resizeFix().
Tested on Swiper 3.4.2:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
slider.update();
}
Ok i did the porblem was it bootstrap tabs i used this code
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
slider2.resizeFix(true);
slider1.resizeFix(true);
Hello I have a button in BootStrap. I use "collapse" in a menu and each of those buttons when I push this to collapse this appear with any problem.
But when I push another button with this active appear down on the other.
How change this action? When I push any button this hide this but with the same animation like collapse do it.
Here is the code, when you try it you'll understand me:
<ul class="nav nav-pills">
<li class="dropdown">1<strong class="caret"></strong></li>
<li class="dropdown">2<strong class="caret"></strong></li>
</ul>
<div class="clearfix"><p>content more</p></div>
<div id="content0a" class="collapse">
<div class="navbar">
<div class="thumbnail bs-example bullet0a">
<div class="media">
<div class="">
<ul><li> Content...1 </li></ul>
</div>
</div>
</div>
</div>
</div>
<div id="content1a" class="collapse">
<div class="navbar">
<div class="thumbnail bs-example bullet0a">
<div class="media">
<div class="">
<ul><li> Content...2 </li></ul>
</div>
</div>
</div>
</div>
</div>
Try this.
<script>
$(document).ready(function(){
$('.nav-pills a').click(function(){
$('.in').not($(this).data('target')).height(0);
$('.in').not($(this).data('target')).removeClass('in');
});
});
</script>
You can also try this. (which gives more of a collapse animation)
<script>
$(document).ready(function(){
$('.nav-pills a').click(function(){
$('.in').not($(this).data('target')).collapse('hide');
});
});
</script>
You can add it to the bottom of your page right before the </body> tag or add it to your existing javascript file.
Try that and let me know if it's close to what you want.