Menu
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">
<a href="#" class="btn-more">Read More</a>
<a href="#" class="btn-less">Read Less</a>
</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">
<a href="#" class="btn-more">Read More</a>
<a href="#" class="btn-less">Read Less</a>
</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">
<a href="#" class="btn-more">Read More</a>
<a href="#" class="btn-less">Read Less</a>
</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">
<a href="#" class="btn-more">Read More</a>
<a href="#" class="btn-less">Read Less</a>
</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">
<a href="#" class="btn-more">Read More</a>
<a href="#" class="btn-less">Read Less</a>
</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><a href="#" class="text-capitalize">My Team</a></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">
<a href="#" class="primary turn-off"><span class="flaticon stroke logout-1"></span><span class="flaticon solid battery-charging-3"></span></a>
<a href="/modal/editteam/1" data-popup=""><span class="flaticon stroke compose-1"></span> edit</a>
<a href="/culture/teams/1"><span class="flaticon stroke activity-monitor-1"></span> values</a>
</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><a href="#" class="text-capitalize">VT2</a></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">
<a href="/modal/editteam/2" data-popup=""><span class="flaticon stroke compose-1"></span> edit</a>
<a href="/culture/teams/2"><span class="flaticon stroke activity-monitor-1"></span> values</a>
</div>
</div><!-- /.widgetbox --></div>
</div>
950
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();
});
123
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With