Set the counter into an element by ID

[Necrospasm]

Hi,

Any idea how I can put the counter in an existing element? I basically have (as per screenshot) an area where to show a counter which I want to use instead of having the counter floating around.

Any help appreciated. Thanks.

[nate99pitt]

Necrospasm, per the API docs .... the value for the placement property can be set as one of three things.

It can be a string, such as placement: "top left"

It can be an object, such as placement: {'top':'10px', 'left':30px'}

Or it can be a callback function such as

placement: function(a, b, c){
       // a is the element that it is binded to, in other words the object whose length you are checking
       // b is the element that is being created, in other words the character counter output
       // c contains info useful for positioning the counter, such as the offsets of the object. the width
       of the object, etc.
  }

Here is an example of how I used the function .....

 $('input[maxlength]').maxlength({
                     alwaysShow:true, 
                     showOnReady:true, 
                     appendToParent:true, 
                     warningClass:'', 
                     placement:function($cont, $obj, pos){             
                            $cont.parent().next().html($obj); 
                     }
}); 

... I have a bootstrap horizontal form. The grid is divided as follows ... label is set to "col-sm-2" the input is wrapped in a div with "col-sm-9" and the last grid is set to "col-sm-1". With the function above, for each of my inputs that have a max length defined, the object is appended to the sibling container (the last grid item).

The author did a really good job of providing hooks to make this utility very flexible.