StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I solved the problem, I am adding my comments here to help who wants to use same structure, here are the answer:</p> <p>Through the return statement:</p> <ul> <li>In $.fn.myPlugin, you do the following: return this.each(function() .....</li> <li>In this return function, you need to define this.get_myplugin_obj = function() { return MyPluginClassObj; };</li> <li>This would allow all elements that have access to the get_myplugin_obj function if myPlugin has been called on it. get_myplugin_obj would return the MyPluginClass object, which has the get_size etc. functions </li> </ul> <p>Here are the new <strong>myplugin.js</strong>:</p> <pre><code>(function($) { var MyPluginClass = function(element, customOptions) { var elem = $(element); var obj = this; var options = $.extend({ size: 1 }, customOptions || {}); /** public method **/ this.addMyPlugin = function() { elem.after('<br /><span class="hello" style="font-size:'+options.size+'px">hello</span>'); calculate(elem); elem.change(function() { calculate(this); }); elem.keyup(function(){ calculate(this); }); }; /** private method */ var calculate = function(obj){ var length = $(obj).val().length; var newsize = options.size + length; $(obj).nextAll('.hello:first').css('font-size',newsize); return; }; /** public method to get max size value **/ this.get_size = function() { return options.size; }; }; $.fn.myPlugin = function(customOptions) { return this.each(function() { var element = $(this); /** create an object for MyPluginClass **/ var MyPluginClassObj = new MyPluginClass(this, customOptions); MyPluginClassObj.addMyPlugin(); this.get_myplugin_obj = function() { return MyPluginClassObj; }; }); }; })(jQuery); </code></pre> <p>And get the size with the following function. <strong>giveerror.js:</strong></p> <pre><code>function validate_hello_size_func (element, error_message) { var first_given_size = $(element)[0].get_myplugin_obj().get_size(); var threshold = first_given_size * 3; //var threshold = 10; var current_size_px = $(element).nextAll('.hello:first').css('font-size'); var current_size = parseInt(current_size_px.substr(0,current_size_px.length-2), 10); if(current_size > threshold){ if(!$(element).next().hasClass('error')) $(element).after('<span class="error" style="color:red">'+error_message+'</span>'); } else { if($(element).next().hasClass('error')) $(element).next().remove(); } } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload