Geek asks and answers

Generated JavaScript text disappears (Cufon & Clone)

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>

The title text is displayed as a canvas generated by Cufon.

I clone my list and use the second as a replacement for the Quicksand script.

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

How to fix it?

Real-time example:

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

(each "Cufon Title" disappears after clicking the link, removing Cufon.now () helps, but this is not the answer, since this part of the code is required in my project)

+3
source share
2 answers

- , Cufon - . , , . - Cufon.refresh(), cufon . .

, cufon, . ( - ) js.

HTH:)

, :) , :

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

2

- - : Quicksand . ( - 1 - , , ?):

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

, ( Chrome FF). enhancement , .

!

+8

HTML. data-id data-value , : <li data-id="1" data-value="Image">

0

More articles:


All Articles