Posted by jmmec on September 21, 2009 at 2:59pm
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!
| Attachment | Size |
|---|---|
| callout_sample.png | 17.64 KB |
Comments
My Solution
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...
Oh, I now realize that the
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.....