Equalize.js now equalizes height or width of child elements | Hacker News Reader

Equalize.js now equalizes height or width of child elements

github.com

37 pointstsvensen16 comments

I've found the best way of equalizing heights/widths is just using display:table/table-row/table-cell. It handles resizing (responsiveness) and doesn't require any JavaScript.

Can you elaborate or share a link? This sounds great.

Read this: http://www.vanseodesign.com/css/tables/

...isn't also basically using a table?

So you're back to your layout being entirely dependent on your markup? wasn't this what CSS layouts were supposed to get away from?

Well that's what CSS was supposed to do, but since it never gave us a way of equalizing heights except for tables...

Then tables are obviously the way to go.

Resorting to JavaScript hacks when HTML/CSS provides you with a solution, despite it being "non-semantic" in some people's eyes, seems unnecessary. (Of course, there are cases where tables won't work either, and JS is your only option.)

As opposed to your layout being entirely dependent on JavaScript? I'm not sure I see the difference between requiring JavaScript code to manipulate the layout versus using CSS to do the same. Why is one better/worse than the other?

I think 2013 will be the year where markup based layout sees a comeback. No-one is using CSS the way it was intended to anyway.

As with <table> markup, wouldn't that prevent content from reflowing? I might be missing something, but normally when I do this, I want the number of elements per row to vary depending on what fits, whether that's 10 elements on a large screen or 3 on a phone. Hardcoding the assumption that there will always be X per row (say, 5) seems to miss the point.

You can use media queries to fix this. It's not a perfect solution, but it's pretty decent.

Yes, that's the correct CSS way. Besides, this plugin does not work with box-sizing border-box. Which is unacceptable at (almost) 2013.

But if in need to do this kind of things with Javascript, please take a look at https://github.com/atirip/jquery.pp This repo is not solely of dimensions, but you will find many useful and normalized (all your tags may even be mixed of content-box and border-box) dimension methods inside, both to measure and to set dimensions.

sigh... Yet another simple plugin which needs jQuery for something which could be done in vanilla JS and still need less LOC.

Tim: A better approach would be to iterate through all children and find the maximum using elem.offset(Height|Width).

Then create a new <style> in the head for your plugin if it doesn't exist and append a new rule like:

  style.innerHTML += '#' + (elem.id || (elem.id = 'eq' + (Date.now() % 1e9))) + '>*{' + equalize + ':' + val + '}';

If you don't like this you could still use elem.style.(width|height) (and maybe even detach the container beforehand to prevent unnecessary reflows), which will be faster and doesn't require a 90KB lib.

Good call on a non-js version, this was abstracted from some code for a larger project. When I find the time I'll update the repo with a branch for a non-jQuery version, but there are plenty of simple scripts out there.

Also, jQuery is 32KB minified and gzip'd AND that's if it's not already cached. Using the Google CDN helps as well, chances are you may not even be downloading it. Not looking to get into a jQuery vs. js debate.

"I don't always write jQuery, but when I do, I use Javascript"

I know that. In fact I use jQuery in almost every website I'm writing, because I need backwards compatibility with older browsers. But since I started working on a certain website which only supports IE9, I'm pretty much only using jQuery for $.fn.animation. I just feel like it's a huge waste of computing time. Apart from that I think it's important to write "cross-library" plugins.

flexbox

Flexbox is a great solution, but only partially supported as of right now for the latest releases of the major browsers (IE9 and below, no support):

http://caniuse.com/#feat=flexbox

Great article on the latest version of flexbox: http://github.com/doctyper/flexie

So flexbox will work, but it is a bit unstable right now.

Reply on news.ycombinator.com