Plugin: Expandable text-areas [jQuery]

@DmitriFApr 09.2008

Just whipped this up for those wanting the text areas to expand with the typing. A bit of hardcode for the font-size, since I dont know really how to find out a character width. Due to this approximation, with long texts the thing stretches out wayyyy far.

If you improve it at all please post back.

[CODE] (function(){ $.fn.rubberize = function(options){ defaults = {minRows: 2}; config = $.extend(defaults, options);

return this.each(function() { obj = $(this); obj.val(”); obj.attr(‘rows’, config[‘minRows’]); obj.keypress(function(e){change_size($(this)); }).blur(function(){change_size($(this));}); }); function change_size(obj){ fsize = parseInt(obj.css(‘font-size’))/2.5; chars = Math.round(obj.width() / Math.ceil(fsize)); cur_val = obj.val().length + ((obj.val().match(/$/gm).length * chars)); obj.attr(‘rows’, Math.ceil(cur_val/chars)); } } })(jQuery)

::USAGE:: $(‘.test’).rubberize(); [/CODE]

to post a comment

JavaScript

13 Comments(s) _↴

@KorApr 09.2008 — #The only way I could improve a JQuery is to forget about it and build my own native javascript code which, I bet, it will be better and simpler. Libraries and frameworks are like McDonald's hamburgers. They make you fat, not fed.

@DmitriFauthorApr 09.2008 — #And something on the topic of improving the script rather than the library?

Sure libraries might seem easy to do, but they often do contain little jems of code.

Anyone with a knowledge of closures and prototypes can extend javascript, it just depends how well it is.

I am not a jQuery fanboy, it just happens that I use it as a framework at work.

@turborakettiApr 09.2008 — #@KOR: I'd say; No, you can't make it simpler without jQuery. But perhaps better. However, lets accept that DmitriF uses jQuery and address his problem.

@DmitriF: Great idea, but I get an error on the line "obj.attr('rows', config[minRows]);", saying minRows is not defined. Haven't dug into that, but you can probably tell me what's wrong.

@DmitriFauthorApr 09.2008 — #Just edited the post.

Was supposed to be ['maxRows'], sorry.

@Angry_Black_ManApr 10.2008 — #Libraries and frameworks are like McDonald's hamburgers. They make you fat, not fed.[/QUOTE]

AMEN BROTHER.

as for helping the guy, he asked a jquery question on a javascript forum. despite relationship, this is a shot in the dark with apples and oranges. Kor's response is 100% valid given the context, and i for one totally agree.

the definition of "simpler" is completely based on perspective. it is simpler to code in jquery, but if you dont know what the library is built on, it may severely complicate certain things like troubleshooting. if you knew jquery inside and out, but had no idea about the underlying javascript principles, you would be at a major disadvantage.

i don't call that simpler. i have done web development for an air force installation... most people used microsoft frontpage to get going. i can't tell you how many calls i got for help with that program, and i don't ever use it. but i was able to solve probably 99% of those issues because i knew the source, rather than the add-on.

And something on the topic of improving the script rather than the library?[/quote]

the presence of jquery in the script undermines the ability to improve the script.

@DmitriFauthorApr 10.2008 — #For some reason I feel like you guys have never even tried working with a framework or have tried working in a library utilizing work environment. I know both javascript and jquery, hell i even use prototype once in a while. It all a matter of knowing for a better chance of employement.

Sure if you all cant understand jQuery, which IS an ingenius framework, i will rewrite this for you guys.

By the way how is it making it simpler to learn rather than faster, utilizing lets say

$('div#test') rather than

<i>
 </i>tags = document.getElementByTagName('div');
 for (x=0; x&lt;tags.length; x++){
 [INDENT]
 if(tags[x].getAttribute('id') == 'test'){
 obj = tags[x];
 break;
 }
 [/INDENT]
 }

Just optimization in the work environment id say.

@KorApr 10.2008 — #It hard to analyze / debug a library / framework, mainly because they invent custom methods. Without seeing the whole framework it is hard to say what is doing, for instance, a method like object.doSomething(). What is suppose to do such a method? You must search all the codes and find that prototype/function.

The problem with those frameworks is that they use a "custom language", each library/framework on its own.

I hardly use frameworks/libraries because I don't feel the need for. I do spend less time to write myself exactly the pure javascript functions I need than if I would have used a framework. Those kind of huge codes-for-everything bring, usually, more trouble than help.

One more note. I have notice that those who use frequently frameworks have to patience to learn javascript. They think that there is no need, as long as a framework looks like easier to learn and use. But it is not true. Most of the time people come here and ask for help in their jQuery or Prototype or whichever frameworks because they don't understand the javascript basis. They expect a JQuery custom solution, not a javascript one.

@KorApr 10.2008 — #

By the way how is it making it simpler to learn rather than faster, utilizing lets say

$('div#test') rather than

tags = document.getElementByTagName('div');

for (x=0; x<tags.length; x++){

if(tags[x].getAttribute('id') == 'test'){

obj = tags[x];

break;

}

}
[/QUOTE]
It seems like you don't sense that behind

<i>
 </i>$('div#test')

lays inside the framework, anyway, something like:

<i>
 </i>tags = document.getElementByTagName('div');
 for (x=0; x&lt;tags.length; x++){
 if(tags[x].getAttribute('id') == 'test'){
 obj = tags[x];
 break;
 }
 }

So you are simply adding an unnecessary custom method. You may probably gain a second or two by typing the short JQuery reference, but you loose in:

- download speed - frameworks are huge bunch of codes

- changing/debugging time

NOTE:

Don't mention that:

<i>
 </i>tags = document.getElementByTagName('div');
 for (x=0; x&lt;tags.length; x++){
 if(tags[x].getAttribute('id') == 'test'){
 obj = tags[x];
 break;
 }
 }

Looks very funny to me. What about?:

<i>
 </i>document.getElementById('test');

You have badly chosen the example. It looks like you don't know that on a document the[B] id[/B] must be unique, so that why to circle through all the elements to find the one with a certain id, when you may simply use the getElementById(id) reference? ?

@DmitriFauthorApr 10.2008 — #Sure lets say bad example, how about div.test.

People who start with the frameworks sure might not learn javascript. Me on the other hand for example I know both, since I started out with javascript and use pure at home, jquery at work.

Sure I think we all know that there is a function behind the selectors etc, but hey why reinvent the wheel every single time. Why spend a couple of days perfecting full css selector capabilities in your program when the library already has it. Sure it makes for a fun project, but at work, not such a swell idea.

Libraries are often bloated with unused code, however a 30 kb cache once really doesnt slap back that much.

Either way this is starting to remind me of the usual complaints: ASP sucks, real programmers use PHP etc.

It is rather close minded in the sense, that sure it is different, but knowing it doesnt hurt.

@KorApr 10.2008 — #Well, there is not something really bad in using frameworks. But 99% of cases is easier and faster to use your own "soubroutines". I don't like, as well, to reinvent the wheel each time, so that I wrote and I keep many pieces of codes which do a certain job (find the position, do a fade, drag'n'drop, validate a form, create elements, set attributes... and so on). There might look like a personal library (which in fact it is) except that I use each at a time, when needed, for a certain purpose, not all of them as real frameworks do. I can easily modify them for a custom purpose, as they are written in plain javascript.

Furthermore, I confess I don't trust libraries/frameworks for another reason: they are not always as crossbrowser as their creators hope.

You see, when you try to create a framework in order to cover [I]all[/I] the possible applications for [I]all[/I] the browsers you will end by creating something which will work poor and only in some browsers. Javascript is changing and improving quite fast, so that a library today might be outdated tomorrow.

@turborakettiApr 10.2008 — #I feel that this has become a discussion about pros and cons with javascript libraries, which indeed is a very interesting topic, but it should be held in a thread with a slightly less misleading title. Someone minds starting one?

Also, it's very desirable to come up with a "practice" on how to discuss javascript with or within libraries in this forum (if it at all should be allowed). I suggest that it is legal, and such a thread should be started within the Javascript forum, but it's title should always start with the library name in square brackets. In that way those that don't know the library don't have to waist their time opening the thread, but others that use the library are addressed. I, for example, have used jQuery for some time, and found it most helpful in certain applications, and was quite excited when I saw a thread about it. Does this stategy sound fair enough? (This, I realise, also belongs in dedicated thread... oh, well.)

And don't insinuate that I don't know javascript just because I use a library. I actually code like a beast. ?

@Angry_Black_ManApr 10.2008 — #I have notice that those who [frequently use frameworks] have [no] patience to learn javascript.[/QUOTE]

truer words were never spoken. this is obviously not an all-inclusive statement, nor should it be taken as such.

@slaughtersApr 10.2008 — #Javascript frameworks/libraires are like most other pre-canned software solutions. They work great for the problem they are made to address but lack flexability. Try doing something even slightly outside their scope and it takes an unweildly amount of effort to be successful.

As a former boss-like-guy I worried about being able to hire programmers who knew not only web programming and JavaScript, but also a specific JavaScript library which may/may not still be around and supported 2 years from now when I need someone to make changes.

Also in #JavaScript _↴

more iframe breakout problems...pass a parameter to js function invisible code

Success!

Help @DmitriF spread the word by sharing this article on Twitter...

Tweet This

Plugin: Expandable text-areas [jQuery]

13 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Plugin: Expandable text-areas [jQuery]

13 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

13 Comments(s) _↴

Also in #JavaScript _↴