yconst / freetile Goto Github PK
View Code? Open in Web Editor NEWFreetile jQuery layout plugin
Freetile jQuery layout plugin
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;
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.
I guess the resize event isn't being triggered when rotating an iPad which means retiling doesn't occur.
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?
$( 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.
Can this framework be used with video?
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
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?
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:
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...
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)
When trying to append an element into the grid, the following error is thrown:
Uncaught TypeError: Object {selector} has no method 'filter'.
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.
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
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!
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?
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
The link to the demo in the README doesn't work
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!
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?
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?
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.
hi there
first of all - awesome plugin! second.. is there any way to horizontal center the used container?
thanks in advance
oliver
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!
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.
ps. first time after manual window resize it may work, but second one not.
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.
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.