From 1f293d252e363082cdaf8698e424857f27062b3c Mon Sep 17 00:00:00 2001 From: Ivan Kravchenko Date: Thu, 5 Dec 2013 15:18:16 +0200 Subject: [PATCH 1/3] expose columnizeIt via data --- src/jquery.columnizer.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/jquery.columnizer.js b/src/jquery.columnizer.js index 5d77e71..4dca809 100644 --- a/src/jquery.columnizer.js +++ b/src/jquery.columnizer.js @@ -634,6 +634,7 @@ } options.doneFunc(); } + $inBox.data('columnizeIt', columnizeIt); // expose columnize fn }); }; })(jQuery); From 316f46bc39bc008f328bd9c886dd4d015be0e0be Mon Sep 17 00:00:00 2001 From: Ivan Kravchenko Date: Thu, 5 Dec 2013 15:23:35 +0200 Subject: [PATCH 2/3] Added Bootstrap 3 tabs issue hint --- README.md | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 4bcc6ae..c685205 100644 --- a/README.md +++ b/README.md @@ -107,9 +107,15 @@ Columnizer will add CSS classes to the columns it creates. Each column will have 1. You can specify a rough width your columns, and Columnizer will create as many as will fit in the browser window. Just use: $(‘selector’).columnize({width: 400 }) syntax 2. You can specify a specific number of columns, and Columnizer will distribute your content between that many columns. Just use: $(‘selector’).columnize({columns: 2 }) syntax 3. When using the width and height options to scroll horizontally, make sure that the .column CSS class does not specify any padding or margin or border. See CSS for sample 5 for an example on how to create buffer between columns. -4. Make sure that you are columnizing visible content. If your content is display:none it may not columnize correctly. Try visibility:hidden and display:block instead. +4. Make sure that you are columnizing visible content. If your content is display:none it may not columnize correctly. Try visibility:hidden and display:block instead. Or see hint 6. 5. Columnizer does not auto-class any of your content. See the Suggested Defaults For Your Content section. - +6. When columnized content is inside tabs (and thus display is none), then you can call columnize function right after tab content is shown. Example for Bootstrap 3: +```js +$(document).on("shown.bs.tab", function(event) { + var tabSelector = $(event.target).attr("href"); + $(tabSelector).find(".columnize").each(function(){ $(@).data('columnizeIt')() }); +}); +``` ### Suggested Defaults For Your Content From 75b8324b7b3ececad6d505ec1afe046da366eb1a Mon Sep 17 00:00:00 2001 From: Ivan Kravchenko Date: Thu, 5 Dec 2013 15:25:43 +0200 Subject: [PATCH 3/3] fix js highlighting --- README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index c685205..e1841da 100644 --- a/README.md +++ b/README.md @@ -109,8 +109,9 @@ Columnizer will add CSS classes to the columns it creates. Each column will have 3. When using the width and height options to scroll horizontally, make sure that the .column CSS class does not specify any padding or margin or border. See CSS for sample 5 for an example on how to create buffer between columns. 4. Make sure that you are columnizing visible content. If your content is display:none it may not columnize correctly. Try visibility:hidden and display:block instead. Or see hint 6. 5. Columnizer does not auto-class any of your content. See the Suggested Defaults For Your Content section. -6. When columnized content is inside tabs (and thus display is none), then you can call columnize function right after tab content is shown. Example for Bootstrap 3: -```js +6. When columnized content is inside tabs (and thus display is none), then you can call columnize function right after tab content is shown. Example for Bootstrap 3 shown below. + +```javascript $(document).on("shown.bs.tab", function(event) { var tabSelector = $(event.target).attr("href"); $(tabSelector).find(".columnize").each(function(){ $(@).data('columnizeIt')() });