Masonry leaving empty gap - javascript

I am having a problem with Masonry and struggling to understand why it's happening.
Basically, I have a 4 column grid of items.
When the 3rd item is bigger than the rest (3x bigger = 75% width of container), masonry is unable to fill that gap.
I have created a jsfiddle to demonstrate the issue:
http://jsfiddle.net/7ZVb7/2814/
congole.log('Please check jsFiddle');
Has anyone come across this before?
Thanks in advance

The divs are arranged in the same order. To fill the gap you require 4 divs before your "bigger-div" (excluding the one with class "sizer").
<div class="item">19</div><!-- Just Added this -->
http://jsfiddle.net/u7avyr2u/
EDIT: My reasoning was wrong. But the solution works...
You first div is not in the result... I don't know if this is intentional.
You don't need sizer class if the only reason for it is to pass to Masonry.
changing the class of first div from sizer to item and changing the following code will also solve the problem
// Init Masonry
$('#container').masonry({
itemSelector: '.item',
columnWidth: '.item'
});
Potential Reason: This might be a bug in their script. I tried different variation of column-width:total-width ratio. It seems to only fill the gaps on previous row, for columns that are not used-up in the current row.
This will give you a better idea:
http://jsfiddle.net/7ZVb7/2815/
So to get the layout right. You need to have X number of divs before your bigger cell, where X*columnwidth = width-of-bigger-cell

The solution I found was to use Packery!
http://jsfiddle.net/7ZVb7/2816/
$('#container').packery({
itemSelector: '.item',
columnWidth: '.sizer'
});

Related

JS fadeIn & BootStrap | issue auto calculate left % margin

First, have a look there and click on the switch (Incoming/Right Now): https://ilovesubiaco.com.au/events-search/
As you can see my switch is working, but on my "Right Now" events, my Tiles are stacking up on each other.
The reason is that my elements.style for the main div of each (col-lg-3 col-sm-4 col-xs-12 masonery_item event-now-tile) is not calculating the left properly as it should, probably because my tiles are not displayed when my html is loaded.
I ran some test trying to remove the first "fadeOut(0)" to see if I could tweak it.
In that case, my tiles have the right % left per element but the issue is that my tiles are still taking up white space after display none.
I also tried to reload my div with the JS ".load" but it doesn't look good so I may not know how to use it properly.
How do I force the BootStrap library to recalculate my div Left:%; space when I switch for the first time?
Here is my JS:
jQuery(document).ready(function(){
$(".event-now-tile").fadeOut(0);
$('#event-inc-now-switch').on('switchChange.bootstrapSwitch', function (e, data) {
var state=$(this).bootstrapSwitch('state');//returns true or false
if(state){
$(".event-now-tile").fadeOut(500);
$(".event-inc-tile").fadeIn(500);
}else{
$(".event-inc-tile").fadeOut(500);
$(".event-now-tile").fadeIn(500);
}
});
});
Thanks !!
The solution was pretty simple, replace the position of my tile
.event-now-tile{
position:relative !important;
}
It's the way display is set with the fades with jQuery. Any dives which have a certain %value are stacked on each other if the display of them is set to Absolute.
I have been helped by #Davidkamer on the JS chat for this answer. Thanks to him!

Fit fixed size items inside a fixed size parent and leave out items that do not fit

I have a fixed size container and a list of items with a fixed size (each item can have a different fixed size). I need to be able to fit a maximum amount of items inside the fixed size container and leave out those that do not fit.
This is what I have so far:
I have tried using Isotope, which sort-of kind-of does the job when it comes to using as much space as possible, but it fits everything in it, changing the container size, which is not the desired end result.
In an ideal world
I would like to know how to get a list of items in a array that do not fit, so I could remove them from the container by looping over that array and also show items that did not fit below the container itself. All help is appreciated.
So far I have tried the following:
Remove items that start clipping the container
$('.grillitem', '.grill').filter(function() {
return $('.grillitem').offset().top + $('.grillitem').height() < $(this).offset().top + $(this).height();
}).hide();
This however does not work if items are inline-block or block, but float:left;. Which means I will not be able to use this in a way that I could maximize space usage.
Using Isotope to maximize space usage
var grid = document.querySelector('.grill');
var iso = new Isotope( grid, {
// options...
itemSelector: '.grillitem',
percentPosition: true,
masonry: {
// set to the element
columnWidth: '.grillitem'
}
});
This does, sort-of maximize the space usage. However it does not respect the container height and overwrites that (even when I set the !important flag in CSS for container height) and I found no way to exclude items that do not fit in its documentation. I was hoping to combine the two ways of doing things above, but my way of excluding items that do not fit does not work with items that are position:absolute, which Isotope makes them be.
In other words, I'm completely lost.

Isotope masonry, not working correctly

I'm using Isotope (http://isotope.metafizzy.co). Testing the reLayout method by using the example provided here (http://isotope.metafizzy.co/demos/relayout.html), copied the css, js to (http://punkbit.com/webzine/isotope.html) but when I click in the first element all other elements go to the first column. I wonder why this happens ?
If we do the same in the official example, it works properly, apparently!
I'd like to toggle a class in the first element and by doing that, having the other elements take the vertical space and positioned properly. I tried to change the width of the container, etc but no success!
I've also got the same issue happening with Masonry:
http://codepen.io/anon/pen/BKAdH
If clicking in the first element, it won't work. All elements will be placed in the first column.
Also tried different layout modes etc without success
Sorry,
I've found the answer:
http://punkbit.com/webzine/isotope2.html
The property "columnWidth" needs to be set.
For Masonry:
http://codepen.io/helderoliveira/pen/gwvjA

2 column grid layout with masonry

I am trying to build a 2 column grid layout with masonry, but when I try using masonry they layout turns into this one column grid.
I think I may be using it wrong. I have been reading through the documentation, but don't know what else to do? To me, it seems like this code should cause they layout I am trying to achieve.
Here is the layout I am trying to achieve:
Here is my page with masonry: https://googledrive.com/host/0BwJVaMrY8QdcVDBweWk2UXlfTVE/KE%20copy.html
And here is the page without masonry: https://googledrive.com/host/0BwJVaMrY8QdcVDBweWk2UXlfTVE/KE.html
All I am trying to do is bring that first column up.
I would greatly appreciate any and all help!
Ok I download the html and tested it.
Please remove the margin-left of the items.
.dataCard { margin-left:3.2%; } /*Without this*/
And start the mansonary like so:
$('#main').masonry({
itemSelector: '.dataCard',
gutter: 20
});
This were the only changes done.
Here is an image of the result.

Animating a table with jQuery

I asked a question yesterday on here and got some awsome help, but I need more help concerning more or less the same, only a bit different.
This is my old thread.
So ye, I made this and the idea is that you can customize the table to see it the way you want. for now its possible to drag the columns to change the order and its possible to order the columns on alphabet or high/low. Since I got help here, its now also possible to hide the columns.
Now I want to make the hiding process a bit more smooth, since its hard to see if something is hidden after a click if you use no animation. I use .fadeOut(200); now, but when the fading is done the column just 'jumps' to fill the gap, is it possible to animate this in some sort?
Edit: After thinking some more, I thought that I could just loop a -1px width untill the element's width is 1px and then just hide it, but for some reason that wont work, the table doesnt respond to .width(xxx); or .css('width', 'xxx');. It does change the value, but the td keeps the same width.
This is somewhat of a workaround, and there might be a better solution, but here it is anyway:
Animate the opacity to 0.0. Fadeout does the same, but it also sets display:none after completely fading out. It is the display:none that causes the adjacent column to jump and fill in the gap.
Animating will cause your hidden div to remain there. Now that it is no longer visible, animate its width to 0. This will cause the adjacent div to smoothly take over its place.
Once width is 0, set display:none
Here's a working sample I whipped up. Adjust accordingly to animate width: http://jsfiddle.net/x7BEv/8/
Here's how the magic happens:
$(document).ready(function(){
$('#button').click(function(){
$('#upper').animate({opacity:0.0},'slow').animate({height:'0px'},'slow',allDone);
});
});
function allDone()
{
$('#upper').hide();
}
I'm not sure how important the allDone() method is. You could probably do away with it.
you must use jqgrid
or just for sorting you can use tablesorter which is very easy to implement

Categories

Resources