Additional pixels for chat scrolling in AJAX are needed

Hey there! I finally cracked the code on how to prevent chat scrolling when a user scrolls up to read, and then resume scrolling once they reach the bottom.

However, I've encountered a hitch - the chat adds an extra 17px when I set a size for each post. No matter what size I specify, that pesky 17px stays put.

Here's a snippet of my code:

scrollTop + divHeight : scrollHeight : amountOfPosts

809 : 792 : 11
881 : 864 : 12

You'll notice that scrollTop + height exceeds the scrollHeight by just 17px. So, where are these mysterious 17px coming from? I need to identify the culprit responsible for adding them so I can adjust my chat dynamically instead of manually.

Check out this live jsfiddle example: http://jsfiddle.net/Yp33R/

javascriptjqueryhtmlcss

Answer №1

It seems that the 17px measurement corresponds to the height of your horizontal scroll bar

Answer №2

Within your javascript code, you have included the <br /> element which is unnecessary. It can be simply removed.

Check out the demonstration here: http://jsfiddle.net/Yp33R/1/

Make the following change:

$("#sub").click(function() {
        am++;
        var m = $("#form").val();
        obj.html(obj.html() + "<div id='post'>" + m + "</div><br />");

Replace it with:

$("#sub").click(function() {
        am++;
        var m = $("#form").val();
        obj.html(obj.html() + "<div id='post'>" + m + "</div>");

Additionally, remove the height: 50px; property that you've set on #post in your CSS. This property is automatically applied and doesn't need to be manually set.

Here's the updated demonstration link: http://jsfiddle.net/Yp33R/3/

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

Choose all div elements except for those contained within a certain div

Having trouble with an IE7 z-index fixer that's affecting specific elements. I'm attempting to select all divs, excluding those nested within a particular div. Below is the jQuery code I'm using, but it's not functioning correctly: & ...

javascriptjqueryhtml

Search for a specific folder and retrieve its file path

Is there a way for me to include an export button on my webpage that will allow users to save a file directly to their computer? How can I prompt the user to choose where they want to save the file? The button should open an explore/browse window so the ...

phpjavascriptjquery

Having difficulty in getting a hyperlink to open in a new tab with _blank attribute

I'm currently working with this code for my link. <a href="https://dribbble.com/jamesfrewin"><img class="socialicon" src="images/icons/dribbble_dark.png" onmouseover="this.src='images/icons/dribbble_pink.png'" onmouseout="this.src= ...

htmlhyperlink

Exploring the topics of Subjects in RxJs and EventEmitters in Angular2

Can you explain the distinction between these concepts, along with guidance on when and how to utilize them? I've come across the idea that Subject is akin to an EventEmitter. If I aim to rephrase this information, what approach should I take? impor ...

javascriptangularreactive-programmingrxjs

What could be causing the data storage issue in the state?

Using axios, I am fetching data and storing it in a state variable useEffect(() => { getCartItems(); }, []); const [abc, setAbc] = useState([]); const getCartItems = async () => { let data = await CartApi.get(`/${store.getState().auth.user.id}/ ...

javascriptreactjsaxios

Is there a way to track whether a user has logged into the Google Chrome browser using cookies?

While the LSID cookie can indicate if a user is logged into a Google account, it cannot be reliably used to determine if someone is signed into the Chrome browser because it may also appear when a person is signed into Gmail without being signed into Chrom ...

javascriptgoogle-chromeauthenticationcookiesgoogle-chrome-extension

The background image spanning across the entire screen, not just confined to the center

view image details here Can anyone explain why my background image for the main game is displaying like this? I want to set it for the entire screen as I have different backgrounds planned for the menu of the game and the game itself. Any suggestions to ma ...

javascripthtmlcsswebgame-development

Are there any methods to alter the current preFilters within jQuery?

Is there a way to access and manipulate the internal jQuery preFilters using the jQuery.ajaxPrefilter() function? In version 1.11.1, I noticed a private preFilters object declared on line 8568, but it doesn't seem like there is a built-in method to in ...

javascriptjqueryajax

Bootstrap carousel slide animation isn't transitioning properly

I am encountering an issue with my carousel animation. I am aiming for a slide-out/slide-in effect similar to the Bootstrap website, but instead of sliding out, the old item simply disappears and the new item slides in. I have included a GIF to illustrat ...

htmlcssbootstrap-4

issue encountered when filling out a dropdown menu using a JSON data structure

Seeking assistance with populating a button dropdown in angularjs. Encountering the error message: "Unexpected end of expression: data.WotcSummary "|. Any ideas on what might be causing this issue? Here is the JavaScript file code snippet: WotcDashBoard ...

javascriptangularjs

The presence of an additional bracket is being triggered by the JSON array following

Currently, I am developing a function in Freemarker to iterate through all selected checkboxes and then display the same response on the form itself. The form is structured in Freemarker format, and I am utilizing JavaScript to create separate arrays for e ...

javascriptjqueryarraysjsonpost

Using Ajax and PHP to upload an audio file from your device

I am attempting to upload an audio file. Currently, I am using Ajax to pass the audio file to PHP where the uploading and database insertion will take place. However, after passing it through Ajax, my PHP page is unable to detect the audio file. <sc ...

javascriptphpjqueryajaxaudio

Is there a way to automatically generate distinct IDs for buttons within a for loop in a Django template?

I'm struggling to set a unique ID for a button by combining the post's ID with the button's ID. However, I can't seem to reference this button ID correctly in an AJAX function. As a result, clicking the button doesn't produce any o ...

jquerydjangoajaxdjango-rest-frameworkdjango-templates

html occasionally fails to render in emails

Recently, I created a Java code to send HTML emails. The code works perfectly when sending the emails to multiple recipients at once. Below is the sample code: String content="<html><p><h1>This is my first Java email with an image but wi ...

htmlemailjakarta-mail

JavaScript bug with URL encoding in Internet Explorer 11

I am encountering an issue with Internet Explorer 11 (IE 11) when attempting to call a JavaScript URL function. The problem lies with the URL parameter value, which is in Unicode format but the result displays as ????? instead of Unicode characters. Belo ...

javascriptphpunicode

Combining res.render and redirect in Express.js for efficient rendering and redirection

I am currently developing a web application that involves setting up routes for user authentication. The Challenge: After a successful registration, I want to redirect the user to /login page while also including render options. However, when I use render ...

javascriptnode.jsexpressweb-applicationsroutes

React: when using the custom render method, the input-label pair is not being returned

In my code, I have a custom render method that is supposed to display a label and input pair. Unfortunately, nothing is being rendered on the screen. I have experimented with various solutions but have not been able to identify what is causing this issue. ...

javascriptreactjs

Is there a way to view the text as I enter it while drawing text on an image canvas?

I currently have a canvas setup that allows users to upload an image and display it on the canvas. Users can then input text to be drawn on the image by clicking the submit button. However, I would like the entered text to appear on the image as it is bein ...

javascriptjqueryhtmlcanvasdrawtext

The positioning and floating of two divs are set to fixed without using percentage width, however, the functionality is not

Apologies for my poor English writing :) I am attempting to float two divs side by side in a fixed position, without using percentages. This code works well on most browsers but is not compatible with IE 6. HTML <div class="right"></div> < ...

cssinternet-explorer-6

methods for successfully passing and retrieving a multidimensional array in a C# WebMethod

In order to send and manipulate a multidimensional array in a C# webmethod, I have made some progress. My goal is to avoid running the ajax function in a loop. ASPX page code var trip_id = $("#example1").val(); var user_id = $("#example2").val(); ...

c#jqueryasp.netarraysmultidimensional-array