I've this beautiful design I'd like to code. But I'm struggling with masonry layout of the content section.
There are 500*500px, 250*500, 250*250 blocks.
I tried to use isotope and test out different layout modes, but none seems to fit the design. http://isotope.metafizzy.co/ examples though look much better. oh and my test site is here: http://mac.idev.ge:800/test/
What can I do? Should I roll out my own algorithm, or is there an easy solution? :) maybe I'm using isotope in a wrong way?
The problem with Isotope is that it tries to lay out the items in the order supplied (it allows sorting so assumes order is at least a little important).
You can alter the layout in a few ways.
change the order of your items (based on the layout width),
use a custom layout for Isotope (there is at least one bin-packing based one out there),
write your own custom layout for isotope (I can vouch for this being quite difficult),
or switch to using something like Packery.
Packery does not have the same feature set as Isotope (no sorting or filtering), but may be a better choice for your interface.
Related
Sites like google image search display images of varying width in rows. Apparently, they select which images to group together, and which images to make a bit smaller, in order to achieve a fairly even spacing between the images.
I tried to search online for a library that implements such an algorithm.
I am asking here if anyone knows of such a solution and if not, I could use some pointers on how to write this code myself.
UPDATE: I found photowall using jquery.
this seems to be the answer. I am currently searching for an angular.js directive
There is the library Masonry (the one mplugjan also mentioned). This library is very flexible in the way you can set up a grid. See their options page.
If you want to do it your self, you have roughly two options:
The images have a fixed/max width
The images have a fixed/max height
Google Images give their images a max height, which allows them to creates rows, and position the images inside them.
The other option is to create columns of a fixed with and place the images in these columns. This option, however is a bit harder to implement, because you have to think harder about the order in which the images are placed.
Edit:
After a quick look at Photowall, it seems that Masonry is more flexible. The documentation on the Masonry site show far more examples in mixing various heights/widths.
Here's a weird one that I've been wracking my brain on.
I want to do two things, in order:
Generate a masonry-style layout from a list of divs, imgs, or whatever. These will utilize images but they can be background images, within the divs, or some other method that works. This can be pure CSS or a jquery plugin.
Once the grid has been generated, apply a physics based plugin like '.throwable' to the individual divs/objects. The objects will fall on each other, but overall retain their structure, much like you'd see in Angry Birds or something.
The goal here is to paste in a list of divs, let a jquery plugin or even pure CSS automatically figure out how to align them, and then apply gravity to the masonry grid.
The problem I've run into over and over is that the masonry grid is generated... but then when I apply a physics system to it, the individual objects snap back to a different position. I think masonry wants them as "relative" while the physics system wants them in "absolute"? Not sure...
I have a rough version of my latest attempt up here if anyone wants to get an idea of what I'm attempting: http://cssdeck.com/labs/full/f5dm0zv8
Jasper's reply hinted at the solution, although I'm not sure why things seemed to work this time for me. I had tried multiple javascript/jquery based masonry plugins, and nothing had worked. I ended up trying "http://masonry.desandro.com/methods.html" and it ended up working for me. I thought I had tried this one already - maybe not? Anyways, I have a more or less working example here, but new issues have arisen: http://output.jsbin.com/runewidapi/2/
I am implementing an AngularJS application that has a three-panel main view. The layout is a bit like a mail system, with a navigation bar on the left. The right pane is split in two; when you select something from the navigation bar, it populates the top-right pane, and when you select something there, it populates the bottom-right pane. The panes need to be resizeable and scrollable.
I can see three basic ways to implement this:
Use frames for panes
Use div elements for panes, with JavaScript controls for resizing and scrolling
A hybrid (perhaps divs with JavaScript resizing, but containing iframes with native scrolling)
There is very little info online on using AngularJS with frames, which leads me to think that (1) is not recommended. I'm just a bit worried with (2) that JavaScript resizing and scrolling will be inferior to native controls. In some cases the content may be large. And (3) seems to combine the worst of each approach.
So I'm looking for advice on which approach is likely to work best.
angular ui-router is good option for solving posted issue.
https://github.com/angular-ui/ui-router
for css - there are a lot of different framework, most famous is bootstrap.
or you can craft css by your own hands.
http://getbootstrap.com/
In my opinion its not recommended using frames because breaks generic functions of the browser like sharing urls, navigation between frames, default frameset, etc.
The best solution is using ui router plugin https://github.com/angular-ui/ui-router with nested views https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views. You should check the example at documentation
For Scrollable div you should use css property and for resize it probably would be nice to define a directive
I hope it helps
I'm wanting to rearrange table columns dynamically.
I can do the actual rearrange but for the dragging of the header cells I'm wanting something that feels like jqueryui's sortable elements with the placeholder http://jqueryui.com/demos/sortable/#placeholder (obviously horizontally rather than vertically though)
The problem is that I don't want to use jquery (javascript is fine but jquery is too heavy), does anyone know of something more lightweight that does the same thing?
Anything that can handle the complexities of drag-and-drop is going to be big. JavaScript libraries usually try to solve simple things, like DOM selectors and AJAX, then other UI functionality, like sliders, animation and drag-drop are added on top of these.
So finding small a library that does the drag-and-drop alone is unlikely. There are alternatives, such as Scriptaculous, but you'll find they aren't smaller.
Keep in mind that jQuery isn't all that big - smaller than many images you'd use on your site. It is also cached by the browser, so it doesn't have to be downloaded with every page load.
Check out http://microjs.com/ Type in what you need and it will help you narrow down a list of libraries.
Take a look at this:
http://www.switchonthecode.com/sites/default/files/99/source/SOTC-DnDLists.js
It's not horizontal but I'm sure it can be worked with...
[update: Indeed, minor modifications made this work like a charm - code will follow]
I'm looking to utilize jQuery to handle a few very common requests we get for data tables of varying sizes: scrolling, sorting, and dynamic filtering.
I've handled scrolling in the past by having two separate tables with fixed width columns, along with associated div containers for the "actual" scrolling. However, this method doesn't work with any of the jQuery-based sorting table extensions that I've come across (tablesorter being my favorite so far) as they want everything in a single table.
For filtering, they're requesting something akin to how Excel and SharePoint lists do it (basically all column values are listed in a dropdown, allowing the user to select/deselect them). I haven't seen anything like that yet, although it sounds possible.
One other related nice-to-have feature would be the ability to "freeze" a column for horizontal scrolling.
Ideally I'd like an existing extenstion, but if none are out there I'd also appreciate suggestions from any jQuery gurus on how to best implement it. My current thoughts are to dive into tablesorter and extend/update it as necessary.
To hopefully keep things focused, paging is not an option (along with anything server based, for that matter).
Update:
I do appreciate the answers so far, but none of the options given so far touch on the filtering aspect at all (that said, I must admit that jqGrid looks very good for some future projects I have). In the meantime I'll work on a custom filtering solution; if it works out I'll update again.
I came across this question as I was searching for a sortable table plugin myself; I really wasn't impressed with any of the suggested widgets, but later I discovered DataTables, and I was quite impressed. I recommend checking it out.
Maybe this excellent plug-in could do it:
Demo page
It's called jQGrid, here is the project page:
http://plugins.jquery.com/project/jqGrid
I would encourage you to try out the Flexigrid.
It has a lot of great features and I personally think it looks more professional than the jqGrid.
It doesn't have some of the features that you asking for, but I think it could be a good start. It would be great if you could work on adding some of those features to the code base.
If you are coding in c#, then I posted a blog entry about how to use LINQ to Reflection to bind JSON to the Flexigrid... if you are using another language there are other examples you can find on Flexigrid's Website & Google Group page.
a simple jQuery Scrollable Table Plugin
As mentioned in my update, I ended up using a custom filtering extension (closed source, unfortunately). I've recently started using SlickGrid and it's now my go-to grid.
I'd like to add the Laravel flavored DataTables (GitHub, jquery DataTables API) - perfect if you already work with PHP/Laravel.
Extra, koalyptus/TableFilter another custom filter table (actually, my fav).