3

I have been using the .htc version of PIE successfully on a new project (that will specifically target IE8+), however, I'm having trouble when trying to clone an element that has PIE-style applied to it.

I got a jsfiddle illustrating the problem here, and input is welcome (even other, similar approaches/alternatives to PIE) - however, .htc files cannot be referenced cross-domain, so this fiddle just contains the actual markup and CSS I use.

Any help is appreciated. What could be causing this, is there a potential workaround?

Cheers, peol

Drew Gaynor
  • 8,292
  • 5
  • 40
  • 53
peol
  • 872
  • 7
  • 11
  • i am having the same issue, did you manage to find a solution? i have PIE applied to children of cloned elements which are not inheriting the .htc fixes - it might be that using the javascript version of pie may be the answer. –  May 09 '11 at 19:53

1 Answers1

6

There are two issues that are encountered when cloning elements with PIE'd descendants:

  1. The VML elements that PIE has inserted will also be included in the cloned content, but they are cloned incorrectly with no namespace prefix for some reason, and
  2. The unique _pieId attribute that PIE puts on each of its target elements is also copied in the clone, which leads to collisions between ids that are no longer unique.

So in order to do a proper clone, we need to get rid of both. The first can be done by temporarily setting the behavior style property of each PIE'd element to 'none' while cloning and restoring it afterward. Setting it to 'none' triggers PIE's cleanup methods which remove all the VML elements. The second item has to be done manually, as PIE does not remove the _pieId attributes automatically. Both of these are easy enough to script.

Here is a custom jQuery extension that handles this in my limited testing:

jQuery.fn.cloneWithPIE = function(dataAndEvents, deepDataAndEvents) {
    // Find elements with PIE attached and remove their behaviors:
    var pied = this.find('[_pieId]').css('behavior', 'none');

    // Perform the clone:
    var clone = this.clone(dataAndEvents, deepDataAndEvents);

    // Remove the _pieId from each of the original and cloned 
    // elements, and restore the behavior:
    pied.add(clone.find('[_pieId]')).removeAttr('_pieId').css('behavior', '');

    return clone;
}

You then would call the cloneWithPIE method just like you would call the normal clone method:

$('.someEl').cloneWithPIE().appendTo(newParent)

Hope that works for you.

lojjic
  • 791
  • 5
  • 7
  • Sorry about that slow response, I didn't get an email of your response and I ventured on a new project the day after. :) Thank you for your response, I can't even remember how I solved it, but I think it was a similar approach. Cheers! – peol Jul 26 '11 at 22:13