StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHelp with Jquery/Masonry, minor tweak
text
Body
copied!<p>For the life of me, I can;t figure out what the heck is going on. My lack of Jquery knowledge might have something to do with it... </p> <p>Take a look at this: <a href="http://jsfiddle.net/ryanjay/fgNMJ/" rel="nofollow">http://jsfiddle.net/ryanjay/fgNMJ/</a></p> <p>When the page loads, there is major gaps, height-wise, in between each photograph. When you click a photo, and it expands, the photos on the bottom fall back into place. When the photo is clicked again to collapse it, the photos fall into place as they should when the page is loaded. Make sense? </p> <p>Why is there a gap between the photos, height-wise, when the page is loaded? I am assuming it has something to do with (.box img).css() code I have going on... But I just can't figure it out. </p> <p>Here is the code as well. </p> <p>Jquery:</p> <pre><code>$(document).ready(function(){ $('#grid').masonry({ singleMode: false, itemSelector: '.box', resizeable: true, animate: true }); $('.box img').css({ width: '100%', height: 'auto' }); $('.box').click(function(){ if ($(this).is('.expanded')){ restoreBoxes(); } else { $(this) // save original box size .data('size', [ $(this).width(), $(this).height() ]) .animate({ width: 400 }, function(){ $('#grid').masonry(); }); restoreBoxes(); $(this).addClass('expanded'); } function restoreBoxes(){ var len = $('.expanded').length - 1; $('.expanded').each(function(i){ var w = $(this).data('width'); $(this).animate({ width: ( w || '200' ) }, function(){ if (i >= len) { $('#grid').masonry(); } }) .removeClass('expanded'); }); } }); }); </code></pre> <p>CSS: </p> <pre><code>.wrap { border: 0; width: 100%; } .box { float: left; font-size: 11px; width: 200px; margin: 0px; padding: 0px; display: inline; } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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