Learn how to implement a feature in your chat application that allows users to reply to specific messages, similar to Skype or WhatsApp, using

I am currently working on creating a chatbox for both mobile and desktop websites. However, I have encountered an obstacle in implementing a specific message reply feature similar to Skype and WhatsApp. In this feature, the user can click on the reply button and a popup will appear in the typebox reflecting the message they wish to reply to.

For example: https://i.stack.imgur.com/TP2De.jpg

Below is a snippet of the HTML code:

<div class="chat-box">
    <!-- Chat messages go here -->
  </div>

Here is the CSS styling used:

.chat-box {
  width: 676px;
  height: 440px;
  border-radius: 10px;
  border: 1px solid #e5e5e5;
  margin: 15px 20px 0 20px;
  position: relative;
}
/* Additional CSS styles */

I am also looking into incorporating javascript/jquery functionality to enhance the chatbox but I'm unsure of where to begin.

For reference, you can view the Fiddle here: https://jsfiddle.net/Anurag2210/m0bod8th/23/

javascripthtmljquerycsschat

Answer №1

Live Example: https://codepen.io/example/pen/WNpOexvK

$("#send").on("click", function (e) {
    if ($("#message").val().trim().length) {
        var text = $("#message").val();
        var template =
            '<div class="chat-box__item self">' +
            '    <div class="profile">' +
            '        <img class="avatar" src="https://example.com/avatar1.png" alt="user1">' +
            '    </div>' +
            '    <div class="message-content">' +
            '        <p class="name">John Doe</span></p>' +
            '        <p class="date">8/21/2022</span>' +
            '        <p class="chat-message">' + text + '</span>' +
            '        <span class="material-icons-outlined reply-icon"> reply </span>' +
            '    </div>' +
            '</div>';
    }

    $(".chat-history").append(template);
    $("#message").val("");
    $("#message").focus();
});
.container {
    width: 700px;
    height: 500px;
    border-radius: 10px;
    border: 1px solid #ccc;
    margin: 20px auto;
    position: relative;
}

.chat-history {
    height: 380px;
    overflow-x: hidden;
    overflow-y: scroll;
}

.chat-box__item {
    display: flex;
    margin: 15px 30px;
    justify-content: flex-start;
    cursor: pointer;
}

.chat-box__item.friend {
    justify-content: flex-end;
}

.chat-box__item.self {
    justify-content: flex-start;
}

.avatar {
    width: 40px;
}

.message-content {
    display: flex;
    flex-direction: column;
    margin-left: 10px;
}

.chat-message {
    font-size: 14px;
    color: #222;
    border-radius: 6px;
    background-color: #f0f0f0;
    padding: 10px 12px;
}

.reply-icon {
    font-size: 12px;
}

.input-box {
    width: 690px;
    height: 50px;
    margin: 0 auto;
    background-color: #f0f0f0;
    border-radius: 6px;
    border: solid 1px white;
    display: flex;
    align-items: center;
}

input, button {
    font-size: 16px;
    background: transparent;
    border: none;
    outline: none;
}

input {
    width: 90%;
    height: 28px;
    margin-left: 10px;
}

button {
    background-color: #1273eb;
    color: white;
    padding: 5px 12px;
    border-radius: 4px;
}
<script src="https://cdn.example.com/jquery.min.js"></script>
<div class="container">
    <div class="chat-history">
        <div class="chat-item friend">
            <div class="profile">
                <img class="avatar" src="https://example.com/avatar2.png" alt="friend" />
            </div>
            <div class="message-content">
                <p class="name">Jane Doe</span></p>
                <p class="date">8/21/2022</span>
                <p class="chat-message">Hi there!</span>
                <span class="material-icons-outlined reply-icon"> reply </span>
            </div>
        </div>
        <div class="chat-self">
            <div class="profile">
                <img class="avatar" src="https://example.com/avatar1.png" alt="self" />
            </div>
            <div class="message-content">
                <p class="name"">John Doe</span></p>
                <p class="date">8/21/2022</span>
                <p class="chat-message">Hey!</span>
                <span class="material-icons-outlined reply-icon"> reply </span>
            </div>
        </div>
    </div>
    <div class="input-box">
        <input type="text" id="message" placeholder="Type a message here">
        <button id="send">Send</button>
    </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

Utilizing AJAX and jQuery to dynamically load a div instantly, followed by automatic refreshing at set intervals

I am utilizing jQuery and AJAX to refresh a few divs every X seconds. I am interested in finding out how to load these divs immediately upon the page loading for the first time, and then waiting (for example, 30 seconds) before each subsequent refresh. I h ...

javascriptphpjqueryajax

Looking for a way to scroll images without relying on the marquee tag? Whether you prefer using JavaScript, jQuery,

<marquee> <div class="client"> <img src="images/c1.png"/> </div> <div class="client"> <img src="images/c2.png"/> </div> <div class="client"> ...

javascriptjqueryhtmlcss

Using jQuery to automatically scroll to the bottom of a div when sliding down

When a user clicks on a link to slide the div down, I want it to automatically scroll to the bottom of the div. I've attempted to use scrollTo and animate methods to achieve this effect. $('html, body').animate({ scrollTop: $("#elementID") ...

javascriptjqueryhtmlcss

React Hamburger Menu not working as intended

I am facing an issue with my responsive hamburger menu. It is not functioning correctly when clicked on. The menu should display the navigation links and switch icons upon clicking, but it does neither. When I remove the line "{open && NavLink ...

javascriptcssreactjsuse-statehamburger-menu

Removing an element in Vue.js

Can someone help me with a Vue.js issue I'm having? I'm working on a quiz and I want to add a button that deletes a question when clicked. Here's what I've tried so far: deleteQuestion(index) { this.questions.splice(index, ...

javascripthtmlvue.js

Concealing URL parameters in ui-sref (using ui.router)

Here is the HTML code I am working with: <a ui-sref="videoParent.Display.video({videoName:'[[sVid.slug]]', videoId:'[[sVid.videoID]]'})"><p>[[sVid.name]]</p></a> The parameters videoName and videoId are retriev ...

javascriptangularjsangular-ui-router

Troubleshooting: Difficulty parsing data due to missing special characters

https://i.stack.imgur.com/SWOgr.png When attempting to access a table similar to the one shown above through ajax, I am encountering an issue where certain characters (such as ' and ") are not displaying. Why is this happening? Below is the code sni ...

jqueryjsonspecial-characters

Tips for enabling resize functionality on individual components one at a time

Check out my Codepen link for the resizable event While using Jquery UI resizable, everything is functioning correctly. However, I am now looking to have the resizable event activate one block at a time. When another block is clicked, the resizable event ...

javascriptjqueryhtmlcss

Prevent users from downloading images

I'm trying to prevent image downloads by regular users, like so: <div style="background-image: url(img.jpg); background-size: cover; background-repeat: none; "> <img src="wtrmrk.jpg" style=" opacity: 0; " /> </div> If the img.jpg s ...

htmlcss

Is the user currently browsing the 'Home screen webpage' or using the Safari browser?

In JavaScript, is there a method to determine if the user has accessed the website from their home screen after adding it to their home screen, or if they are browsing via Safari as usual? ...

javascriptioshtmlmobilesafari

Utilizing Angular to Handle Undefined Variables in String Interpolation

Seeking a way to showcase data obtained from an external API on a webpage using Angular's string interpolation. If no data is retrieved or is still pending, the aim is to display 'N/A'. An attempt was made following this method, but encoun ...

htmlangulartypescript

Import MDX metadata in Next.js on the fly

I am currently utilizing Next.js to create a static blog site. Following the guidelines in Next.js documentation, I set up @next/mdx and successfully imported MDX statically using import MDXArticle from "@/app/(article)/2023/test-article/page.mdx&quo ...

javascriptreactjsnext.jsmdx

Display a comprehensive inventory of all bot commands within a designated category

When a user executes a command, I have various commands categorized and would like to present them accordingly. For instance, consider the following command: const Discord = require('discord.js') const { MessageEmbed } = require('discord.js& ...

javascriptnode.jsdiscorddiscord.js

Errors in AJAX calls can sometimes result in an "ERR_EMPTY_RESPONSE" being

I'm currently working on a small CMS/Social network project for a school, which is quite complex and heavily relies on AJAX technology. Randomly, I encounter issues where calls are blocked and the browser displays an error message like net :: ERR_EMPT ...

jqueryajax

Deciphering the Essence of Promise Sequences

In my NodeJS project, I am utilizing Promises and aiming to gain a better understanding of Promise.chains. Within the project, there is one exposed function: This main library function returns a promise and it is intended for users to call. After calling ...

javascriptnode.jspromisees6-promise

When the onclick function is triggered, two or more characters will be displayed

Functionality: To input name and email, users must click on the virtual keyboard displayed on the screen. Characters entered will be shown in the input box. Implementation: The HTML keyboard interface and associated script have been developed successful ...

javascriptjqueryhtmlkeyboard

Guide to verifying the property value following mocking a function: Dealing with Assertion Errors in Mocha

Based on a recommendation from a discussion on this link, I decided to mock the readFileSync function and then mocked my outer function. Now, my goal is to verify whether the variable's value has been set as expected. file.js const fs1 = require ...

javascriptnode.jsunit-testingmocha.jssinon

Is the useNavigate() function failing to work consistently?

Currently facing an issue while working on a MERN Web App. When logging in with an existing account, the backend API call returns user properties and a JWT Token. Upon saving it, I use the navigate function to redirect the User to the homepage. Everything ...

javascriptnode.jsreactjsreact-hooksreact-router-dom

Is it possible to retain various delimiters after dividing a String?

In the code below, the someString gets split into an array using specified delimiters in separators var separators = ['\\.', '\\(', '\\)', ':', '\\?', '!&apos ...

javascriptnode.js

Creating a dynamic and interactive table with Angular and the amazing angular-responsive-tables library

I am currently working on creating a responsive table using AngularJS. To demonstrate what I am trying to achieve, I have put together an example in this fiddle: https://jsfiddle.net/loredano/xnyzaLnu/1/ <tr ng-repeat="product in products" > &l ...

htmlcssangularjs