I encountered an issue where I am unable to subtract from jQuery's .outerHeight() within an if statement

I've been working on creating an ajax request that triggers when a div is scrolled to the bottom. I thought I had it figured out with this code, but I've run into an issue. Everything works fine without subtracting 100 from the elem.outerHeight() inside the if statement. However, I really want to load the extra images before it reaches the very end, so I tried subtracting 100 pixels. Unfortunately, it just won't cooperate. Here's the code with the subtraction:

$('#thubnails').scroll(chk_scroll);

function chk_scroll(e) {
    var elem = $(e.currentTarget);

    if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()-100) {
        loadmoreimg();
        console.log(elem.outerHeight());
    }
}

Anyone have a solution to this problem?

Answer №1

Trying to pinpoint the exact 100 pixels from the bottom is a challenge, but you can opt for a greater or equal approach:

if (elem[0].scrollHeight - elem.scrollTop() >= elem.outerHeight() - 100) {
    // perform actions
}

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

Display PDF in Forge Viewer using PDF Extension - warning generated by pdf.worker.js

Whenever we attempt to display a PDF file using our own API, the pdf.worker.js generates a warning message and the PDF always appears completely white. https://i.stack.imgur.com/IqGML.png All I can see is this (it's a wide PDF that renders fine in t ...

Align list items vertically, even when they have varying heights

I am currently working on creating rows of images, with 3 images in each row. The data being used is dynamic, however, I have provided some sample HTML and CSS below: ul { margin: 0; padding: 0; list-style: none; width: 900px; } li { margin: 0; padding: ...

Vue - Unable to navigate to a different route

I just started working with Vue and attempted to redirect '/home' to '/travel', but for some reason it's not functioning correctly. Can someone please guide me on how to achieve this? What could be the issue with my code? Thank y ...

Automatically unselect the "initially selected item" once two items have been selected in Material UI

As someone new to web development, I'm struggling with a specific task. Here is the issue at hand: I have three checkboxes. If box1 and then box2 are selected, they should be marked. However, if box3 is then selected, box1 should automatically unchec ...

`Unaligned headers`

Encountering an issue with jQuery DataTables where the header of the table is not aligned properly with the body when the table has a horizontal scroll bar and the width is increased. Here is the original datatable without resizing: And here is the datat ...

What might be preventing me from achieving a full-length page using height 100% or height 100vh?

I am currently working on a web application that has a similar layout to Slack. I am facing an issue where the page doesn't take up the full width and height as intended. The problem seems to be that it sometimes only occupies half of the screen while ...

Connect the blade.php file with CSS in Laravel version 5.x

I placed my view.blade.php file in resources\views\admin\login\view.blade.php and used the following code to link it to the CSS file: <link href="{!! HTML::style('css/style.css') !!}" rel="stylesheet">. My CSS file is lo ...

Express displays HTML code as plain text

I am currently facing an issue where I am trying to display an html table on /guestbook.ejs and then redirect it to /guestbook. However, the content of my guestbook.ejs file is being displayed as plain text rather than rendering the HTML code. Below is th ...

Is the presence of the selenium webdriver being registered?

Is there a method to detect if a website can tell I am using a bot while running Selenium WebDriver in Python or Puppeteer in JavaScript? Are there any resources that indicate whether a bot test would be failed, such as Cloudflare or Captcha? Appreciate a ...

What are the implications of utilizing a query string in a POST request?

In our system, POST requests are sent from the frontend to the backend. Instead of using the body to pass data to the server, these requests utilize query strings in the URL params. It is important to note that these requests only contain string parameter ...

Error: The Vue Class-Based module failed to parse due to an unexpected character '@'

When I run the command nmp run serve on my Vue project, I encounter two errors. I am following a tutorial that uses class-based Vue, but I am facing this error with all my imported Vue files. As a newcomer to Vue, I am puzzled as to why this error is occur ...

What could be causing the script to display the object's content inaccurately?

Below is the code for the client side: import {useEffect,useState} from 'react'; import io from 'socket.io-client'; import Peer from './Peer'; export default function TestMeeting(){ let peerName; const [peerList,setPee ...

Jssor's dynamic slider brings a touch of sophistication to preview upcoming images

Incorporating the jssor nearby slider to create a nearly fullscreen display. The goal is to set the opacity of upcoming images to 0.25 when they are not in the main viewport, giving the edges of the upcoming and previous slides a slight transparency. < ...

Increasing the ID of a select input using Jquery

Is there a way to modify the identification of my select field? This select option is dynamically created using PHP. The select input can be accessed through var indirectSelect Despite its simplicity, I am facing difficulty in changing it. I attempted th ...

Issue with JavaScript: Flag set to false does not halt the simple animation

My goal is to initiate animations when the mouse is pressed down and then immediately halt them once the mouse is released. Upon pressing the mouse, I set a flag to true which triggers the animation of the corresponding button that was clicked. However, t ...

The attribute interface overload in Typescript is an important concept to

Consider a scenario where there are multiple payload options available: interface IOne { type: 'One', payload: { name: string, age: number } } interface ITwo { type: 'Two', payload: string } declare type TBoth = IOne ...

When I click on my div, the color does not change as expected

Recently, I wrote a code snippet where there are 9 different div elements each assigned a ".spaces" class. The intention was to change the color of these divs upon clicking on them. However, I encountered an issue where only the first div changes its color ...

The jQuery click and load function are failing to function as expected

Currently, I am facing an issue while trying to load text from a txt document into a div using the following code: $(document).ready(function(){ $('button').click(function(){ $('#contenthere').load('Load.txt'); ...

Fetching data using JSONRequest sample code

I am new to web development and this is my first attempt at using JSON. On the JSON website (http://www.json.org/JSONRequest.html), they recommend using JSONRequest.get for certain tasks. However, I keep running into an error stating "JSONRequest is not ...

After pressing the login button, my intention is to transition to a different page

I am relatively new to web development and working with angular. I have a login component that, upon hitting the LOGIN button, should redirect to another component on a different page. However, currently, when I click the button, it loads the data of the o ...