Messaging feature with chat displayed at the bottom of the container

I am currently working on developing a chat system similar to Facebook Messenger, where new messages are displayed at the bottom. However, I want to include a header that remains fixed in position with the last message and keep a scrollbar for navigation.

Here is my attempt so far... but I'm facing issues with the scrollbar and the header not moving correctly.

It seems that setting "height:auto" in the chat div allows it to flow naturally, which maintains dynamic chat height. If anyone has a better solution to ensure messages stay at the bottom, with the header at the top becoming sticky when messages reach it, please share your insights.

PS: Using only CSS3 display:flex, I have managed to achieve my desired layout here... quite simple. Is it possible to accomplish this without JS?'

javascripthtmlcss

Answer №1

Greetings, behold this

(function(i) {
  $(".click").click(function() {

    if (parseInt($(".chat .placeholder").css("margin-bottom")) > 32) {
      $(".chat .placeholder").css("margin-bottom", "-=50px");
    }

    else if ($(".chat .placeholder").css("margin-bottom") == "32px") {
      $(".chat .placeholder").css("margin-bottom", "0px");
    }

    $(".chat").append("<p>hey " + (++i) + "</p>");
   
   $(".chat").scrollTop( $(".chat").prop('scrollHeight') - $(".chat").outerHeight() );

  })
})(0);
.main .chat {
  width: 100%;
  position: absolute;
  top: 30px;
  background: red;
  box-sizing: border-box;
  height: 200px;
  overflow: auto;
}

.chat p {
  background: blue;
  padding: 16px 20px;
  margin: 0;
}

.main .header {
  position: relative;
  background: yellow;
  height: 18px;
}

p.placeholder {
  width: 100%;
  padding: 0;
  margin-top: 0;
  margin-bottom: 132px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='button' class='click' value='add'>
<div class='main'>

  <div class='chat'>
    <p class="placeholder header">Header</p>
    <p>hello</p>
  </div>
</div>

Answer №2

It has come to my attention what the issue is:

All you need to do is eliminate position: absolute; from .chat

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

Positioning an image on the left side of a div within a flex container using

Here is the code I have: .usp-bar { display: flex; flex-wrap: wrap; background-color: #005932; color: #fff; font-weight: 700; padding: 10px 0; margin-top: 0; ju ...

htmlcss

There is a syntax error in the for-loop within the AngularJS $http.get causing an unexpected identifier

I'm encountering a 'syntax error: unexpected identifier' and my browser seems to be getting stuck in a loop after executing this code. I figured incorporating setInterval for delaying API requests was a sound strategy according to the API re ...

javascriptangularjs

What is the solution for the error message 'Uncaught SyntaxError: Unexpected token import'?

I've been struggling to troubleshoot this issue as I have not been successful in resolving it. Most of the solutions I came across mention configuring Babel correctly, but I am confident that I have already done so. My project utilizes Webpack for imp ...

javascriptreactjswebpack

Is Nextjs the best choice for developing the frontend code exclusively?

When deciding whether to use Next.js or plain React for my front-end development, should I consider that a back-end already exists? If I am not planning to write a new back-end, which option would be better suited for the project? ...

javascriptnode.jsreactjsnext.jsfrontend

What is causing the default switch to constantly loop in repetition?

Currently, I am working on a Discord bot using discord.js and utilizing a switch statement. However, I am encountering an issue where the "default:" case keeps repeating itself every time any other case is executed. I have already investigated for cases w ...

javascriptswitch-statementdiscord.js

Creating a stunning effect with radial-gradient on an image element

I am looking to achieve a fading effect on an element using a radial gradient. While it works when I set an image as a background image, it does not work on the element directly. Is there a way I can accomplish this? My goal is to have the image fade fro ...

htmlcss

Showing JSON data in a popup and returning an ActionResult

I have created a custom controller in MVC with the following ActionResult: [HttpPost] public ActionResult Details([DataSourceRequest]DataSourceRequest command, int id) { //var userDetail = _CustomerDetail.GetAllCustomers(); var g ...

javascriptjqueryjsontwitter-bootstrap-3asp.net-mvc-5

When I hit pause on the main window, the countdown timer on another window will also update

I am working on a project that involves two windows - one with an admin panel to control the countdown timer and another window where the user can see the timer. I want the changes made in the admin panel, like pausing or adjusting the time, to reflect in ...

javascriptjqueryhtmlcountdown

Typescript Error: lib.d.ts file not found

Recently, I experimented with Typescript and utilized the Set data structure in this manner: var myset = new Set<string>(); I was pleasantly surprised that there was no need for additional libraries in Typescript, and the code worked smoothly. Howe ...

javascriptvisual-studiointernet-explorertypescript

Saving information using Socket.io server during the 'connect' event

Currently, I am working with socket.io along with MongoDB and promises. My goal is to save some data in Mongo when the session is established so that further socket events cannot be properly handled until this data is successfully saved. // Below is my si ...

javascriptnode.jsmongodbsocket.io

I am looking to configure a specific MUI dropdown to appear below a particular field

In my scenario, when I click on the select dropdown and a popup appears above the field, I would like it to open below that specific area. The desired behavior can be observed in the code sandbox link provided. I need to configure it to start from below th ...

javascriptreactjsmaterial-ui

Generate a JSON line for each value in the ARRAY

Hello everyone, I'm currently working on implementing handlebars templating and to do so I need to generate a JSON from array values {"path":"Avions", "fileName":"AvionsEdit.vue"},{"path":"Avions", "fileName":"AvionsShow.vue"}etc... While I can cre ...

javascriptjson

Navigate to the same destination with React Router Dom while passing state as a parameter

Let's talk about a scenario with a Link setup like this: <Link to={`/samelocation/${id}`} state={{ state1: 'hello' }}> This link is nested in a sub-component within the main component situated at /samelocation/:id. To ensure that the ...

javascriptreactjsreact-router-dom

issue with duplicating DOM element using function

My situation is unique from the one described in this post. The code mentioned there is not functioning as expected when clicking the clone button. I have even provided a video explanation of how that code works. Unfortunately, I haven't received any ...

javascriptjqueryangular

The functionality of cancel and revert in jQuery Sortable is not behaving as anticipated

Issue (Link to problem demo on jsFiddle) I'm encountering difficulties with the revert setting when used alongside the cancel method in jQuery sortable. The cancel method, as outlined in the jQuery Sortable documentation, explains: Cancels a chang ...

javascriptjqueryjquery-ui

Ways to separate my json object into multiple variables

I am looking to extract the following data: name, meetup, tag from my object and store them in separate variables or objects. Here is my json object: var data = { "MY_ID": 1, "module": [ { "name": "Manch ...

javascriptjson

What steps can I take to ensure that only one panel is opened or expanded at any given time?

Introducing a versatile component/function that showcases a expandable card feature triggered by a button. The <Viewmore> component serves as an image placeholder, essential for SVG images utilization. import React, { useState, useRef } from "re ...

javascriptreactjsuser-interface

Transfer the chosen nodes onto a fresh tree

Currently, I am attempting to transfer all selected nodes from one fancytree control to another on the same page. Despite my efforts with the code below, the second tree remains empty: var sourceTree= $("#tree").fancytree("getTree"); var d ...

javascriptjqueryfancytree

Guide on utilizing the RapidAPI with Excel VBA

I am a newcomer to using RapidAPI. My goal is to extract real-time Cricket Scores from RapidAPI using Excel VBA, however, the programming language is not supported on the platform. I am wondering if there is a way I can directly view the json results thro ...

javascriptnode.jsexcelvbarest

My jQuery Ajax seems to have a glitch, can someone help me figure out

Looking for some help with this HTML code: <section id="login"> <form> <input type="text" name="username" size="10" placeholder="username" /> <input type="password" name="password" size="10" placeholder="password" ...

javascriptjqueryajax