Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Overlapping items on certain browsers

We're using Isotope on this page https://www.distilled.net/resources/

On some Browsers / OS, this happens in the lower section: https://www.distilled.net/uploads/screen_shot_2014-01-09_at_11.58.54.png

It occurs consistently on Firefox and Safari on OSX, Chrome on Android, and intermitently on FF and Chrome on Linux and Windows (FF more regularly) - a few refreshes should reproduce it.

Our front end developer is on holiday for the next few weeks so we're reaching out for help on here with $50 reward.

This is not affecting the top section that contains Brandopolis, or the next section (with two horizontal boxes and one vertical, currently containing posts from Jan 8th 7th and 4th). It only seems to happen with the 3 column area below that.

Our developer was hacking around to get the vertical dividing bars between these three columns to work and I am guessing this may be what is causing the issue. Or it may be somethig else to do with our implementation.

Our backend developers are around to implement the fix (we're not particularly great at the front end side of things but will try help where we can).

Please feel free to ask questions, will answer where we can.

Thank you!

User Gravatar

twneville

Posted Jan 9 2014 6:02 UTC

$50


  • Assigned To twneville
  • Solved
  • isotope
  • 951 Views

5 Replies


it seems this happens only when the refresh is fresh

so at first load it happens, but on another load it doesn't..

this suggests that imageLoaded might not be used.

can you show the code that does the isotope here?

it should have something like

$container.imagesLoaded(function(){
 $container.isotope(...)
});
User Gravatar

guyisra

Posted Jan 9 2014 6:41 UTC

The problem relates to the 'Isotope' script from here: http://isotope.metafizzy.co/ (<script type="text/javascript" src="//d1oylnfl75uzl6.cloudfront.net/static/CACHE/js/575f24e8d032.js"></script>)

This is positioning those columns absolutely, and it's failing to position them correctly, which is bringing them on top of other content.

Honestly this should be reimplemented without using JavaScript, as it shouldn't be a problem to do with straight CSS and some media queries to ensure it's still responsive.

Remove the script entirely, and it's initialisation code underneath.

Then let's add float: left; to .contentPage_feed .feed_item

Then let's add something like:

.contentPage_feed .feed_item:nth-child(4n) { clear: both; }

Then just adjust that declaration in the media queries to switch to your single column or two column grid instead of the three used for the main view.

To make the grey borders line up a little better, perhaps set a min-height on feed_items as well (or even a fixed height).

-- update - Alternatively, yes, it seems like the root cause of why that script isn't positioning properly is due to it not being initialised after the images have loaded. I would still reimplement in CSS though!

User Gravatar

MarcFowler

Posted Jan 9 2014 6:49 UTC

@guyisra - thanks, here you go:

$(function(){ // Isotope init - See http://isotope.metafizzy.co/ var $container = $('#contentPage_feed-secondary').find('ul'); $container.isotope({ // options animationOptions: { duration: 750, // easing: 'linear', queue: false }, itemSelector: '.feed_item', transformsEnabled: false });

});

@MarcFowler - we want to continue to use Isotope, it fits our needs and plans for future of this page.

User Gravatar

twneville

Posted Jan 9 2014 7:29 UTC

ok so just wrap it in

    var $container = $('#contentPage_feed-secondary').find('ul');
        $container.imagesLoaded(function(){
        //your isotope code
$container.isotope({ // options animationOptions: { duration: 750, // easing: 'linear', queue: false }, itemSelector: '.feed_item', transformsEnabled: false });
        });

tell me if that works (not that here the commenting screwed up a little, so make sure to use your code)

User Gravatar

guyisra

Posted Jan 9 2014 7:33 UTC

So $container.imagesLoaded didn't seem to exist, but the alternative suggestion on the Isotope help page to wrap in $(window).load worked. So it's all working fine now. Your answer was not the direct solution but you helped us debug the issue - I've marked this issue as the correct answer. How do we send you a reward?

User Gravatar

twneville

Posted Jan 9 2014 8:29 UTC

Solution

This didn't solve your task? Get your own custom solution.

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions