Add a div element to the page and animate it in a leftward direction using JQUERY

Is there a way to make a message text slide in from right to left when clicking the submit button labeled as 'shoot'? The message will be displayed on the right side of the screen upon submission. How can this animation effect be achieved?

$('.submmit').click(function() {
  var c = "<div class='movethis' class='width: 40px;height: 50px;position: absolute;right: 0;'>" + $(".mytxt").val() + "</div>";
  $(".putbullet").append(c).animate({ "left": "0px" }, "slow");
  $(".movethis").animate({ "left": "0px" }, "slow");
  $(".movethis").css('right', '');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="text" name="txt" class="mytxt">
  <input type="button" class="submmit" value="Shoot">
</div>
<div class="areaofcontent" style="width:68%;float:right; background-color:#eee;height:400px;overflow-y:scroll;">
  <div class="putbullet"></div>
</div>

javascriptjqueryhtmlcssjquery-animate

Answer №1

The main issue here stems from the fact that you are invoking the animate() method on the .putbullet element instead of the .movethis element that you are appending. It is crucial to apply styles within the style attribute rather than the class, or consider placing them in an external stylesheet for better organization.

Furthermore, don't forget to define position: relative for the .putbullet element so that the dynamically added elements remain confined within it during animation. You can implement the following code snippet:

$('.submmit').click(function() {
  $('<div class="movethis">' + $(".mytxt").val() + '</div>').appendTo('.putbullet').animate({
    "left": "0px"
  }, "slow");
});
.putbullet {
  position: relative;
}
.movethis {
  width: 40px;
  height: 50px;
  position: absolute;
  right: 0;
}
.areaofcontent {
  width: 68%;
  float: right;
  background-color: #eee;
  height: 400px;
  overflow-y: scroll;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="text" name="txt" class="mytxt">
  <input type="button" class="submmit" value="Shoot">
</div>
<div class="areaofcontent">
  <div class="putbullet"></div>
</div>

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

Switching iframe content based on screen size

I'm attempting to use jQuery to dynamically change the source, width, and height of an iframe based on the viewport width. Here is the code I currently have: <head> <script type="text/javascript"> $(document).ready(function() ...

jqueryiframeresponsive-design

Ways to adjust the distance between logo and slider

I am using this script to showcase some products. You can find the script at: http://tympanus.net/Tutorials/ItemSlider/ When resizing the web browser from maximum size to smaller, I find that the height between the logo and shoes is too large for my likin ...

jqueryhtmlcssslider

How to Position Icon on the Right Side of an Input Field using CSS

Is there a way to position the magnifying glass icon to the right side of my input field? Link to my Fiddle. @import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"); body { margin: 30px; } .search { position: relative; ...

htmlcss

How to retrieve the query string in VueJS

Recently, I've delved into the world of VueJS and so far, it's been a great experience! :) One thing I'm trying to figure out is how to save querystring values to a VueJS variable. It seems like a straightforward task in handlebars + express ...

htmlexpressurlvue.jsvue-router

Refresh Ajax to dynamically update multiple div elements based on a single value

Good Day, I have been implementing Eliza Witkowska's Ajax Auto Refresh code available at this link. My goal is to retrieve data from a database and distribute it into 3 different divs based on the value of the field dish_type, which contains integer ...

javascriptphpjqueryajax

Main focus: Implementing dynamic data writing in this particular code scenario

Having trouble dynamically writing data inside my HTML table using JavaScript. As a newcomer to frontend development, specifically JS, I am seeking guidance on making this work smoothly. I've attempted methods like .innerHTML and .innerText without mu ...

javascripthtmlcss

Envelop the phrases onto a fresh line

I'm having trouble getting the text inside a div to display correctly. When the text is too long, it just keeps stretching instead of breaking into new lines. How can I make sure that the content displays as a block within the div? Thank you. .box ...

htmlcss

I'm looking to display just the most recent post on the main page

Having trouble displaying only the most recent post on the main page instead of looping through all posts. Any help would be appreciated. Here is the view.py: def index(request): context = { 'infos': info.objects.all(), } ret ...

pythonhtmldjango

Accessing an element using jQuery within a knockout event

I've recently started experimenting with knockout.js in combination with jQuery, and my experience with knockout.js is still quite limited. If you want to take a look at my code example, you can find it here: http://jsfiddle.net/Ninjanoel/ADYN6/ Cur ...

jqueryknockout.js

Using values from a select menu in a math calculation without including a decimal point

I am working with a dropdown menu that contains various values... <select id="number1a" onChange="Addition()"> <option value="0" selected>-</option> <option value="10">10</option> <option value="7.5">7.5</optio ...

javascriptjquerymath

The JavaScript loop does not update the value of a number input field

In an effort to save and retrieve data from local storage, I have implemented a loop that iterates through various fields in a dynamic table row. The process involves saving the data to local storage, clearing the table rows, recreating them for data retr ...

javascripthtmlloops

Achieving consistent sizing for React-Bootstrap cards: A guide

In my React app, I am utilizing React-bootstrap and specifically the Card & CardGroup components. I need assistance in ensuring that all the cards have the same height. JSX component: <Card style={{flex: 1}} className="card"> ...

cssreactjssingle-page-applicationreact-bootstrapportfolio

Enable highlighting a table border when hovering over it

Is there a way to highlight the boundary of a table row when hovering over it? Something like this: https://i.sstatic.net/PbQSR.png I attempted to use CSS with the following code: .ant-table-tbody>tr.ant-table-row:hover>td, .ant-table-tbody>tr&g ...

cssreactjsbootstrap-4material-ui

Pause for a moment before commencing a fresh loop in the FOR loop in JavaScript

Behold, I present to you what I have: CODE In a moment of curiosity, I embarked on creating a script that rearranges numbers in an array in every conceivable way. The initial method I am working with is the "Selection mode", where the lowest value in th ...

javascriptjqueryarrays

Tips for ensuring the position of buttons remains consistent no matter the size of the image

I am facing an issue with maintaining the button location when an image is added. My goal is to ensure that the button's position remains horizontal consistently. Front-end: React CSS framework: semantic-ui-react render() { return ( &l ...

htmlcssreactjs

Interact with CakePHP using onKeyUp event

Hey there, I have a quick and easy question. I'm working with a textbox that needs to trigger a javascript/jquery function whenever it is typed into. <?= $this->Form->input('contract_prices.'.$num.'.quantity', [ 'id ...

javascriptjqueryangularjscakephp-3.0

Using jQuery to modify the content of a value attribute

I need to update the text in a specific element by overriding it with jQuery as I do not have direct access to edit the original text. While I understand the basics of how this works, I am unsure of the correct method to target and replace the value. Usi ...

jquerytext

Tips for adjusting text sizes at different breakpoints in Quasar

I encountered an issue while attempting to customize font size and line height for each variable in quasar.variables.scss. Here is the error message that was displayed: [plugin:vite:css] Undefined operation ""(600px,) > 0". ╷ 6831 │ ...

cssvue.jsquasar-framework

I'm looking for a way to display the value stored in a variable within an ejs template. Any suggestions

I am experiencing an issue with my ejs template that should greet the user by displaying their name when the page loads, but it is not showing anything. Here's a snippet of my template: <!DOCTYPE html> <html> <head> < ...

htmlexpressejs

Merge a text input and TinyMCE editor into a new field using JavaScript. Limit TinyMCE editor to only allow Numbered Lists

When the 'Archive to History' button is clicked, I want the Today's Date text field and Last Update WYSIWYG field to append their contents to the Complete Project History WYSIWYG field, without replacing existing text. The date should appear ...

javascriptjquerytinymce