yconst / freetile Goto Github PK

Hello Yannis, first of all, let me thank you for such a great and very helpful plugin.

I'm trying to build a grid of elements (in my case with fixed width), with some margins between those elements. The technique that I use, implies a negative margin for elements container (to normalize positions for first element in each row) and a positive margin for elements in a grid.

Now on initial placement I have some miscalculated position for elements but after any following reflows (e.g. window resize) position recalculates more accurate.

Here is an example: http://jsfiddle.net/S9eBE/

Thank you!

Can this framework be used with video?

Hi,

I love using Freetile, but I really want all my images to stack without any padding or margin between the tiles. I've been able to remove the side margins, but I have about a 6px space at the bottom of each tile. I would be okay with a 1px space (which appears in your demos, I think)...but 6px is too big.

Is there something I am missing where I can control this? Any advice would help.

Thanks!

Hi
I'm currently using your plugin on a wordpress theme, but I am having trouble in FireFox for mac. If you go to this link & click "Load more" button you will notice that the content pull in sits on top of the current content & doesn't automatically fit in until you resize the browser.

on the success of the ajax call I run this code:

    jQuery('.freetile').freetile({
        animate: true,
        containerAnimate: true,
        selector: 'article',
        elementDelay: 30
    });

Any help will be greatly appreciated

hi there

first of all - awesome plugin! second.. is there any way to horizontal center the used container?

thanks in advance
oliver

1. Resize window with mouse to low resolution - ok - elements moved
2. them click on the browser button (full screen button near close button ) - no resizing time to time!

ps. first time after manual window resize it may work, but second one not.

Hello,
I do like Freetile very much, but as the content of my site grows, it is getting harder to keep it clear and I would like to append additional items only on page scroll or by clicking a button. I've read the few threads I could find but have not been able so far to get it to work using contentToAppend: 'whateveryourselectoris'
Could you please provide a working example?

Somehow, when used with Bootstrap 3.1, tiles seems to be measured wrong. While the page is loading, everything seems to be nice, but when everything is finished, tiles are drifting to wrong places. Something to do with % instead of px?

I observe strange issues on a site where I am implementing Freetile. Context: a responsive layout, where #freetile-container contains several blocks, most of which have a percentage-set width of 25%, and a few have 50%.

If I load freetile with this:

$('#freetile-container').freetile({ selector: '.archive-block', });

what I see is:

• upon first load, Freetile gets the positions wrong: it looks like it would add about 20px of right margin to every block, which obviously breaks the intended 4-column layout.
• if I trigger a reload of Freetile, by resizing the browser window, or by opening the Firebug inspector, it gets corrected and everything jumps into the right place.

So by having this in my scripts.js file (a double call to Freetile), the end result looks good:

$('#freetile-container').freetile({ selector: '.archive-block', }); $('#freetile-container').freetile({ animate: true, elementDelay: 5, selector: '.archive-block', });

However, I notice that this has a strange side-effect on elements inside the freetile area: their src gets dynamically replaced by a 1x1 white pixel, which looks like src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==" in the inspector.

This image replacement doesn't occur when freetile is loaded once, but then I get an incorrect layout. Very mysterious...

If there are more than one Freetile containers on the page, all of them will get the same height value, no matter how much content they hold.

Furthermore, the height value Freetile applies on all containers seems to be approximately the sum of heights of the containers before Freetile's layout changes.

Apart from that, the elements seem to align nicely inside their containers.

http://triniscene.com/tsv7/caribbean/events/

I'm using freetile here on a dynamic loading content. the last 2 tiles are sooooo outta wack...what gives? a bug?

Hey, I would like to remove some tiles (actually just hide them).
However when I set elements to display: none; There position is filled with empty space. It would be very nice if you could add a method to hide and show elements, or to refresh the order and to ignore items with a special class or display:none;

$( document ).ready( function() {
    $( '#my-container' ).freetile();

    $( '#some-button' ).on( 'click', function( event ) {
        $( '#my-container' ).empty();
        $( '#my-container' ).freetile({
            callback: function() { alert( 'I am never called back!!!' ); }
        });
    });
});

Additionally, the css height property of the container isn't updated.

When trying to append an element into the grid, the following error is thrown:
Uncaught TypeError: Object {selector} has no method 'filter'.

I guess the resize event isn't being triggered when rotating an iPad which means retiling doesn't occur.

Is there a way (or a feature enhancement) to have Freetile consider the width of previous elements and position an element under one with the same or similar width? It would need to take into account whether doing so would could y-axis overflow (which could be okay if there was no other choice). If positioning under another similar-width element would cause y-axis overflow, it should fall back to tightest packing positioning.

In the screen shot below, it's more visually appealing if the "Historical Registrations" card falls below the "Registrations" card. Let me know if there's some existing option I'm missing to do this.

Thanks,
Sam

I'm trying to use freetile with iframe but i have the problem with the dimensions of the iframe so when the algorithm run it have wrong dimensions for iframe. it's posible to use it with iframe?

Love your work here - however using top/left isn't always the best for graphics performance. Any plans to update with a flag in the options to set animations to use GPU-enabled css transforms?

Thanks!

Hi, after having large gaps in masonry layout, I've been looking into alternatives, freetile works really well apart from Firefox for Mac and Safari for mac when I resize the browser...

EDIT - its ok, I can resolve with CSS

We are trying to use freetile to create Sticker sheets of svg images.
It doesn't matter if the svgs are rotated, since the goal is to print them on the smallest paper possible without shrinking the content.

Does freetile support this?

In some cases retiling is not triggered when the browsers is maximised. I received reports that it doesn't work with Firefox on OSX, but it works on Firefox on Linux. It also doesn't work with Chrome on Linux.

is it necessary to change my code to trigger retiling manually when the window is maximised?

If you add elements to a container, then empty it, the next time you dynamically add a new element, it places it in the position of the last add before the clear - as if the ghosts of the other elements are still there.
I patched the lines 462 onwards to read:
// If container is empty, set height to zero, call callback and return.
if (!o.ElementsCount)
{
container.data("FreetilePos", null); //new line added here by brandpeter
if (typeof(o.callback == "function"))
which fixed it.

Feature request:
a) There's no option to select direction , say LTR or RTL, so that in cases, the column chosen where the new brick is added can be directed accordingly.
b) The algorithm should always check if the brick is the LAST brick. And if it is, with proper calculations, if first column is not much longer, the last brick should be placed in there (first column)

For example if we have a gallery of images, and we want a certain position / order, we could set a initial value of the width for example and then the content would get more or less size.
Example:

$('#container').freetile({
    selector: '.thumbs',
    size: 1440px
});

and then if the window had like 1000px the content would have like 90%

the layout that was made for the 1440px was this one

and now what happens is that the image just lost the wanted layout

Any help?

This could greatly reduce the time it takes for elements to be laid out. Right now I'm having to convert something like a <span class="img-placeholder" data-src="some.gif"> to an img tag when my freetile callback is called.

New version of freetile seems to be using images loaded by default. Its a curse.
Until the images are loaded, the grid is scattered wildly, looks ugly, same case with lazy loading, the response data is retrieved and rendered, but they are positioned to the top of the grid overlapping existing grid bricks until the images are loaded.

The link to the demo in the README doesn't work

It would be super convenient if Freetile.js hadnpm or bower packages. I tend to avoid libraries that don't, but this one is so great.