JavaScript 生成的文本消失（Cufon 和 Clone）

发布于 2024-11-06 18:23:40 字数 608 浏览 3 评论 0原文

我有一个列表：

<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 生成的画布。

我正在克隆我的列表并使用第二个列表作为流沙脚本的替代品。

一切都按预期工作，但排序后标题不可见（但画布仍然在那里！）。

如何解决这个问题？

实例：

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

（每个“Cufon Title”都会消失）单击链接后，删除 Cufon.now() 会有所帮助，但这不是答案，因为我的项目需要这部分代码）

原文

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)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夏夜暖风 2024-11-13 18:23:40

这是因为 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 调用非常重要。

手指交叉！

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!

回复收藏 0 原文