Question

I have a list:

<ul>
   <li><h2>Header</h2><p>Text</p></li>
   <li><h2>Header</h2><p>Text</p></li>
   <li><h2>Header</h2><p>Text</p></li>
</ul>

Header text is being displayed as Cufon generated canvas.

I’m cloning my list and using the second one as replacement for Quicksand script.

Everything works like expected, but the headers are invisible after sorting (but the canvases are still there!).

How to fix that?

Live example:

http://bartekka.ayz.pl/quicksand/

(every “Cufon Title” disappears after clicking a link, removing Cufon.now() helps, but this is not an answer since this part of code is required in my project)

Answer 1

This is because of the way Cufon creates elements – always causes trouble for me. What I do is redraw the text after any javascript interaction with it. Quickest way is to call Cufon.refresh() which will redraw all cufon items on the page. Alternatively you can target them specifically.

When I do this I tend to create a function to do the initial drawing of cufon items I will alter. Then I can just recall that function after my sorting (or whatever) js is complete.

HTH 🙂

EDIT in response to comment

Sure, not worries 🙂
The sorting plugin you are using has a callback feature so you can just do this:

jQuery('.portfolio-sorted').quicksand( cache_list.find('li[data-value=Video]'), {
        duration: 500,
    },
    function(){
        Cufon.refresh();
        // OR Cufon.replace('h2', { fontFamily: 'Quicksand' });
        // OR Cufon.replace($('.portfolio-sorted li h2'), { fontFamily: 'Quicksand' }); 
    });

EDIT 2

Right – found something very interesting: Quicksand has an option for just such a purpose. Try this (note – I’ve compressed your four functions into 1 for ease of testing – possibly this is something you can use?):

var cache_list = jQuery(this).clone().append('content');
//Add on click event handler to everything at once
  jQuery('ul.portfolio-terms li a').click(function(e) {
  //Call quicksand on the original works_list list(the one visible to the user)
  //pass to it all the 'li' elements from the cached clone 
  //since we want to display them all

  //get the target element based on data value
  var target = 'li[data-value='+$(this).attr('data-value')+']';

  if ($(this).attr('data-value') == "All") {
    target = 'li';
  }

  jQuery('.portfolio-sorted').quicksand( cache_list.find(target), {
          duration: 500,
          enhancement: function() {
                Cufon.refresh();
                // OR Cufon.replace('h2', { fontFamily: 'Quicksand' });
                // OR Cufon.replace($('.portfolio-sorted li h2'), { fontFamily: 'Quicksand' });
              }
  });
  e.preventDefault();
}); 

Think that will do it (works for me in Chrome and FF). The enhancement call is the important one if you want to add it to your original functions.

Fingers crossed!