0

I'm thinking of redoing my homepage again and thought to use Isotope to make it spiffier. I've experimented with Isotope in the past and was frustrated by not being able to make it work like I wanted. This time I'm trying to do something simpler. I made a super simple example to illustrate my latest issue. Images do not show in Safari and some other browsers unless you resize the browser window.

Below is a sample of my code, the divs are written to the screen with PHP. I might switch to UL and LI but since the HTML is there just not being displayed until the browser window is resized... Is there some JavaScript force redraw/reload I should be doing, there was nothing about that in the Isotope documentation that I've encountered and the demos work in Safari on my MacBook Pro.

I tried a few other browsers, it works as designed in IE8, but Firefox on my work machine seems to react the same as Safari.

<div id="contents">
<h1>Making the Internet better since 1995</h1>
<!-- Masonry test code -->
<div id="container">
    <div class="item"><a href="http://www.flickr.com/photos/mminghella71/9440123324/in/pool-341554@N24" title="Bolt Action Heer Infantry Squad"><img src="http://farm6.staticflickr.com/5333/9440123324_0e9f4db858_s.jpg" alt="Bolt Action Heer Infantry Squad" border="0" /></a></div>
</div>
<script>
$(function(){

  var $container = $('#container');

  $container.isotope({
    itemSelector: '.item',
    masonry: {
        columnWidth: 75
    }
   });

 });
 </script>
6
  • I haven't spent much time on this problem, but I decided to check it on my work box and it works in IE8 which is still the default browser here, but it didn't work on Firefox on Windows. What have done that selectively breaks isotope?
    – Muskie
    Aug 6, 2013 at 19:08
  • I made an even more minimum example as Safari isn't generating any errors, it just isn't displaying the images. With nothing but an H1 tag it works. Something in my other CSS perhaps... muschamp.ca/blankExample.php, the mistake isn't in the above code.
    – Muskie
    Aug 11, 2013 at 16:22
  • It appears the images appear in Safari when I resize, but if I just reload the images are not visible. Disappointing...
    – Muskie
    Aug 11, 2013 at 16:26
  • It isn't the doctype. I don't know why Safari doesn't render the images and thus the isotope container on my website, but I tried changing to the minimalist doctype declaration used in the examples <!doctype html> but it made no difference I still have to resize the Safari browser window to get my content.
    – Muskie
    Aug 11, 2013 at 17:06
  • I've tried a bunch more things, including switching to masonryHorizontal mode, using rowHeight, adding white space above below, text above below, it doesn't work until I resize the browser window in Safari.
    – Muskie
    Aug 12, 2013 at 3:33

2 Answers 2

2

Have you tried putting your function into Windows.load?

$(window).on('load', function () {
var $container = $('#container');

  $container.isotope({
    itemSelector: '.item',
    masonry: {
        columnWidth: 75
    }
   });
});
6
  • I kinda moved on, understanding it won't work perfectly in every browser. But I can try this.
    – Muskie
    Sep 18, 2013 at 18:48
  • I made your change, it made things worse in Safari. Now not only doesn't it lay out correctly, it doesn't lay out correctly when you resize things either...
    – Muskie
    Sep 21, 2013 at 23:23
  • I think speed is a factor, pulling the images from a server other than mine seems to be part of the issue. Your javascript change definitely didn't help, isotope is pretty clever, but it needs modern browsers and apparently a fast Internet connection if you're going to pull and layout a bunch of images.
    – Muskie
    Sep 26, 2013 at 22:25
  • So, I ended up looking at this again and have some more idea's, I'll update the answer
    – Evonet
    Sep 27, 2013 at 0:55
  • I fixed my homepage (www.muschamp.ca) today at least in WebKit based browser the answer was to use PHP to getimagesize(). Isotope / masonry is supposed to work even without being given an images width and height, but it definitely works better when given image width and height. Now my homepage loads slower so I also fetch less images, but it consistently renders as designed in Google Chrome, Safari, and Opera on my MacBook Pro. I'll test more browsers tomorrow at work.
    – Muskie
    Nov 4, 2013 at 1:06
0

I've moved on. I have everything working how I like on www.muschamp.ca now. I didn't really make any changes to Isotope or the JavaScript / CSS though I tried many. The big change I made which finally solved this problem was to use PHP to determine the image's height and width. The Isotope documentation says it will work without this, but in my experience it works far better if you give the JavaScript accurate image dimensions.

I'm not sure how much of a performance hit I take using getimagesize() http://php.net/manual/en/function.getimagesize.php but adding a call to that before writing out my image tag(s) results in perfect rendering every time. I fetch slightly fewer images / RSS feeds as a compromise.

Hopefully my trial and error and simple demo helps some people.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.