When a user clicks on a textarea, I want it to smoothly change height to 60px and slide down in one fluid animation.
Check out the JSFiddle example here: http://jsfiddle.net/MgcDU/6399/
HTML:
<div class="container">
<div class="well">
<textarea style="width:462px" placeholder="Leave a comment..."></textarea>
</div>
</div>
Thank you! :)
If you're looking for the solution, the method to use is known as animate() and it has extensive documentation available.
Regarding your jsfiddle example, I have crafted the necessary jQuery code to showcase how the animate method works along with the focus() and blur() methods:
jQuery(document).ready(function ($){
var element = $('.well textarea');
var orig_height = element.height();
var new_height = 60;
// Event handler for when element is focused
element.focus(function (){
$(this).animate({height: new_height + 'px'});
});
// Event handler for when element loses focus
element.blur(function (){
$(this).animate({height: orig_height + 'px'});
});
});
How about achieving a similar result as shown in this demo?
$('.toggle').click(function() {
$(this).toggleClass('active');
});
This method proves to be more effective when used in animation...
$("textarea").on('focus',function (e, ui) {
$(this).animate({
height: "60px"
}, 1500);
});
$('#comment').on('click', function () {
$(this).fadeIn(2000, function() {
$(this).css('width', '100px');
});
$(this).focusout(function() {
$(this).css('width', '50px');
});
});
CSS: .list-a .desc-fix { width: 180px; margin: 0px auto; position: relative; } .list-a .desc { background: url("../images/trans_black.png") repeat; display: block; font-family: arial; font-size: small; height: 18px; mar ...
Is there a method to load an HTML file and execute the embedded javascript to create a complete HTML page programmatically similar to how browsers do? Edit 1 - I am working on an application where I need to extract data from an HTML page on a remote websi ...
I've set up a node express app and incorporated sass support for the CSS. However, when I attempt to access http://myhost.com:port/css/whatever.css, the whatever.css file is generated in the express_app_root/public/css directory as expected. The *.scs ...
Is there a way to create a site where user data is inputted into an input box or form, and then that information is stored in a .txt file on the user's C drive without uploading it to a server first? I've been experimenting with various forms an ...
I need to find a way to make horizontal scrolling on my really wide graph snap to specific points along the x-axis. I initially tried using scroll-snap-points-x, but unfortunately it doesn't seem to be supported. My attempt to add invisible elements ...
Need help setting the width of a select tag <div class="input-group"> <select class="form-select" style="width: 50%;"> <option selected value="dummy">Dummy</option> <opt ...
Is there a way to extract specific data from a JSON format within an Ionic project? What is the process for selecting the ID associated with particular data in a JSON format? And how can I retrieve and display the value linked to the selected product&apos ...
Discovered a helpful post that seems to address the problems. https://github.com/angular/angular-cli/issues/8359 I'm unsure about the steps to take next to resolve this issue. Can anyone clarify? Could you please advise on which version of Angular ...
I am currently working on adapting code I found here to create a virtual keyboard for a foreign alphabet using an online textarea. Below is the modified code: <textarea id="txt"></textarea> <script src="https://ajax.googleapi ...
Don't miss checking out the amazing website wplayout.com. On the homepage, there is a stunning gallery that I want to enhance by adding a "premium" tag image on top of each picture. Currently, the premium image is displayed in the top right corner of ...
I have a webpage that contains specific content followed by a bar with tabs. My goal is to have this bar stay fixed at the top of the screen once it reaches that position while scrolling down, and only allow the content below the fixed bar to continue scro ...
After bundling my JavaScript with the .net setting BundleTable.EnableOptimizations = true;, I've encountered a peculiar issue. Here's the snippet of the generated code causing the error (simplified): var somVar = new b({ searchUrl: "/so ...
When working with Express.js, I am utilizing '*' to catch the error 404. Is there a way for me to find out the path name of the error URL? app.get('*', (req, res) => { console.log("route: " + JSON.stringify(req.route) ...
I'm currently working on organizing a CSS grid for my images on a tribute page project from free code camp. I was able to set up the grid as intended, but I am facing some difficulties in making the images fit perfectly within each cell. Some images a ...
Looking for the best way to execute an AJAX call in a WebForms application? While ASP.NET AJAX components are an option, some may find them a bit heavy compared to the cleaner approach in MVC. Page Methods can be used, but they require static methods ...
I've always found this to be a tricky concept to fully grasp. Let's delve into async functions in Typescript. Which implementation is accurate? async function asyncFunctionOne(string1: string, string2: string, string3: string) { var returnOb ...
Even though ngIf is used, the FirstTab remains visible. How can I completely remove the tab? Here is the code snippet: <tabs style="min-height:auto"> <tab tabTitle="FirstTab" *ngIf="str=='dp'" > <first-tab> ...
I'm currently using a simple script that toggles the visibility of two div elements: <script type='text/javascript'> $(window).load(function(){ function toggle_contents() { $('#page1').toggle(); ...
In my inventory, I have a collection of products <ul class="product-list"> <li>A</li> <li>B</li> <li>C</li> </ul> My goal is to dynamically add more items using jQuery after a successful AJAX call ...
After revisiting a previous Discord bot package designed to track website updates, I encountered an issue. The code was originally scraped and last edited about 8 months ago with success. However, upon running node index.js, the following error occurred. ...