Develop Reference

initialize multiple instances of isotope in separate tabs. The tabs break isotope

I have multiple instances of isotope running in separate tabs. Isotope functions just fine in one tab, but when i switch tabs my footer is overlaying the isotope container. it does this until i click on one of the isotope filter options. once i click one, then the footer gets pushed down. However, when i go back to the previous tab - this tab is now messed up. here are some screenshots to show what I mean.
this is what it should look like. and this is what the loads loads as
this is what it ends up looking like when i switch tabs. then if i click on "all" it goes back to normal (i guess this is where isotope turns on?) and if i go back to the first tab. it's broken like this section bad was.
here is my html and jquery
$(document).ready(function() {
loadCSS("https://fonts.googleapis.com/css?family=Source+Sans+Pro");
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css");
// filtr menu
var navbutton = $('navbutton');
navbutton.on('click', function() {
$(this).siblings().removeClass('open').end().addClass('open');
});
var $grid = $('.grid').isotope({
itemSelector: '.grid-item',
percentPosition: true,
masonry: {
columnWidth: '.grid-sizer'
}
});
// layout Isotope after each image loads
$grid.imagesLoaded().progress(function() {
$grid.isotope('layout');
});
$('#filters').on('click', 'navbutton', function() {
var filtr = $(this).attr('data-filter');
$grid.isotope({
filter: filtr
});
});
$('#filters2').on('click', 'navbutton', function() {
var filtr = $(this).attr('data-filter');
$grid.isotope({
filter: filtr
});
});
$(function(){
$('ul.tabs li:first').addClass('active');
$('.block article').hide();
$('.block article:first').show();
$('ul.tabs li').on('click',function(){
$('ul.tabs li').removeClass('active');
$(this).addClass('active');
$('.block article').hide();
var activeTab = $(this).find('a').attr('href');
$(activeTab).show();
return false;
});
});
});
<!-- Image portfolio -->
<!--- tabs --->
<div class="container-fluid">
<div class = "row">
<div class ="col-md-8 col-md-offset-2">
<ul class="tabs">
<li data-toggle="tab">Interior</li>
<li>Furniture</li>
<li>Environment</li>
</ul>
</div>
</div>
</div>
<!--- end tabs --->
<section class="block">
<article id="tab1">
<div class="container-fluid">
<div class = "row">
<div class ="col-md-8 col-md-offset-2">
<!-- image Filter -->
<gallery-filter id="filters">
<navbutton data-filter=".bedroom">Bedroom</navbutton>
<navbutton data-filter=".kitchen">Kitchen</navbutton>
<navbutton data-filter=".livingroom">Living Room</navbutton>
<navbutton data-filter=".other">Other</navbutton>
<navbutton class="open" data-filter="*">All</navbutton>
</gallery-filter>
<gallery-filter id="filters4">
<navbutton class="open description">filter</navbutton>
</gallery-filter>
<!-- image filter end -->
</div>
</div>
<!-- Gallery -->
<div class = "row">
<div class ="col-md-10 col-md-offset-1">
<div class="grid" id="filters">
<div class="grid-sizer"></div>
<div class="grid-item bedroom">
<!-- images go here -->
</div>
</div>
</div>
<!-- end of gallery -->
</div>
</article>
<article id="tab2">
<div class="container-fluid">
<div class = "row">
<div class ="col-md-8 col-md-offset-2">
<!-- image Filter -->
<gallery-filter id="filters2">
<navbutton data-filter=".chair">Chairs</navbutton>
<navbutton data-filter=".table">Tables</navbutton>
<navbutton data-filter=".dresser">Dressers</navbutton>
<navbutton data-filter=".bed">Beds</navbutton>
<navbutton class="open" data-filter="*">All</navbutton>
</gallery-filter>
<gallery-filter id="filters3">
<navbutton class="open description">filter</navbutton>
</gallery-filter>
<!-- image filter end -->
</div>
</div>
<!-- Gallery -->
<div class = "row">
<div class ="col-md-10 col-md-offset-1">
<div class="grid" id="filters2">
<div class="grid-sizer"></div>
<div class="grid-item chair">
<!-- images go here -->
</div>
</div>
</div>
<!-- end of gallery -->
</div>
</article>
</section>
<!-- End Image portfolio -->
while looking through stack overflow i found this post: Making a jQuery Isotope layout initialize inside a Bootstrap Tab
I tried out the code:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
$('.grid').isotope('layout');
});
but i was unsure what to replace shown.bs.tab with and couldn't get it working. since this code applies to the bootstrap tabs (which i am not using)
any help is appreciated. thank you

I have same problem, I watch Making a jQuery Isotope layout initialize inside a Bootstrap Tab and try out but not work for me. and i found another solution for isotope in bootstrap tabs.
First of all you must create a div in your tab and Initialize in HTML isotope in your div like this:
<div class="tab-pane" id="messages">
<div class="grid-message" data-isotope='{"itemSelector": ".item-message" , "gutter":5 }'>
<div class="item-message"></div>
<div class="item-message"></div>
...
</div>
</div>
after that add this jquery code add to page for reCreate layout when tab clicked
$(document).ready(function () {
$(".nav-tabs a").click(function () {
$(this).tab('show');
});
$('.nav-tabs a').on('shown.bs.tab', function (e) {
if (e.target.hash == '#messages') {
//for isotope
$('.grid-message').isotope('layout');
}
if (e.target.hash == '#Othertabs') {}
});
});
Working example: http://jsfiddle.net/Vc6Vk/38/

You need to run layout when the tab is clicked. Try this:
$(function(){
$('ul.tabs li:first').addClass('active');
$('.block article').hide();
$('.block article:first').show();
$('ul.tabs li').on('click',function(){
$('ul.tabs li').removeClass('active');
$(this).addClass('active');
$('.block article').hide();
var activeTab = $(this).find('a').attr('href');
$(activeTab).show();
$grid.isotope('layout'); //add isotope layout here
return false;
});
});

How to get closest div html content?

I have multiple ul and li's and want to get the closest div respective html content when click on li.
I have tried this like $(this).closest('div').find('.email-con').show().html() getting undefined.
<div class="col-md-12">
<div class="col-md-3 subs-alrts">
<ul class="cp-expand sent-mails" id="sent-mails">
<li class="clearfix">
<div class="cp-exp-title clearfix col-md-12">Dasara Mail</div>
<div class="cp-exp-con col-md-12">
<ul>
<li class="evnt-mail-cls" >06/01/16</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="col-md-9 email-con" id="email-con" style="display:none">
dasara mail content
</div>
</div>
My script is:
$('#sent-mails .cp-exp-con ul li').click( function(){
alert($(this).closest('div').find('.email-con').show().html());
});

If you are trying to find the content of .email-con then you need to traverse upto .subs-alrts and then pick its next element.
$('#sent-mails .cp-exp-con ul li').click( function(){
alert($(this).closest('.subs-alrts').next('.email-con').show().html());
});
See the final code:
$(function() {
$('#sent-mails .cp-exp-con ul li').click(function() {
var x = $(this).closest('.subs-alrts').next('.email-con');
x.show();
alert(x.html());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
<div class="col-md-3 subs-alrts">
<ul class="cp-expand sent-mails" id="sent-mails">
<li class="clearfix">
<div class="cp-exp-title clearfix col-md-12">Dasara Mail</div>
<div class="cp-exp-con col-md-12">
<ul>
<li class="evnt-mail-cls">06/01/16</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="col-md-9 email-con" id="email-con" style="display:none">
dasara mail content
</div>
</div>

Try this
$('ul li').click(function(){
var a=$(this).closest('div');
a=$(this).closest('div').text();
alert(a);
});

You need :
$('#sent-mails .cp-exp-con ul li').click( function(){
alert($(this).closest('div').parent().find('.email-con').show().html());
});

$('#sent-mails .cp-exp-con ul li').click( function(){
alert($('.email-con').show().html());
});

Change for jquery code with following , it may help you.
$('#sent-mails .cp-exp-con ul li').click( function(){
alert($(this).parents('.subs-alrts').parent('div').find('.email-con').show().html());
});

Try this:
$('#sent-mails .cp-exp-con ul li').click( function(){
alert($(this).parents('.subs-alrts').parent().find('.email-con').show().html());
});

You have two way of doing this explained in code comments :
Note: the second (and easiest) require that you add a class to your top div (because col-md-12 is a bootstrap one that could change in the future)
// if you click there will be 2 alerts because I wrote two way of doing it :
$('#sent-mails .cp-exp-con ul li').click( function() {
var html = $(this)
// Get the parent with class "subs-alrts"
.parents(".subs-alrts")
// get the following element that have the class "email-con"
.next('.email-con')
.show().html();
alert(html);
});
// OR
$('#sent-mails .cp-exp-con ul li').click( function() {
var html = $(this)
// Get the parent with class "MAIN_DIV"
.parents(".MAIN_DIV")
// find the child element that have the class "email-con"
.find('.email-con')
.show().html();
alert(html);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 MAIN_DIV">
<div class="col-md-3 subs-alrts">
<ul class="cp-expand sent-mails" id="sent-mails">
<li class="clearfix">
<div class="cp-exp-title clearfix col-md-12">Dasara Mail</div>
<div class="cp-exp-con col-md-12">
<ul>
<li class="evnt-mail-cls" >06/01/16</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="col-md-9 email-con" id="email-con" style="display:none">
dasara mail content
</div>
</div>

using hasclass for multiple divs with one button Problems

I am trying to change the display property of a div based on if the carousel image is active at the time. I have gotten it to work but it only works when i doubleclick. With a single click it displays the div corresponding to the previous active image instead of the current one. Please HELP.
=====================================
CODE BELOW
HTML
<div class="container-fluid" id="siteImgs">
<div class="row col-xs-12 col-md-7">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Carousel indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" id="lg" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1" id="ma"></li>
<li data-target="#myCarousel" data-slide-to="2" id="sz"></li>
<li data-target="#myCarousel" data-slide-to="3"id="ti"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<img src="img/work/lookingGlass.png" alt="looking glass">
</div>
<div class="item">
<img src="img/work/mauriceSite.png" alt="maurice site">
</div>
<div class="item">
<img src="img/work/sza.png" alt="sza">
</div>
<div class="item">
<img src="img/work/tina.png" alt="tina">
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<!--INFORMATION DIVS-->
<div class="row col-xs-12 col-md-5 lookingGlass lg">
<h1>THE LOOKING GLASS</h1>
<p>Lorem ipsum</p>
</div>
<div class="row col-xs-12 col-md-5 lookingGlass ma">
<h1>MAURICEDANIELS.COM</h1>
<p>Lorem ipsum</p>
</div>
<div class="row col-xs-12 col-md-5 lookingGlass sz">
<h1>SZA</h1>
<p>Lorem ipsum</p>
</div>
<div class="row col-xs-12 col-md-5 lookingGlass ti">
<h1>TINA D. PHOTOGRAPHY</h1>
<p>Lorem ipsum</p>
</div>
JS/JQUERY
$( '.ma' ).hide();
$( '.sz' ).hide(),
$( '.ti' ).hide();
$( ".carousel-control" ).click(function() {
if ( $( '#lg' ).hasClass( "active" ) ) {
$( '.lg' ).show(),
$( '.ma' ).hide();
$( '.sz' ).hide(),
$( '.ti' ).hide();
}
if ( $( '#ma' ).hasClass( "active" ) ) {
$( '.ma' ).show(),
$( '.lg' ).hide();
$( '.sz' ).hide(),
$( '.ti' ).hide();
}
if ( $( '#sz' ).hasClass( "active" ) ) {
$( '.sz' ).show(),
$( '.lg' ).hide();
$( '.ma' ).hide(),
$( '.ti' ).hide();
}
if ( $( '#ti' ).hasClass( "active" ) ) {
$( '.ti' ).show(),
$( '.lg' ).hide();
$( '.sz' ).hide(),
$( '.ma' ).hide();
}
});
Full Example HERE

You can use the slide event for this.
$('#myCarousel').on('slide.bs.carousel', function (e) {
var index = $(e.relatedTarget).index();
var obj = $('[data-slide-to="' + index + '"]').attr('id');
$('.lookingGlass').hide(); // all individual hide() that you had in your code can be replaced by targeting the divs with class
$('.' + obj).show();
})
Fiddle demo
Also another way is to remove the ids from the carousel indicators and add it as a data-attribute to div.item something like this <div class="item" data-target="lg"> and use it like this
$('#myCarousel').on('slide.bs.carousel', function (e) {
var obj = $(e.relatedTarget).data('target');
$('.lookingGlass').hide();
$('.' + obj).show();
})
Demo fiddle

you could do something like that,
$( ".carousel-control" ).click(function() {
$(".carousel-indicators").each(function(){
var idActive = $(this).attr("id");
if($(".lookingGlass ").hasClass("idActive ")){
$(this).show();
}
$(".lookingGlass").hide();
});
});
And im not if its gonna work just wrote it here, can check it after 15 min from now on, but maybe its help you now.

I'm not sure if this will work, but looking at your site, and how the carousel works, there is a delay to which the class "active" is applied when images/slides are switching. I think whats happening is that this delay causes the carousel's bootstrap js to mismatch a little with your custom js, so that when you click, the previous slide is still active, then the bootstrap js kicks in and switches the slide, but your js has already executed, thus causing the mismatch in divs vs images displayed. Instead of using "active" class to determine, try using:
if ($('#ti').hasClass("next") || $('#ti').hasClass("prev") {
// do stuff here
}

If parent li hasclass append class to child element

I'm trying to add a class called "animated" to a child div only when the parent li has a class called "current". Additionally, I'm trying to remove the "animated" class if the parent li does not show the "current" class.
$(document).ready(function() {
if ($('ul.itemwrap li').hasClass('current')) {
$( "ul.itemwrap li" ).find( ".caption-text" ).addClass("animated");
}
else {
$( "ul.itemwrap li" ).find( ".caption-text" ).removeClass( "animated" );
}
});
problem*
the code works, somewhat, however, it's only adding the class to all child (.caption-text) elements as well as not removing them when the "current" class is added and removed throughout the carousel loop.
Html*
<ul class="itemwrap">
<li class="current"> <img src="images/img1.jpg" alt="img-description">
<div class="caption">
<div class="caption-holder">
<div class="container">
<div class="caption-text">
<h1>title</h1>
</div>
</div>
</div>
</div>
</li>
<li> <img src="images/img2.jpg" alt="img-description">
<div class="caption">
<div class="caption-holder">
<div class="container">
<div class="caption-text">
<h1>Title</h1>
</div>
</div>
</div>
</div>
</li>
<li> <img src="images/img3.jpg" alt="img-description">
<div class="caption">
<div class="caption-holder ">
<div class="container">
<div class="caption-text">
<h1>Title></h1>
</div>
</div>
</div>
</div>
</li>
</ul>

An issue with your code is that if one <li> has the class 'current', then you're adding the class animated to all ".caption-text" elements, not just the ones below the item with '.current'.
You could fix your code in a couple ways. This way processes each <li> individually:
$(document).ready(function() {
$('ul.itemwrap li').each(function() {
var item = $(this);
var caption = item.find(".caption-text");
if (item.hasClass('current')) {
caption.addClass("animated");
} else {
caption.removeClass("animated");
}
});
});
This way uses selectors to do more of the work for you:
$(document).ready(function() {
// clear .animated from all captions
$('ul.itemwrap li .caption-text').removeClass("animated");
// put back the .animated under .current
$('ul.itemwrap li.current .caption-text').addClass("animated");
});

Jquery click only work once on toggle

I am using the following script to show a different background depending on the state of the div.
When it is not expanded it shows the "plus (+)" sign, while when is expanded it does not have background image (does not shows anything).
The problem there is that only work once, and I dont know why.
Here's the code:
EDIT (added HTML)!
HTML:
<body>
<section>
<div class="wrapper wf">
<ul id="Parks" class="just">
<!--------------- PRODUCT -->
<li class="mix" href="#therapy_vital" >
<div class="meta name">
<div class="img_wrapper">
<img src="images/spa/masaje/.jpg" onload="imgLoaded(this)"/>
</div>
<div class="titles">
<h2>TITLE</h2>
</div>
</div>
<!-- Expand -->
<div href="#therapy_vital" class="nav-toggle"></div>
<div id="therapy_vital" style="display:none">
<article class="ac-small">
SUBCONTENT<br><br><br><br><br><br><br><br><br><br><br><br>
</article>
</div>
</li>
<!--------------- PRODUCT -->
<li class="mix" href="#therapy_natur" >
<div class="meta name">
<div class="img_wrapper">
<img src="images/spa/masaje/.jpg" onload="imgLoaded(this)"/>
</div>
<div class="titles">
<h2>TITLE</h2>
</div>
</div>
<!-- Expand -->
<div href="#therapy_natur" class="nav-toggle"></div>
<div id="therapy_natur" style="display:none">
<article class="ac-small">
SUBCONTENT<br><br><br><br><br><br><br><br><br><br><br><br>
</article>
</div>
</li>
</ul>
</div>
</section>
</body>
JS:
$(document).ready(function() {
$('.meta').click(function() {
$(this).css('background', 'none');
});
$('.mix').click(function() {
var collapse_content_selector = $(this).attr('href');
var toggle = $(this);
$('.meta').click(function() {
$(this).css('background', 'url(images/arrow_down.png) no-repeat scroll 95% 97% transparent');
});
$(collapse_content_selector).toggle(function() {});
});
});
(The .mix value makes the Div expands, and the .meta class switch to different background).
Any clue?
EDIT2 (Live example)
http://anubisfiles.com/test/test.html
(Due I am not really familiar with jsFiddle, I prefer to show you it hosted on a website).
Thanks!

Use on function to bind events,
$('element').on('click', function() {
});

$('.mix').click(function() {
var collapse_content_selector = $(this).attr('href');
var toggle = $(this);
$(this).find('.meta').css('background', 'url(images/arrow_down.png) no-repeat scroll 95% 97% transparent');
$(collapse_content_selector).toggle(function() {});
});
Try this