Menu
So I've got a web applcation in the midst of wireframing, but I've run into an issue that requires a technical solution before I can solidify this model; that being:
Fig. #1 User creates new 'text-field' element (a div with a max-width.) User then begins typing into said element until...
Fig. #2 The element reaches it's max-width, the text drops to a new line and a 'new' background image (in the form of another div) is created (with it's opacity and position animated for effect) to accommodate the larger element sze.
This is a rough outline of the intended functionality (given at this moment, I'm not sure how to have a text-field that behaves like a div with max-width yet) but I'm curious about how to create the event handler for the 2nd step; I thought about checking on every 'keydown' event, but that seems inefficient...
Does anyone have any advice or ideas for tackling something like this? Thanks!
881
The height and width of the element to be tracked is found out using the height() and width() method in jQuery.
jQuery resize() MethodThe resize event occurs when the browser window changes size. The resize() method triggers the resize event, or attaches a function to run when a resize event occurs.
Method 1: Using resize event: We can add an event listener to the body element which fires every time when the window size is resized. Output: Method 2: Using ResizeObserver API: We can use the latest ResizeObserver API to listen the window resize event.
The 'keydown' or 'keyup' event is the first thing that comes to mind. If you decide to do it this way you will have to check for the html elements size each time and compare it to the old (save in a variable) one.
Easiest way seems to be to bind a handler to the html element and let it fire when the size changes. I do not know if such an event exists, but if then thats the way to go.
(+1 for your very descriptive Question)
193
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
