Text Box: Add a touch of flair with resizing

One interesting feature on my webpage is a textarea that can be resized using resize:both;

I am looking for a way to apply a specific style to this textarea only when the user resizes it. While I would prefer to achieve this with CSS alone, it seems like there isn't a pseudo-selector or method that would allow me to do so. Is my assumption correct?

If not, is there an event in jQuery that I could utilize for this purpose?

Additionally, what would be the most effective approach to reset the textarea to its original size? Would using jQuery once again be the best option?

Your insights and recommendations are greatly appreciated.

jqueryhtmlcss

Answer №1

If you want to create a custom resize event for a textarea without using any other library, you can follow this example:

Check out the DEMO on jsFiddle

$('textarea').on({
    mousedown: function(){
        $(this).data('size', $(this).width + '*' + $(this).height());
    },
    mouseup: function(){
        if($(this).data('size') !=  $(this).width + '*' + $(this).height())
            $(this).triggerHandler('resize');
    },
    resize: function(){
        console.log('The textarea has been resized!');
    }
});

Answer №2

To enable resizing functionality for a textarea, you will first need to make it resizable using jQuery UI's resizable() method and then trigger the resize event.

Styling with CSS

.resizing {
    background: #f2f2f2;
    border: 1px solid #4cf;
}

Implementation in JavaScript

$("textarea").resizable({ // Apply resizing behavior and handle related events
    resize: function() {
        $(this).addClass('resizing'); // Add styling during resize
    },
    stop: function() {
        $(this).removeClass('resizing'); // Remove styling after resizing completes
    }
});

Check out this DEMO for a live example.

Answer №3

Give this a shot...

$(".myinput").draggable({
    drag: function() {
        $(this).addClass("moving");
    }
});

http://jsbin.com/uzefid/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for dividing a form into two separate columns?

I am working on a form that sends input to a PHP script. I want to reorganize the form so that the second section (Person 2) appears in a column to the right of the first section (Person 1), instead of below it. <link rel="stylesheet" href="test.css" ...

htmlcssforms

React code displaying misalignment between label and input

Can you help me align my URL and https:// on the same margin? https://i.sstatic.net/hxkkC.png <div className="card"> <div className="card-body"> <div className="form-group col-12"> <label cla ...

javascriptcssreactjs

Hiding the overflow conceals the entire image in one direction, while leaving the other exposed

Here is the code I have written for my project (view fiddle here): img { width: 200px; height: 200px; } .image-container { width: 600px; height: 200px; overflow: hidden; } I am working with multiple images, all sized at 200px by 200p ...

htmlcss

How can I open a new window, redirect the current one, and bring focus to the new window using JavaScript?

Trying to troubleshoot a problem I'm having with the following setup: - Using SAP Portal, I am launching an HTML page containing this code. - The goal is for the HTML page to open a new window. - Once the new window opens, the original HTML page ...

javascripthtmlwindow.open

Populate Vue.js component with data prior to rendering

I'm new to using Vue.js and I've been struggling to create a simple component that includes a select list. I've been attempting to populate the options data by simulating an Ajax request, here is my code: HTML <div id="app"> < ...

jqueryajaxvue.js

Ways to extract information from a website using the data within a span element

I am struggling to extract the R1200 value from the "one Way drop off surcharge" section. Despite trying different methods, I have not been successful in retrieving this information. My goal is to copy the 1200 value and paste it into an Excel cell. I am f ...

htmlexcelvbaweb-scraping

What is the reason for the "jQueryUI autocomplete" not displaying JSON values obtained from a PHP file in an input field with autocomplete enabled in this particular situation?

I am utilizing a combination of PHP, MySQL, Smarty, jQuery, AJAX, and more for my website development. Currently, I am working on enabling autocomplete functionality for an input field with the id user_name. The goal is to provide suggestions to the user a ...

phpjqueryjsonjquery-autocompletejquery-ui-autocomplete

troubleshoot clientWidth not updating when CSS changes are made

Summary: When I adjust the size of a DOM element using CSS, its directive fails to acknowledge this change even with a watch on the size. Aim I have multiple custom directives (simple-graph) each containing an svg. My goal is to enlarge the one under the ...

javascriptcssangularjsangularjs-directive

Aligning text vertically within an HTML <a> tag block

Calling all CSS experts! I'm struggling with aligning text to the bottom of a block element with a fixed width and height that contains a background image and a title. I've tried using display: table-cell; and vertical-align: bottom; without succ ...

htmlcsstagsvertical-alignment

Is there a way to retrieve a list of li tags using BeautifulSoup4 in Python?

I am attempting to extract information from a Persian webpage where I need to retrieve only 3 li tags out of a ul element that contains 6 of them. The issue is that each li tag also has nested li tags within it, so when I use soup.find_all('li'), ...

pythonhtmlbeautifulsouphtml-parsing

Choosing a checkbox by considering the checkbox value, especially in cases where the checkbox and its label are separate elements

My goal is to click on the checkbox located next to the label "Print Method 1". Take a look at how the element appears here Below is the HTML code for reference: <div class="texter"> <div class="checkbox"/> ...

htmlxpathcheckboxselenium-webdriver

Is it just me, or does floating right not seem to work on 404 pages?

I have been working on setting up a unique header and footer design for a client's website. You can check it out here: Everything is looking good with the social media links floating to the right on all pages, except for some reason on the 404 error ...

css

ASP repeater exceeding container boundaries

Having trouble with my asp repeater that reads from a database and generates repeatable divs. The issue arises when the h4 spills over the div, particularly when using <%Eval. Any suggestions on how to fix this? Manual input divs don’t seem affected o ...

c#htmlcssasp.net

Expanding <a> element to cover the entire <li> container

Take a look at this straightforward menu layout: <ul id="menu"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> </ul> I'm looking to expand the <a> element so that it ...

htmlcssxhtml

What is the process for creating options for a dropdown menu based on data from a specific column in my database?

I have a form called "formA" which includes a hidden input named "email". This input is pre-populated with the email of the logged-in user upon page load. In my database, I have a table named "table_A" with columns "id", "email", and "itemname". The values ...

phpjquerymysqlajaxdrop-down-menu

Jquery function for determining height across multiple browsers

I am currently facing an issue with setting the height of table cells in my project. While everything works smoothly on most browsers, Firefox seems to add borders to the overall height which is causing inconsistency across different browsers. If anyone k ...

javascriptjquerycss

Prioritize returning AJAX data over iterating through the parent loop

Hey everyone, I'm having trouble wrapping my head around this issue even after researching various scenarios online. Here's what's going on: I have an array of strings named recipientsList. What I want to do is make an AJAX call for each s ...

javascriptjqueryajax

Browsing through a jQuery JSON object in Chrome reveals a dynamic reshuffling of its order

Jquery + rails 4 Within the json_data instance, there is data with key-value pairs. The key is an integer ID and the value is an object containing data. However, when attempting to iterate over this data using the jQuery $.each function, the results are s ...

javascriptjqueryjsongoogle-chrome

How to achieve a successful response with Ajax and jQuery?

I'm currently working on practicing data retrieval through an API using jQuery. After watching a few YouTube tutorials, I still can't seem to get a successful response... it's quite frustrating. Aside from YouTube, I'm also a subscribe ...

javascriptjqueryajaxapi

"Learn how to use jQuery to retrieve a specific row from an HTML table based on equality with a certain

I have a dynamically generated table using PHP. The information in this table is related to different semesters (such as first, second, third, etc.). I want to display specific semester information when a user clicks a link from the same table without need ...

javascriptjquery