Masonry js not working with bootstrap tab - javascript

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');
});

Related

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>

hide unwanted element from list of elements using jquery

I have a list of div just like this:
<div class="portfolio-categories">
<ul>
<li>ALL WORKS</li>
<li>Residential</li>
<li>Commercial</li>
</ul>
<div class="clear"></div>
</div>
<div class="portfolio-container">
<div class="portfolio-item portfolio-cat-1">1</div>
<div class="portfolio-item portfolio-cat-1">2</div>
<div class="portfolio-item portfolio-cat-1">3</div>
<div class="portfolio-item portfolio-cat-2">4</div>
<div class="portfolio-item portfolio-cat-2">5</div>
</div>
There are 3 menus: ALL WORKS, Residential, Commercial. If I click Residential, all "portfolio-item" beside "portfolio-cat-1" will be hidden. The same goes for Commercial, all div "portfolio-item" beside "portfolio-cat-2" will be hidden.
I use .not() for this. Here is my jquery code:
$(".portfolio-categories a").click(function(e){
e.preventDefault();
var id=$(this).attr("id").split("-")[1];
$(".portfolio-item").not(".portfolio-cat-"+id).fadeOut(400, function(){
alert("done");
});
});
The problem is, when I click Residential (cat-1) all portfolio-cat-1 div are hidden instead of portfolio-cat-2. What went wrong? Is it not .not() that I should use?
Any help would be appreciated.
$(".portfolio-categories a").click(function(e){
e.preventDefault();
var id=$(this).attr("id").split("-")[1];
console.log(id)
$(".portfolio-item:not(.portfolio-cat-"+id+")").fadeOut(400, function(){
console.log("done");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="portfolio-categories">
<ul>
<li>ALL WORKS</li>
<li>Residential</li>
<li>Commercial</li>
</ul>
<div class="clear"></div>
</div>
<div class="portfolio-container">
<div class="portfolio-item portfolio-cat-1">1</div>
<div class="portfolio-item portfolio-cat-1">2</div>
<div class="portfolio-item portfolio-cat-1">3</div>
<div class="portfolio-item portfolio-cat-2">4</div>
<div class="portfolio-item portfolio-cat-2">5</div>
</div>
Try using the selector :not()
$(".portfolio-item").fadeIn(400).not(".portfolio-cat-"+id).fadeOut(400);
You need to bring back the previously hidden elements using fadeIn
Try the above line

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.

resizeFix reInit sliders

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);

Menu with Collapse BootStrap

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.

Categories