Сгенерированный JavaScript текст исчезает (Cufon & Clone) - PullRequest
Новая
       49

Сгенерированный JavaScript текст исчезает (Cufon & Clone)

3 голосов
/ 13 мая 2011

У меня есть список: 

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

Текст заголовка отображается как холст, сгенерированный Cufon.

Я клонирую свой список и использую второй в качестве замены скрипта Quicksand.

Все работает, как и ожидалось, но заголовки после сортировки не видны (но полотна все еще там!).

Как это исправить?

Пример из жизни:

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

(каждый «Заголовок Cufon» исчезает после нажатия на ссылку, удаление Cufon.now () помогает, но это не ответ, так как эта часть кода требуется в моем проекте)

Ответы [ 2 ]

8 голосов
/ 27 мая 2011

Это из-за того, как Cufon создает элементы - всегда доставляет мне неприятности. Я перерисовываю текст после любого взаимодействия с ним через JavaScript. Самый быстрый способ - вызвать 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 важен, если вы хотите добавить его к своим исходным функциям.

Пальцы скрещены!

0 голосов
/ 27 мая 2011

Подтвердите ваш HTML.Существует проблема с неизвестными атрибутами data-id и data-value во многих местах, например: <li data-id="1" data-value="Image">

...