Databases
StackOverflow2013
Postsdbo
POjQuery Isotope - Not working within a responsive/fluid grid
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery Isotope - Not working within a responsive/fluid grid
    primarykey
    data
    text
    <p>I am in the process of building a photoblog which utilises the brilliant Isotope plugin by David DeSandro but I am curently having some difficulty getting the plugin to work as intended within a responsive / fluid grid. </p> <p>www.lewismalpas.co.uk/tumblr (Demo)</p> <p>Each image is wrapped within a div (.item) which has an explicit width of 25%, as the images are flexible this in theory should allow four images to be displayed inline, however at the moment only two are being displayed and I cannot seem to figure out the issue.</p> <pre><code>&lt;script type="text/javascript"&gt; $(document).ready(function(){ //scroll to top of page $("a.top").click(function () { $("body,html").animate({scrollTop: 0}, 800); return false; }); //Isotope settings var $container = $('.images') $container.imagesLoaded( function(){ $container.isotope({ resizable: false, // disable normal resizing masonry: { columnWidth: $container.width() / 4 } }); // update columnWidth on window resize $(window).smartresize(function(){ $container.isotope({ masonry: { columnWidth: $container.width() / 4 } }); }); }); //layout &amp; search options $(".header #layout").hide(); $(".header a.layout").click(function() { $(".header #layout").fadeIn(); $(".header a.fullscreen").click(function() { $("a.layout-option").removeClass("selected"); $(this).addClass("selected"); $("#container").animate({width:"99%"}, function() { $(".images").isotope('reLayout'); }); }); $(".header a.grid").click(function() { $("a.layout-option").removeClass("selected"); $(this).addClass("selected"); $("#container").animate({width:"80%"}, 800); $('#images').isotope({itemSelector:'.item',layoutMode:'masonry'}); }); $(".header a.linear").click(function() { $("a.layout-option").removeClass("selected"); $(this).addClass("selected"); $("#container").animate({width:"80%"}, 800); $('#images').isotope({itemSelector:'.item',layoutMode:'straightDown'}); }); }); $(".header #search").hide(); $(".header a.search").click(function() { $(".header #search").fadeIn(); }); }); //end doc ready &lt;/script&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USkiamlaluno
    1. USLewis Malpas
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. POjQuery Isotope - Not working within a responsive/fluid grid
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POjQuery Isotope - Not working within a responsive/fluid grid
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POjQuery Isotope - Not working within a responsive/fluid grid
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI see 4 images in Chrome.
      singulars
      1. POjQuery Isotope - Not working within a responsive/fluid grid
      1. USRich Bradshaw
    2. COI reduced the width of .item by .5% which seemed to fix a lot of the errors I was experiencing as apparently Isotope was rounding up somewhere which was breaking the layout!
      singulars
      1. POjQuery Isotope - Not working within a responsive/fluid grid
      1. USLewis Malpas
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload