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

retrieving a URL with the help of $.getJSON and effectively parsing its contents

I seem to be struggling with a coding issue and I can't quite figure out what's wrong. My code fetches a URL that returns JSON, but the function is not returning the expected string: function getit() { var ws_url = 'example.com/test.js&ap ...

javascriptjqueryjson

Information from contact forms gets inputted into the URL

Currently, I am in the process of developing a website and implementing a Contact Form that allows customers to email me directly. To test if the mail function is working correctly, I am using a Test Mail Server listening on Port 25 through a WAMP server v ...

phphtmlwampservermail-server

Tips for clearing a saved password in a browser using Angular.js and Javascript

There is an issue with the password and username fields in my Angular.js login page. When a user clicks on the 'remember me' option in their browser after logging in, the saved username and password are automatically displayed in the respective f ...

javascripthtmlangularjs

my goal is to transform this text into the background

For my latest project, I want the entire page that I've coded to be integrated into the <body> section with endless scrolling ability. Additionally, I need the loop that I created to remain fixed when scrolling so that I can easily place my con ...

htmlcssbackground

The CSS div mysteriously vanishes right before I can trigger the click event

My CSS code looks like this: #searchbar-wrapper input#header-searchbar:focus + #search-dropdown-wrapper { display: block; } The purpose of this code is to make a dropdown visible when a user focuses on a textbox. The default behavior should be th ...

css

Having issues with React Nivo tooltip functionality not functioning properly on specific graphs

While using Nivo ResponsivePie to visualize some data, everything is functioning properly except for the tooltip. For some reason, the tooltip isn't appearing as it should. Interestingly, I have a heatmap and a bar graph with tooltips that are working ...

javascriptcssreactjsnivo-react

Set up two separate tables with sufficient space in between each other

Is there a way to align these two tables next to each other with some space between them? Currently, they appear one below the other. How can I make them sit beside each other with spacing in between? If anyone knows how to do this, please help me out. &l ...

htmlcsshtml-table

Having trouble with GSAP CDN not functioning properly in your JavaScript or HTML document?

After watching a tutorial on YouTube by Gary Simon, I attempted to animate text using GSAP. Despite following the instructions meticulously and copying the CDN for GSAP and CSSRulePlugin just like him, nothing seems to be happening. Even setting my border ...

javascripthtmlcssgsap

Guide on placing images in a grid using CSS

Exploring a new way to arrange images in grid style with a box underneath. Seeking advice on achieving this specific layout shown in an image. Current progress in positioning can be seen in this screenshot. Desired adjustments include aligning the far ri ...

htmlcss

Floating color problem

Do you know why the social icons turn black when hovered over? Could it be related to the navbar buttons? Is there a way to change the hover color to blue or red only? Link to code snippet <body> <nav class="navbar navbar-default navbar-fixed-t ...

htmlcsstwitter-bootstrap-3

Make dark mode the default setting in your Next JS application

In my Next JS application, I have implemented both isDarkMode and handleDarkMode functions. Within the Header component, there is a toggle button that allows users to switch between light and dark modes. <ThemeContainer> <label classN ...

htmlcssnode.jsreactjsnext.js

Ways to bypass browser pop-up blockers when using the window.open function

I am displaying an HTML retrieved from the backend. printHtml(htmlContent) { var windowToPrint = window.open('', '_blank'); windowToPrint.document.write(htmlContent); setTimeout(function () { windowToPrint.document ...

javascriptjquerytypescriptbrowsercross-browser

Html content overlapping div rather than being stacked vertically

My goal is to arrange a group of divs inside another div in a vertical stack. However, I am facing an issue where the text from the last div is overlapping with the second div instead of following a proper vertical alignment where the text in the third div ...

javascripthtmlcss

The integration of single page applications and <form> elements is a powerful combination in web development

Is there still value in using a <form> element over a <div> element when developing single page applications? I understand the purpose of the <form> element for traditional form submissions with a full page reload, but in the context of ...

javascripthtmlajaxformssingle-page-application

Creating a spacious text box for an enhanced Ajax search feature

I'm currently working on an AJAX application that allows users to input the name of a movie, and then loads results from the database through jquery using a PHP API. However, I'm facing a challenge in implementing a text box with the following re ...

javascripthtmlcssajax

qunit timer reset

I have developed a user interface for manually launching qunit tests. However, I have noticed that the qunit test timer starts when displaying the interface, rather than when starting the actual test. For example: var myFunction = function (){ test ...

javascriptjqueryqunit

Tips for saving HTML data locally

Is there a way to persist my HTML element tag data even after the user closes the browser? For example: <div class="classOne" data-random="50"> If I use jQuery to change the data attribute like this: $(".classOne").attr("data-random","40") How ca ...

javascriptjqueryhtml

What is the best way to show a message on a webpage after a user inputs a value into a textbox using

I have a JSFiddle with some code. There is a textbox in a table and I want to check if the user inserts 3000, then display a message saying "Yes, you are correct." Here is my jQuery code: $("#text10").keyup(function(){ $("#text10").blur(); ...

javascriptjquery

Adjust the height of an element when the maximum height is set to none

I am trying to add animation to the opening of a menu on my website. This is achieved by adjusting the max-height property of the <div> element that represents the menu, as well as changing the display property. The max-height value is being changed ...

htmlcss

Unable to conceal HTML5 video in mobile devices through media query

I've been struggling to find a solution for hiding a video on mobile devices. Despite going through numerous posts and attempting different methods, I haven't been successful in using @media queries to hide the video and show an image instead. He ...

htmlcssmedia-queries