Question

I have 5 elements in a jQuery slider, the slider elements are then cloned once so there are enough elements for a circular continuous slide.

Here is the code i am using to clone my elements:

$mo.prepend($mo.children().clone().removeClass('active'));

On the first instance the Cufon works great, but after it’s been cloned it seems to break it’s layout, by adding spacing and keeping the cufontext behind the element.

Here is an image to better describe the issue:

I have tried the following to try and refersh and re-instate the cufon text;

    $mo.prepend($mo.children().clone().removeClass('active').show(function(){
        Cufon.refresh();
    }));

i have also tried re-defining the cufon with Cufon.replace() has anyone had this issue before, and if so how did you fix it?

I have noticed the CSS attributes that are on the first instance of the cufontext are lost in-transit once the clone has been completed.

Note these issues are only in IE7 (and probably lower)

I have replicated the issue, in JSBIN it does exactly what is happening on my site,

http://jsbin.com/awupuw/

Answer 1

So i figured out how to do this, i realized that jQuery was also copying the cufon elements from the HTML, so when i reinstated a cufon.register or refresh it would try to apply it to the cufon elements already registered.

To resolve this issue i simply cleaned out the objects before invoking .clone().

You will probably clean out your object different to me, but hey it works so here is the code that I used.

$('#clone').click(function(){
  var _object = $('h1:eq(0)').clone();
  var _text = _object.text();
  _object.find('cufon').remove();
  _object.text(_text);

  $('body').append(_object).show(function(){
    Cufon.refresh();
  });

});

http://jsbin.com/awupuw/9 -> Working Example