Home » Groups » Javascript

Auto-resize text field on window resize?

Submitted by jmmec on Mon, 2009-09-21 14:59

Hi everyone,

I still consider myself a newby to jquery / javascript / css, though I've managed to write an ajax application that supports a multi-user callout processing system for my local SAR team.

As you can see in the attached picture, I have a "Notes:" text field that has fixed-sized font and width. I'd like to make this prettier where, if the user resizes the browser window, then I resize the width of the text field to better fit within the newly resized browser window.

Any ideas on how to accomplish this in jquery? I can change the generated HTML to whatever is needed to do this (add div's or whatever), so if you have some ideas, then please let me know.

Thanks a lot!

AttachmentSize
callout_sample.png17.64 KB
Groups:
Javascript
Login to post comments

My Solution

jmmec - Wed, 2009-09-23 19:52

Hey,

Thought I'd post what I came up with in case someone needs to do something similar, or has a better approach. :)

I haven't tested this out in various browsers, but the approach below is working for me in FireFox using my modified Garland theme:

First, label my text input fields with class "MemberNotes".

Second, define this function when the document loads, and then invoke the "change()" function so that the input fields are updated based on the current size of the window (really the "#squeeze" div which is smaller than the overall window size for the Garland theme).

$(".MemberNotes").change(function() {
      var decreasePx = 280;
      if (decreasePx < $("#squeeze").width())
              $(this).css('width', $("#squeeze").width() - decreasePx);
});

$(".MemberNotes").change();

Third, handle the window resize event after a short timeout event expires (in case the user continues to resize the window):

var roster_resizeTimer = null;
$(window).bind('resize', function() {
   if (roster_resizeTimer) clearTimeout(roster_resizeTimer);
   roster_resizeTimer = setTimeout(roster_windowResize, 50);
});


function roster_windowResize() {
   $(".MemberNotes").change();
}

Thanks...


Login to post comments

Oh, I now realize that the

jmmec - Wed, 2009-09-23 20:43

Oh, I now realize that the approach above can be optimized -- no need to re-calculate the "resize" for every element since it will be the same value.

Anyway, the basic idea seems to be working in IE7, IE8, FireFox, Chrome, Opera.

Thanks.....


Login to post comments