We Keep Coding

Show different content in a single container when clicking a product (jQuery)

I'm trying to create a shop with about 100 products, each one with it's own id and description. The description box should show up whenever the user clicks the product. Because the content of this description box has to change depending on which product was clicked(eg, showing a different brand, id, price and photo), my best idea is to create 100 hidden containers (description boxes) and make them show up when the user clicks the product.
Is there a faster option? (Eg: Creating only 1 description box and change the content inside on click?)
$(document).ready(function() {
$(".view").click(function() {
$("#full-description-box").show();
});
});
.product,
#full-description-box {
background: orange;
margin: 0 auto;
width: 30%;
height: 50%;
text-align: center;
margin-top: 2%;
}
#full-description-box {
background: red;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">
<!-- PRODUCT 1 -->
<img src="#">
<div class="short-description">
<h4>HUBLOT</h4>
<h4>299 $</h4>
<h2>DIAMOND WHITE GOLD PLATED</h2>
</div>
<a class="view" id="product001" href="#">View full description</a>
</div>
<div class="product">
<!-- PRODUCT 2 -->
<img src="#">
<div class="short-description">
<h4>ROLEX</h4>
<h4>499 $</h4>
<h2>GOLD PLATED</h2>
</div>
<a class="view" id="product002" href="#">View full description</a>
</div>
<div id="full-description-box">
<!-- START DESCRIPTION BOX -->
<img src="#">
<h3 id="brand">Brand name:</h3>
<h4 id="full-name">Model: </h4>
<h5 id="item-id">ID: </h5>
<p>Full Description: </p>
<h4 id="price">Price:</h4>
</div>
<!-- END DESCRIPTION BOX -->

This is a solution without changing to much to your existing code.
Note:
I removed the id attributes as ids should be unique!
I added data-view-id="product002" to the detail container
$(document).ready(function() {
$(".view").click(function() {
// $(this).attr('id') is the id of the clicked .view element
$('[data-view-id="'+$(this).attr('id')+'"]').toggle();
});
});
.product,
.full-description-box {
background: orange;
margin: 0 auto;
width: 30%;
height: 50%;
text-align: center;
margin-top: 2%;
}
.full-description-box {
background: red;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">
<!-- PRODUCT 1 -->
<img src="#">
<div class="short-description">
<h4>HUBLOT</h4>
<h4>299 $</h4>
<h2>DIAMOND WHITE GOLD PLATED</h2>
</div>
<a class="view" id="product001" href="#">View full description</a>
</div>
<div class="product">
<!-- PRODUCT 2 -->
<img src="#">
<div class="short-description">
<h4>ROLEX</h4>
<h4>499 $</h4>
<h2>GOLD PLATED</h2>
</div>
<a class="view" id="product002" href="#">View full description</a>
</div>
<div class="full-description-box" data-view-id="product001">
<!-- START DESCRIPTION BOX -->
<img src="#">
<h3 class="brand">Brand name: product001</h3>
<h4 class="full-name">Model: </h4>
<h5 class="item-id">ID: </h5>
<p>Full Description: </p>
<h4 class="price">Price:</h4>
</div>
<div class="full-description-box" data-view-id="product002">
<!-- START DESCRIPTION BOX -->
<img src="#">
<h3 class="brand">Brand name: product002</h3>
<h4 class="full-name">Model: </h4>
<h5 class="item-id">ID: </h5>
<p>Full Description: </p>
<h4 class="price">Price:</h4>
</div>

Card flip inside Bootstrap modal with dynamicly imported image

I'm making a sort of card game. I'm using Bootstrap 3 as my framework with a deck of cards in a grid, each card in their own column.
When a card is clicked, I want the card to be displayed with its backside up as an overlay, like Bootstraps modal or equivalent. But when the card is clicked (or touched) it should flip, displaying the front which is the same as the image that was clicked to trigger the modal. It should be able to flip back and forward infinite number of times. Clicking outside the modal or on a close button, closes the modal and returns to the deck.
I'm able to do a card flip on an image. And I'm able to trigger a modal with dynamic content. But what I can't figure out is how to do this together so that I don't have to create a seperate modal for each card.
I've been pulling my hair over this issue for days now and I truly cannot wrap my head around how this can be made. My javascript skills are quite limited and I cant find any plugin or code example to help me in this (I've tried numerous options).
My grid is displayed in the snippet. No data-targets, modules or javascripts included though since I havn't found anything that works yet.
Any ideas?
main {
.container-fluid;
.text-center;
background: none;
header {
.container-fluid;
.text-center;
padding: 50px;
h1 {
font-weight: #font-weight-heading;
}
}
.cardColumns {
.make-row();
.cCard {
.make-xs-column(4);
.make-sm-column(3);
.make-md-column(2);
padding: 10px;
img {
width: 100%;
height: auto;
.img-rounded;
modal-body-shadow: 0 4px 8px 0 #000;
transition: 0.3s;
}
img:hover {
modal-body-shadow: 0 8px 16px 0 #000;
}
}
}
}
<main>
<div class="cardColumns">
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
</div>
</main>

This basically just changes the background image in the mid spin.
$(document).ready(function() {
initListeners();
});
function initListeners() {
$(".container").off();
$(".container").on("click",function() {
$(".container").removeClass("toggle")
$(this).addClass("toggle");
});
}
/*var Cards;
setTimeout(function() {
Cards = document.querySelectorAll(".container");
for (let i = 0; i < (e = Cards.length); i++)
Cards[i].addEventListener("click", function(elem) {
for (let i = 0; i < (e = Cards.length); i++)
Cards[i].classList.remove('toggle');
elem.target.parentElement.classList.add('toggle');
});
}, 1);*/
.container {
perspective: 1000px;
display: inline-block;
position: relative;
}
.card {
margin: 5px;
width: 105px;
height: 150px;
background: #000;
transition: transform .35s linear;
transform: rotateX(180deg);
transform-style: preserve-3d;
}
.card::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(https://i.stack.imgur.com/gcRWf.png) center center;
background-size: cover!important;
transition: background 0.01s linear;
transition-delay: 0.175s;
}
.container.toggle .card {
transform: rotateX(0deg);
}
.container.toggle .card::after {
background: url(https://s-media-cache-ak0.pinimg.com/736x/f4/e3/97/f4e397ef5e0a4cd7cdbf30e65aa149c0.jpg) center center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="card"></div>
</div>
<div class="container">
<div class="card"></div>
</div>
<div class="container">
<div class="card"></div>
</div>
<div class="container">
<div class="card"></div>
</div>
<div class="container">
<div class="card"></div>
</div>

Copy pest code in individual file and check in your local it will run. perfect. Given below is modern way of doing it. You can refer this link for further details of the way of creating modal dynamically.
With that also i have used external js to flip images reference to which you will get here.
$('.flip-card').flip();
function openModal(front_image, back_image) {
var message = $('#modal_1');
BootstrapDialog.show({
message: $('#modal_1'),
onshown: function() {
$('.front img').attr('src', front_image);
$('.back img').attr('src', back_image);
},
onhide: function(dialogRef) {
$('#hidden-div').append(message);
},
});
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>
<button type="button" class="btn btn-primary" onclick="openModal('http://fillmurray.com/200/200','http://fillmurray.com/600/600')">Open modal</button>
<div id="hidden-div" style="display: none">
<div class="container-fluid" id="modal_1">
<div class="row">
<div class="col-sm-3 col-xs-6">
<div class="flip-card" ontouchstart="this.classList.toggle('hover');" style="height : 300px;">
<div class="front front-side" style="">
<img src="" alt="" style="width : 100%; height: 100%">
</div>
<div class="back back-side" style="background-color : blue">
<img src="" alt="" style="width : 100%; height: 100%">
</div>
</div>
</div>
</div>
</div>
</div>

Owl Carousel 2 pagenation titles not in order

I'm making a image slider using Owl Carousel 2 and I have it all working but I'm currently trying to add text pagination to the controls for the slider. I added the title attribute to the HTML on the images and used javascript to populate the pagination for the slider.
Here is the HTML:
<div class="rri-carousel owl-theme owl-carousel owl-loaded">
<div class="owl-stage-outer">
<div class="owl-stage" style="transform: translate3d(-9192px, 0px, 0px); transition: 0s; -webkit-transition: 0s; width: 13788px;">
<div class="owl-item cloned" style="width: 1532px; margin-right: 0px;">
<div class="item">
<img src="http://example.com/wp-content/uploads/2015/05/Agriculture_4.jpg" title="Agriculture" data-thumb="http://example.com/wp-content/uploads/2015/05/Agriculture_4.jpg" alt="Agriculture">
</div>
</div>
<div class="owl-item cloned" style="width: 1532px; margin-right: 0px;">
<div class="item">
<img src="http://example.com/wp-content/uploads/2012/05/Equine.jpg" title="Equine" data-thumb="http://example.com/wp-content/uploads/2012/05/Equine.jpg" alt="Equine">
</div>
</div>
<div class="owl-item" style="width: 1532px; margin-right: 0px;">
<div class="item">
<img src="http://example.com/wp-content/uploads/2015/05/Salt_and_Sand2.jpg" title="Salt & Sand" data-thumb="http://example.com/wp-content/uploads/2015/05/Salt_and_Sand2.jpg" alt="Salt & Sand">
</div>
</div>
<div class="owl-item" style="width: 1532px; margin-right: 0px;">
<div class="item">
<img src="http://example.com/wp-content/uploads/2015/05/Fertilizer2.jpg" title="Fertilizer" data-thumb="http://example.com/wp-content/uploads/2015/05/Fertilizer2.jpg" alt="Fertilizer">
</div>
</div>
<div class="owl-item" style="width: 1532px; margin-right: 0px;">
<div class="item">
<img src="http://example.com/wp-content/uploads/2015/05/Commercial_2.jpg" title="Commercial" data-thumb="http://example.com/wp-content/uploads/2015/05/Commercial_2.jpg" alt="Commercial">
</div>
</div>
<div class="owl-item" style="width: 1532px; margin-right: 0px;">
<div class="item">
<img src="http://example.com/wp-content/uploads/2015/05/Agriculture_4.jpg" title="Agriculture" data-thumb="http://example.com/wp-content/uploads/2015/05/Agriculture_4.jpg" alt="Agriculture">
</div>
</div>
<div class="owl-item active" style="width: 1532px; margin-right: 0px;">
<div class="item">
<img src="http://example.com/wp-content/uploads/2012/05/Equine.jpg" title="Equine" data-thumb="http://example.com/wp-content/uploads/2012/05/Equine.jpg" alt="Equine">
</div>
</div>
<div class="owl-item cloned" style="width: 1532px; margin-right: 0px;">
<div class="item">
<img src="http://example.com/wp-content/uploads/2015/05/Salt_and_Sand2.jpg" title="Salt & Sand" data-thumb="http://example.com/wp-content/uploads/2015/05/Salt_and_Sand2.jpg" alt="Salt & Sand">
</div>
</div>
<div class="owl-item cloned" style="width: 1532px; margin-right: 0px;">
<div class="item">
<img src="http://example.com/wp-content/uploads/2015/05/Fertilizer2.jpg" title="Fertilizer" data-thumb="http://example.com/wp-content/uploads/2015/05/Fertilizer2.jpg" alt="Fertilizer">
</div>
</div>
</div>
</div>
<div class="owl-controls">
<div class="owl-nav">
<div class="owl-prev" style="display: none;">prev</div>
<div class="owl-next" style="display: none;">next</div>
</div>
<div class="owl-dots" style="">
<div class="owl-dot"><span>Agriculture</span></div>
<div class="owl-dot"><span>Equine</span></div>
<div class="owl-dot"><span>Salt & Sand</span></div>
<div class="owl-dot"><span>Fertilizer</span></div>
<div class="owl-dot active"><span>Commercial</span></div>
</div>
</div>
</div>
and here is my javascript code :)
$(document).ready(function () {
var owl = $('.rri-carousel');
function customPager() {
$.each($(owl).find('.item'), function (i) {
var titleData = $(this).find('img').attr('title');
console.log(titleData);
var paginationLinks = $('.owl-controls .owl-dots .owl-dot span');
$(paginationLinks[i]).append(titleData);
});
}
owl.owlCarousel({
loop : true,
items : 1,
nav : false,
autoplay : true,
onInitialized : customPager
});
});
But when it gets displayed on the screen here is the order..
The order is completely wrong somehow..
I added a console output to display the titles as they are added to the pager and here is the order which is wrong as well :/
Agriculture
Equine
Salt & Sand
Fertilizer
Commercial
Agriculture
Equine
Salt & Sand
Fertilizer

Create an array before the onInitialized event:
$(document).ready(function () {
var owl = $('.rri-carousel');
var dots_label = [];
$.each($(owl).find('.item'), function (i) {
dots_label.push($(this).find('img').attr('title'));
});
function customPager() {
$.each($(owl).find('.owl-dot'), function (i) {
var paginationLinks = $('.owl-controls .owl-dots .owl-dot span');
$(paginationLinks[i]).append(dots_label[i]);
});
}
owl.owlCarousel({
loop : true,
items : 1,
nav : false,
autoplay : true,
onInitialized : customPager
});
});

Having trouble with ion-nav-bar and ion-tabs with Divs with 100% height

just started using ionic so I guess it's a kinda newbee question here but I have not been able to do the following:
- div h:100% w:100%
- div 30% 100%
- image 100% 100%
- div 5% w:100%
- button 100% 100%
- div 65% w:100%
- image 50% 50%
- image 50% 50%
- image 50% 50%
- image 50% 50%
I need something like this (The images must maintain aspect ratio inside the div):
And this is my app:
This is my code:
ion-view view-title="">
<ion-pane>
<div style="height: 100%;width:100%;position:fixed;left:0;top:0">
<div style="padding:0;margin: 0;height: 35%;width:100%;">
<img ng-src="images/a_i.png" style="width:100%;height: 100%">
</div>
<div style="padding:0;margin: 0;height: 5%;width:100%;">
<button class="button button-block button-positive">
Button
</div>
<div style="padding:0;margin: 0;height: 60%;width:100%;">
<div style="padding:0;margin: 0; width: 50%;height: 50%;float: left;">
<img ng-src="images/a_i.png" style="width:100%; height: 100%;">
</div>
<div style="padding:0;margin: 0; width: 50%;height: 50%;float: left;">
<img ng-src="images/b_i.png" style="width:100%; height: 100%;">
</div>
<div style="padding:0;margin: 0; width: 50%;height: 50%;float: left;">
<img ng-src="images/a_i.png" style="width:100%; height: 100%;">
</div>
<div style="padding:0;margin: 0; width: 50%;height: 50%; float: left;">
<img ng-src="images/b_i.png" style="width:100%; height: 100%;">
</div>
</div>
</div>
</div>
</ion-pane>
</ion-view>
The problem I see is that the on-nav-bar and ion-tabs is part of the 100% of my main container (in this case ion-pane), Images range below the header.
Perhaps the only solution can be done using html-css-javascript because I have not found a way using tools from ionic-framework.
Any ideas?

You can use ion-content instead of ion-pane to load the contents within the ion-view. Also, ionic inherently offers css classes for most of the frequently required use cases. Please check out the css classes item-image for the top area which renders the image in full width, button-block to show a full width button and col col-50 for displaying items in two column style. below the complete snippet making use of all these classes.
<ion-view>
<ion-content>
<div class="row item-image">
<img ng-src="images/a_i.png">
</div>
<div class="row">
<button class="button button-block">button</button>
</div>
<div class="row">
<div class="col col-50">
<img ng-src="images/a_i.png">
</div>
<div class="col col-50">
<img ng-src="images/b_i.png">
</div>
</div>
<div class="row">
<div class="col col-50">
<img ng-src="images/a_i.png">
</div>
<div class="col col-50">
<img ng-src="images/b_i.png">
</div>
</div>
</ion-content>
</ion-view>

Dynamic HTML not displaying correctly with Isotope

Synopsis of problem
When the screen loads it loads an empty div that jquery will later make individual calls to a web service and then dumps the resulting HTML in. Elements are then selected/deselected to be included in the calculation and results do not display correctly.
The problem is when Isotope is initialized it sets the height of the container to 0px but overflow set to auto. This means when the ui is returned via AJAX the container it is being inserted into has a height of 0.
Windows machines render the overflow but Mac devices do not.
UPDATE 2014-02-27
On PC the element is given an inline style of -webkit-transform
On PC:
-webkit-transform: translate3d(243px, 0px, 0px) scale3d(1, 1, 1);
On MAC:
-webkit-transform: translate3d(0px, 180px, 0px) scale3d(1, 1, 1);
Screenshots
Mac (Chrome) Screenshot: http://i.imgur.com/GXmrBjU.png
PC (Chrome) Screenshot: http://i.imgur.com/KtulXhF.png
Relevant JavaScript
$('body').on('click','.culture-location .primary.turn-off', function(event){
var $this = $(this),
teamIds = [], scores = [],
$section = $this.closest('.listing-section'),
$listing = $section.find('.listing-culture-dimensions'),
$widgetboxes = $listing.find('.widgetbox'),
$widgetbox = $this.closest('.widgetbox'),
$loader = $('.loader')
;
event.preventDefault();
if($widgetbox.hasClass('off')){
$widgetbox.removeClass('off');
}else{
$widgetbox.addClass('off');
}
$loader.fadeIn();
$listing.fadeOut().data('scores', scores);
$.each($widgetboxes, function(){
var $this = $(this);
scores.push({
id: $this.data('dimensionid'),
score: $this.data('score')
});
});
$section.find('.widget-team:not(.off)').each(function(){
teamIds.push($(this).data('t'));
});
$listing.isotope().isotope('destroy');
$listing.empty();
$.ajax({
url: '/xxx/xxxxxx',
type: 'POST',
data: {
...
}
}).done(function(response){
var responseobj = JSON.parse(response),
lastScores = $listing.data('scores')
;
$listing.html($(responseobj.data));
$listing.isotope().isotope('insert', $listing.find('.widgetbox'));
$listing.find('.widgetbox').equalHeights(40);
$listing.find('.progress-circle').progressCircle();
$listing.isotope('reLayout');
$listing.fadeIn();
$loader.fadeOut();
});
});
Relevent HTML
<div class="listing-section" data-l="0">
<div class="header">
<h4>Virtual Teams</h4>
<p> </p>
</div>
<div class="listing listing-culture-dimensions isotope loaded" style="position: relative; height: 365px;"><div class="widgetbox widget-culture purple3 isotope-item" data-score="82.000000000000" data-dimensionid="10" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(0px, 0px, 0px);">
<div class="widget-head">
<div class="progress-circle">
<span class="indicator hide"></span>
<div class="value"><span>82</span><small>%</small></div>
<div class="slice gt50"><div class="pie" style="-webkit-transform: rotate(295.2deg);"></div><div class="pie fill"></div></div></div>
<div class="num">1</div>
<h6 class="text-ucfirst">teamwork</h6>
</div>
<div class="widget-overlay">
Read More
Read Less
</div>
<div class="culture-entry" style="height: 238px;">
<p class="text-ucfirst">A chief value of this location is teamwork. Most of the people at this location tend to seek collaborative solutions and to employ group efforts to overcome challenges. Many of them prefer working with others to working alone. Collaboration and cooperation are highly valued, and this fact has contributed to the success of this location.</p>
</div>
</div><!-- /.widgetbox -->
<div class="widgetbox widget-culture purple2 isotope-item" data-score="79.000000000000" data-dimensionid="12" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(250px, 0px, 0px);">
<div class="widget-head">
<div class="progress-circle">
<span class="indicator hide"></span>
<div class="value"><span>79</span><small>%</small></div>
<div class="slice gt50"><div class="pie" style="-webkit-transform: rotate(284.40000000000003deg);"></div><div class="pie fill"></div></div></div>
<div class="num">2</div>
<h6 class="text-ucfirst">support</h6>
</div>
<div class="widget-overlay">
Read More
Read Less
</div>
<div class="culture-entry" style="height: 238px;">
<p class="text-ucfirst">A primary value of this location is support. Many of the people in this location find value in organizations that invest in their employees by providing resources and support to accomplish personal and professional goals.</p>
</div>
</div><!-- /.widgetbox -->
<div class="widgetbox widget-culture purple isotope-item" data-score="79.000000000000" data-dimensionid="8" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(500px, 0px, 0px);">
<div class="widget-head">
<div class="progress-circle">
<span class="indicator hide"></span>
<div class="value"><span>79</span><small>%</small></div>
<div class="slice gt50"><div class="pie" style="-webkit-transform: rotate(284.40000000000003deg);"></div><div class="pie fill"></div></div></div>
<div class="num">3</div>
<h6 class="text-ucfirst">service</h6>
</div>
<div class="widget-overlay">
Read More
Read Less
</div>
<div class="culture-entry" style="height: 238px;">
<p class="text-ucfirst">One of the main values of this location is service. Many of the people at this location find fulfillment in helping others and put high value in surpassing the expectations of customers. For this reason this location is able to offer high standards in customer service.</p>
</div>
</div><!-- /.widgetbox -->
<div class="widgetbox widget-culture blue isotope-item" data-score="71.000000000000" data-dimensionid="15" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(750px, 0px, 0px);">
<div class="widget-head">
<div class="progress-circle">
<span class="indicator hide"></span>
<div class="value"><span>71</span><small>%</small></div>
<div class="slice gt50"><div class="pie" style="-webkit-transform: rotate(255.6deg);"></div><div class="pie fill"></div></div></div>
<div class="num">4</div>
<h6 class="text-ucfirst">structure</h6>
</div>
<div class="widget-overlay">
Read More
Read Less
</div>
<div class="culture-entry" style="height: 238px;">
<p class="text-ucfirst">One of the principal work values at this location is structure. Most people at this location value having a clearly defined structure and having rules for how work is completed. The location tends toward being rule-bound and has a consistent and predictable work environment with clearly established procedures.</p>
</div>
</div><!-- /.widgetbox -->
<div class="widgetbox widget-culture lightblue isotope-item" data-score="71.000000000000" data-dimensionid="13" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(1000px, 0px, 0px);">
<div class="widget-head">
<div class="progress-circle">
<span class="indicator hide"></span>
<div class="value"><span>71</span><small>%</small></div>
<div class="slice gt50"><div class="pie" style="-webkit-transform: rotate(255.6deg);"></div><div class="pie fill"></div></div></div>
<div class="num">5</div>
<h6 class="text-ucfirst">opportunity</h6>
</div>
<div class="widget-overlay">
Read More
Read Less
</div>
<div class="culture-entry" style="height: 238px;">
<p class="text-ucfirst">One of the most important values at this location is opportunity. Many of the people at this location value having clear pathways for advancement and appreciate the guidance and recognition they receive to identify career opportunities within your organization. Many of the employees at this location are motivated by the knowledge that their contributions are noticed and that opportunities for promotion are provided.</p>
</div>
</div><!-- /.widgetbox --></div>
<div class="listing listing-culture-teams isotope loaded" style="position: relative; height: 111px;"><div class="widgetbox widget-team isotope-item" data-t="1" style="height: 69px; position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(0px, 0px, 0px);">
<div class="widget-head">
<div class="label-new">New</div>
<h6>My Team</h6>
</div>
<div class="member-thumbs">
<div class="member-limiter"></div>
<div class="member-thumb purple3 ">
<span class="m-mask"></span>
<span class="m-check"></span>
<img src="/files/image/7AF5A396-D339-4E86-9D80-682133C47C5F/30" alt="Eric Miller">
</div>
</div>
<div class="widget-overlay">
<span class="flaticon solid battery-charging-3"></span>
</div>
<div class="widget-bar">
<span class="flaticon stroke logout-1"></span><span class="flaticon solid battery-charging-3"></span>
<span class="flaticon stroke compose-1"></span> edit
<span class="flaticon stroke activity-monitor-1"></span> values
</div>
</div><!-- /.widgetbox -->
<div class="widgetbox widget-team off isotope-item" data-t="2" style="height: 69px; position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(250px, 0px, 0px);">
<div class="widget-head">
<div class="label-new">New</div>
<h6>VT2</h6>
</div>
<div class="member-thumbs">
<div class="member-limiter"></div>
</div>
<div class="widget-overlay">
<span class="flaticon solid battery-charging-3"></span>
</div>
<div class="widget-bar">
<span class="flaticon stroke compose-1"></span> edit
<span class="flaticon stroke activity-monitor-1"></span> values
</div>
</div><!-- /.widgetbox --></div>
</div>

I figured it out. Long story short i think that DOM manipulation on windows was happening just fast enough for the relayout to take effect.
Attached Fixed code.
$listing.isotope('remove', $listing.find('.widgetbox'));
$.ajax({
url: '/xxxx/xxxxxxxxxxxxx',
type: 'POST',
data: {
ta: teamIds,
qty: 5,
ps: scores,
prefix: 'location'
}
}).done(function(response){
var responseobj = JSON.parse(response),
lastScores = $listing.data('scores')
;
$listing.isotope('insert', $(responseobj.data), function(){
$listing.find('.widgetbox').equalHeights(40);
$listing.find('.progress-circle').progressCircle();
$listing.isotope('reLayout');
});
$listing.fadeIn();
$loader.fadeOut();
});