{"id":15681511,"url":"https://github.com/stevenvachon/jquery.wrecker","last_synced_at":"2025-03-11T03:31:03.243Z","repository":{"id":6674786,"uuid":"7919649","full_name":"stevenvachon/jquery.wrecker","owner":"stevenvachon","description":"wRECkeR: Responsive Equal-Height Columns and Rows","archived":false,"fork":false,"pushed_at":"2025-02-22T22:09:55.000Z","size":154,"stargazers_count":9,"open_issues_count":1,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-22T22:25:54.311Z","etag":null,"topics":["grid-layout","jquery","responsive-grid","responsive-layout","responsive-table","table"],"latest_commit_sha":null,"homepage":"http://stevenvachon.github.io/jquery.wrecker/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stevenvachon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-01-30T17:26:54.000Z","updated_at":"2025-02-22T22:10:23.000Z","dependencies_parsed_at":"2022-07-31T03:48:47.584Z","dependency_job_id":null,"html_url":"https://github.com/stevenvachon/jquery.wrecker","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stevenvachon%2Fjquery.wrecker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stevenvachon%2Fjquery.wrecker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stevenvachon%2Fjquery.wrecker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stevenvachon%2Fjquery.wrecker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stevenvachon","download_url":"https://codeload.github.com/stevenvachon/jquery.wrecker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242967641,"owners_count":20214280,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["grid-layout","jquery","responsive-grid","responsive-layout","responsive-table","table"],"created_at":"2024-10-03T16:55:45.096Z","updated_at":"2025-03-11T03:31:03.227Z","avatar_url":"https://github.com/stevenvachon.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jquery.wRECkeR\n\u003e wRECkeR: Responsive Equal-Height Columns and Rows\n\n\n## THIS LIBRARY IS OBSOLETE!\nUnless you're supporting _extremely_ old browsers, you should instead be using [flexbox](https://developer.mozilla.org/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox).\n\n---\n\nWrecker is a dynamic layout plugin for jQuery that achieves equal-height rows in a grid layout. Similar to a `float` layout in that excess \"cells\" are moved to the following \"row\". However, unlike, in that columns line up vertically and the cells of each row are equal in height based on their contents, just like a `\u003ctable\u003e`. No static heights required.\n\nCheck out the [simple demo](https://stevenvachon.github.io/jquery.wrecker/simple.html) and the [advanced demo](https://stevenvachon.github.io/jquery.wrecker/advanced.html). Note: they have not been tested with Internet Explorer™ 7 and below.\n\n\n## Usage\n\nStart with a `float` layout.\n\n```html\n\u003cdiv id=\"container\"\u003e\n  \u003cdiv class=\"item\"\u003e…\u003c/div\u003e\n  \u003cdiv class=\"item\"\u003e…\u003c/div\u003e\n  \u003cdiv class=\"item\"\u003e…\u003c/div\u003e\n  \u003cdiv class=\"item\"\u003e…\u003c/div\u003e\n  …\n\u003c/div\u003e\n```\n\n```css\n.item {\n  float: left;\n  width: 25%;\n}\n```\n\nAdd jQuery and the Wrecker script.\n\n```html\n\u003cscript src=\"//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"/path/to/jquery.wrecker.min.js\"\u003e\u003c/script\u003e\n```\n\nIt is recommended that you specify `itemSelector`, `maxColumns` and `responsiveColumns`.\n\n```js\n$(function() {\n  $('#container').wrecker({\n    // options\n    itemSelector : '.item',\n    maxColumns : 4,\n    responsiveColumns : [\n      // windowMaxWidth : columns\n      // windowMaxWidth order and values should match those in your responsive CSS\n      { 1024 : 3 },\n      { 800  : 2 },\n      { 40  : 1 }\n    ]\n  });\n});\n```\n\n\n## How it works\n\nThe previous layout is converted into a `display:table` layout where the responsive column span is handled by dynamically adding and removing `\u003cdiv\u003e` \"rows\" around the \"cells\". Equal-height rows are handled automatically by the browser (very fast). Responsive column widths are handled with standard CSS.\n\nSingle-column layouts and those with JavaScript disabled will be served the `float` layout.\n\n\n## Important Notes\n\nDue to the nature of `display:table` layouts, there are a few possible issues:\n\n1. There is currently no known `colspan`/`rowspan` equivalent in CSS\n2. `max-width` is ignored on the main element (`#container` in the above example)\n3. `margin` values will be ignored on the cells. You will need to do something like [Inside-Only CSS Table border-spacing](https://svachon.com/blog/inside-only-css-table-border-spacing/). Check out the [advanced demo](https://stevenvachon.github.io/jquery.wrecker/advanced.html).\n\n\n## Other Functions\n\nTo recalculate the grid. Useful for adding new items.\n```js\n.wrecker('reload');\n```\n\nTo remove Wrecker functionality completely and return the element back to its pre-initialized state.\n```js\n.wrecker('destroy');\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstevenvachon%2Fjquery.wrecker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstevenvachon%2Fjquery.wrecker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstevenvachon%2Fjquery.wrecker/lists"}