Work with Dynamic Elements

Dec 2, 2009 at 4:31 PM

Great plugin!  Renders very nicely.  Does this plugin work on dynamic elements?  I tried, but wasn't able to get it working when an element is added (a div, in my case) dynamically.  

Coordinator
Dec 2, 2009 at 4:59 PM

You have two possible ways to do this:

  1. You can insert a background canvas in the newly created element by calling $("#ElementID").backgoundCanvas();
    If you insert a lot of child elements, you will get a lot of canvas elements behind them.
    It is obvious that your paint fkt must be able to identify the element, e.g. by assigning a class to it.
  2. You can use one big canvas and render the background for elements.
    To do this you inject the canvas in the parent (maybe at least in the body element). And you make all your childs
    We do this on our homepage (http://www.maierhofer.de/en/). You need a more complex rendering function to identify the child elements. But you will keep the DOM small and the rendering fast. 

This is a code snippet from our homepage, rendering div elements marked with the class .Article:

 

            var articleCount = 0;
            elementInfo.$content.find(".Article").each(
            function(){ ++ articleCount; });
            
            elementInfo.$content.find(".Article").each(
            function(){
                 $this = $(this);
                 var offsetParent = elementInfo.$content.offset();
                 var offset = $this.offset({ relativeTo: elementInfo.$content[0] });
                 var width = $this.outerWidth();
                 var height = $this.outerHeight();
                 
                 var blueBorderOptions = {x: offset.left - offsetParent.left , y: offset.top - offsetParent.top,  height: height, width: width, radius: 10, border:0};
                
                 
                context.fillStyle = "#DDD";
                $.canvasPaint.roundedRect(context,blueBorderOptions);
                blueBorderOptions.border = 1;
               
                
                blueBorderOptions.radius = blueBorderOptions.radius - blueBorderOptions.border;
                 context.fillStyle = "#FFFEFF";  
                $.canvasPaint.roundedRect(context,blueBorderOptions);                 
            });

The tricky part is to determine the offset, with and height of the elements and render the background according to this parameters.

You can use the function $(Element).makeElementTransparent(transparentColorIE6) - to make the background of your element transparent. By default BackgroundCanvas makes only the background and border of the element transparent in which the canvas was injected.

 

 

Dec 2, 2009 at 10:49 PM

Thanks for the fast reply.  I'll give this a try!