Develop Reference

Semantic UI visibility + Masonry infinite scroll layout

I'm trying to create an infinite scrolling Masonry layout in the Semantic UI framework, using the built-in visibility function.
Everything seems to be working except getting Masonry to re-layout everything once new items are added.
I've made a jsfiddle: https://jsfiddle.net/erland/pdb5j09o/
As far as I can tell from the Masonry docs, all I should have to do is call $grid.masonry('layout'); after adding the new item, right?
What am I missing here? Should I not be using imagesLoaded in combo? Should I be working in Masonry's append instead?
Thanks in advance!

OK, the answer is pretty obvious, I basically answered myself at the end of the question - you need to be using the Masonry append function instead of layout:
$masonrygrid.append( $content )
.masonry( 'appended', $content );
New fiddle showing it working: https://jsfiddle.net/erland/jv0o6pue/
But now that I've sorted that out, what's the best way to add a whole row (ie. 4 x $content) on each visibility trigger?

Masonry leaving empty gap

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'
});

Wait until jQuery waterfall / masonry has finished loading elements before showing the containing div

i understand how to only show a div once the page has finished loading.
But cant get jQuery waterfall working correctly with this method.
So currently, jQuery waterfall orders some blog posts which are displayed as individual divs and each have an image as a 'thumbnail'. There are 16 of these divs displayed inside the container and each take up 1/16th of the space in a masonry grid.
However currently, when the page is loading, the divs are loaded as full width and then it seems like waterfall works to make them fit into the grid. This looks un professional in my eyes.
So the idea was, whilst the waterfall function is working its magic, simply display a loading icon and then once complete the div will be shown.
I have set the div as
display: none
And this is what is used for the jQuery waterfall:
$(window).load(function(){
$('#buildcontainer').waterfall({
colMinWidth: 250,
defaultContainerWidth: 1000,
autoresize: true
});
$("#buildcontainer").show();
});
In a sense, this works okay and the div is only shown once the page has finished loading.
However the actual waterfall grid function doesn't work now. The divs are simply loaded as they would be if i wasnt using waterfall.
Anyone have any ideas?

Sorted, simply has to fadeIn / show the containing div BEFORE waterfall was used on it!

The examples for waterfall suggest using document.ready:
$(document).ready(function(){
$('#buildcontainer').waterfall({
colMinWidth: 250,
defaultContainerWidth: 1000,
autoresize: true
});
});

Good Plugin for Freeze column and fixed header in Table

I am looking for some good plugin for Freeze column and fixed header in Table
I am currently using GridViewScroll
http://gridviewscroll.aspcity.idv.tw/
It doesn't support Spanning of rows ans columns.
I would like to have one which supports that.
Please make some good suggestions.
Thanks in Advance.

You can try this jsfiddle..
It is not a plugin and not written by me..I used it so may be it will be helpful to you.. You can edit the code to get desired results..
Basic functionality can be controlled through this:
$('#cTable').cTable({
width: 800,
height: 150,
fCols: 1, //Number of columns to be fixed
fRows: 1 // Number of rows to fixed
});

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