logo
Ask your WordPress questions! Pay money and get answers fast! (more info)

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.

$16
jQuery Columnize problems

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!

This question has been answered.

Andreu Llos | 05/02/11 at 6:36am Edit


(4) Possible Answers Submitted...

See a chronological view of answers?

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

  • avatar
    Last edited:
    05/02/11
    7:34am
    AdamGold says:

    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();
    
});
    
});

    Previous versions of this answer: 05/02/11 at 7:33am | 05/02/11 at 7:34am

    • 05/02/11 7:34am

      AdamGold says:

      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 });



      });



      });

  • avatar
    Last edited:
    05/02/11
    6:49am
    Daniel Nitsikopoulos says:

    Previous versions of this answer: 05/02/11 at 6:49am

  • avatar
    Last edited:
    05/02/11
    7:00am
    Christianto says:


    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..

    Previous versions of this answer: 05/02/11 at 6:55am | 05/02/11 at 6:55am | 05/02/11 at 6:56am | 05/02/11 at 7:00am

    • 05/02/11 7:32am

      Andreu Llos says:

      Unwrap 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.

    • 05/02/11 7:45am

      Christianto says:

      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..

    • 05/02/11 7:50am

      Christianto says:

      Sorry I mean first child of <div> class column..

    • 05/02/11 7:58am

      Andreu Llos says:

      Yeah! It worked perfectly.

      Thanks again! :)

    • 05/02/11 8:03am

      Christianto says:

      you're welcome... :D

    • 05/02/11 8:18am

      Andreu Llos says:

      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 $(window).resize event ends or anything similar?

      It's mainly for slow pcs, they probably get stucked on window resize.

    • 05/02/11 8:43am

      Christianto says:

      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

    • 05/02/11 2:21pm

      Andreu Llos says:

      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 <ol> 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!).

    • 05/02/11 3:35pm

      Christianto says:

      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 this post

      Thank you

  • avatar
    Last edited:
    05/02/11
    10:54am
    Jarret Minkler says:

    How about not use Javascript to control your "view" code ..

    • 05/02/11 12:18pm

      Andreu Llos says:

      What do you mean with "view" code? I don't understand.

    • 05/02/11 2:49pm

      Jarret Minkler says:

      The visuals, whats supposed to be in CSS.

This question has expired.



Andreu Llos voted on this question.



Current status of this question: Completed



Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.