jQuery Columnize problems WordPress
- SOLVED
Hi. I have the following post template: http://www.educacionysociedad.com/proyectos/education/2011/italiano-la-scuola-fa-storia-2/
I'm making columns with jQuery Columnize plugin and I want to change the number of columns depending on the window size. The plugin works this way:
From a normal post like this:
<div class="post">
<p>text of the first column</p>
<p>text of the first column</p>
<p>text of the first column</p>
</div>
It transforms it like this:
<div class="post">
<div class="column first"><p>text of the first column</p></div>
<div class="column"><p>text of the first column</p></div>
<div class="column last"><p>text of the first column</p></div>
</div>
In order to change the number of columns when the window resizes, I need to remove all the column divs without removing the content. So I want to return to the original post from the transformed one in order to recolumnize the content in a different number of columns.
Any idea of how can I achieve this?
Thanks!
Answers (4)
AdamGold answers:
Try:
jQuery(window).resize( function() {
// get rid of the columns (not sure it's working)
jQuery('.post.').columnize({columns: 0})
// Or like Christano, get rid of the whole wrap:
jQuery('.post div').each( function() {
jQuery(this).unwrap();
});
});
AdamGold comments:
Okay, to your question (In Christiano's answer):
jQuery(document).ready(function($){
$(window).resize(function(){
// remove all parent make by your jquery columnizer
$('.column').each(function(){
// unwrap parent .column
$(this).unwrap();
});
// re-initialize jQuery columnizer with 2 column
$('.post').columnize({ columns: 2 });
});
});
Christianto answers:
Use unwrap api..
jQuery(document).ready(function($){
$(window).resize(function(){
// remove all parent make by your jquery columnizer
$('.column').each(function(){
// unwrap parent .column
$('p',this).unwrap();
});
// re-initialize jQuery columnizer with 2 column
$('.post').columnize({ columns: 2 });
});
});
sorry forgot to use code tag...
and forgot that using it on window resize event..
Andreu Llos comments:
<strong>Unwrap</strong> seems to work fine, thank you!
But, what will happen if I don't have <p> tag in the start of the <div class="column">? For example, it can start with an <img> or a <object> tag.
Christianto comments:
Smart question...
Then we have to select whatever element but only first element to unwrap
here more simple code, we don't have to use .each iteration..
jQuery(document).ready(function($){
$(window).resize(function(){
// remove all parent make by your jquery columnizer
$('.column > *').unwrap();
// re-initialize jQuery columnizer with 2 column
$('.post').columnize({ columns: 2 });
});
});
tell me the result..
Christianto comments:
Sorry I mean first child of <div> class column..
Andreu Llos comments:
Yeah! It worked perfectly.
Thanks again! :)
Christianto comments:
you're welcome... :D
Andreu Llos comments:
One little detail about the code:
On the window resize the page changes the columns slowly because of the constant calculation and generation of the columns.
Do you think that it's possible to generate the columns only once? When the <strong>$(window).resize</strong> event ends or anything similar?
It's mainly for slow pcs, they probably get stucked on window resize.
Christianto comments:
oh, still continue... :D
well, different browser, different behavior..
On IE-webkit base it may do like you said but on gecko base like firefox it only execute when it finished.
I think, we can delay it some time and execute it when no more resize..
I'm not testing it yet but just try..
jQuery(document).ready(function($){
var delayit;
$(window).resize(function(){
clearTimeout(delayit);
delayit = setTimeout(function(){
// remove all parent make by your jquery columnizer
$('.post .column > *').unwrap();
// re-initialize jQuery columnizer with 2 column
$('.post').columnize({ columns: 2 });
},2000);
});
});
Tell me the result..
And don't forget to vote :D
Andreu Llos comments:
It works fine, perfect!
I only have another little problem now, I don't know if you can still help me for the 16$ or I'm asking too much :)
The <strong><ol></strong> is not displaying the numbers correctly because it's divided in two columns, so the second column starts with the number 1 and does not mantain the real order of the numbers.
This column should start with empy <ol> elements in order to start with the correct number. The problem is that columnizer is putting the empty <ol> elements at the end of the first column, not at the start of the second one. Do you know if it can have relation to your first code?
Thanks a lot. How can I vote you? I only know how to pay (my second time here!).
Christianto comments:
Its definitely a jQuery Columnize features... :D
More column means more space then to fill the space, the plugin will split the content and divide it to each column.
What if the content split is an ordered list?
yup, u must be know it don't ya?
Maybe you can add nosplit class to <ol> element instead of <li>. Since the first chlid of .post is <ol> not <li>. I don't know if this works but try it.
To vote please see [[LINK href="http://codewi.se/2011/04/22/voting-assign-prize-money/"]]this post[[/LINK]]
Thank you
Jarret Minkler answers:
How about not use Javascript to control your "view" code ..
Andreu Llos comments:
What do you mean with "view" code? I don't understand.
Jarret Minkler comments:
The visuals, whats supposed to be in CSS.