Pop-up alert for text sections that are longer than a specific character limit

As I work on a website featuring dynamically generated blog posts of varying lengths, I'm looking to restrict the height of each post to 250px. Should a post exceed this limit, I want to truncate it and include a "read more" link that opens a modal overlay to display the full content.

All frontend development is being done using standard HTML, CSS, and JavaScript.

My question is whether there is a tool available that can achieve this functionality out of the box. I've previously used , but it does not support opening a popup modal overlay. Is there a similar tool like readmore.js that has this feature?

javascriptjqueryhtmlcss

Answer №1

If you want to check if the content exceeds the visible height of a div, you can compare scrollHeight with client height like so:

For example, this will show an alert "YES":

<div id="overflow-test" style="height:250px;width:100px;overflow-y:hidden;">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<script>
alert($('#overflow-test')[0].scrollHeight > $('#overflow-test').height() ? "YES" : "NO");
</script>

And this will show "NO":

<div id="overflow-test" style="height:250px;width:100px;overflow-y:hidden;">
   Lorem ipsum dolor sit amet.
</div>

<script>
alert($('#overflow-test')[0].scrollHeight > $('#overflow-test').height() ? "YES" : "NO");
</script>

You can iterate through multiple elements using $.each() to check the height and decide whether to display a read more button or use a modal box.

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

Deciding whether an item qualifies as a Map in JavaScript

I have been working on developing a function that will return true if the argument provided to it is an instance of a JavaScript Map. When we use typeof new Map(), the returned value is object and there isn't a built-in Map.isMap method available. H ...

javascriptinstanceoftypeof

Is there a way to enable editing for a Jeditable (jQuery) span on multiple events?

When using the jQuery extension Jeditable, you have the ability to specify which DOM event will transform a div, span, or other element into an editable text input or textarea. I am interested in having multiple events trigger this transformation. Specifi ...

jquery-pluginsjqueryjeditableedit-in-place

Can anyone tell me what I might be doing incorrectly when comparing these two timestamps?

I am facing an issue while comparing two timestamps in Angular. Here is the code snippet: public isAuthenticated(): boolean { const token = localStorage.getItem('Fakelife'); const lifetime = new Date().getTime(); const result = life ...

javascriptangular

Utilize the data storage API within Next.js or directly in the user's

Struggling to store this ini file on either the server or client, any help would be greatly appreciated. Additionally, I would like to display the ini info in the browser so that clients can easily copy and paste the information. However, I seem to be fac ...

javascripthtmlnode.jsapinext.js

Is it possible to send an email with an attachment that was generated as a blob within the browser?

Is there a way to attach a file created in the browser as a blob to an email, similar to embedding its direct path in the url for a local file? The file is generated as part of some javascript code that I am running. Thank you in advance! ...

javascripthtmlbrowsercross-browser

Help! The CSS height property is not working properly and I'm not sure how to resolve

I'm facing an issue with the height property of a specific div and I can't seem to fix it. SCSS: .security{ border: 3px #1D3176 solid; display: flex; h2{ position: ...

htmlcss

Refresh Bootstrap modal with Ajax update

I have implemented a modal for user profiles on my website. When the "Edit Profile" button is clicked, I want to populate the fields with existing data using Ajax. However, as I am new to Ajax, I am facing difficulties in making it work. Here is the struc ...

jqueryajaxbootstrap-modal

Seeking opinions: jQuery query - How can I combine five separate functions into a single jQuery function?

Snippet of Code: http://jsfiddle.net/chrisloughnane/9AjfU/ The code snippet includes placing .tabs and other elements within an AJAX-loaded jQuery UI modal, functioning flawlessly. In my implementation, each jQuery function slideUp() the div elements not ...

jqueryfunction

Select the correct ID using jQuery

I'm currently working on a project that involves creating a dynamic table populated with data from a database: //[..]Typical code to fetch data from the database //$exp_id is retrieved from the database <td><input = type = 'hidden' ...

phpjqueryajax

Safari failing to load JavaScript on live website

While JavaScript functions correctly both locally and in production on Chrome, I am facing issues when trying to run it on Safari. Despite having JavaScript enabled on Safari and it working fine locally, it fails to work on the production environment. This ...

javascriptjqueryruby-on-railssafarihaml

Is Python being used to track NBA.com stats?

Does anyone have any advice on how to extract NBA.com "tracking" stats using a python script and display them in a simple table? I'm particularly struggling with this specific section of stats on the site. Accessing stats directly from NBA.com can be ...

javascriptpythondatabaseweb-scraping

Error in MVC Ajax with Int32 data type

Whenever I attempt to make an Ajax post request to my controller, I am faced with the following error message: The parameters dictionary includes a null entry for parameter 'id' of non-nullable type 'System.Int32' for method &a ...

ajaxmodel-view-controllerjquery

What is the best way to retrieve and display a well-structured JSON object in a Node

I am currently working on setting up a nodejs server with the following code: var http = require('http'); var port = 1337; http.createServer(function(req, res) { var statusList = { "hasErrors": false, "list" : [ { "id": " ...

javascriptjsonnode.jshttpserver

Tips on creating type definitions for CSS modules in Parcel?

As someone who is brand new to Parcel, I have a question that may seem naive. In my project, I am using typescript, react, less, and parcel. I am encountering an error with typescript stating 'Cannot find module 'xxx' or its corresponding t ...

javascriptcsstypescriptcss-modulesparcel

Monitor constantly to determine if an element is within the visible portion of the screen

For a thorough understanding of my query, I feel the need to delve deeper. While I am well-versed in solving this issue with vanilla Javascript that is compatible with typescript, my struggle lies in figuring out how to invoke this function throughout th ...

javascriptangulartypescript

`@keyup.enter event listener will only be triggered upon pressing the Enter key if the focus is on

My login button only seems to work when I press the tab button after entering my email and password. I would like it to work whenever I press the enter key while on the Login page of this VueJS application. This is the HTML template: <template> ...

javascriptvue.jsenter

Struggling to make css selector acknowledge the margins on the right and left

I am trying to style two inner divs within a containing div by floating the first one to the left and the second one to the right. Additionally, I want to add a margin of 15px on the left for the first div and on the right for the second div. The challenge ...

htmlcss

Explore the Wikipedia API to retrieve a random page along with its associated links

Is there a way to generate a random page using the code generator=random? Unfortunately, it doesn't seem to work with my current code snippet: http://en.wikipedia.org/w/api.php?action=parse&format=json&prop=text&page=Little_Richard&ca ...

jqueryajaxwikipedia-api

Converting CSS properties to MaterialUI Styles in ReactJS: A step-by-step guide

In my CSS, I've included the following code: [contentEditable=true]:empty:not(:focus):before{ content:attr(data-text) } This snippet allows me to display a placeholder inside a content-editable div when it is empty. Since I am using Material-UI ...

cssreactjsmaterial-uijss

Achieve the central element while scrolling on the window

What am I doing wrong? I've been attempting to target the #second element on scroll Here is an example with console.log CODEPEN EXAMPLE $(window).scroll(function(){ var section = $("#second").offset().left, scrollXpos = $( ...

javascriptjqueryscrolloffset