Determine the true size of a hidden element that was dynamically generated

I've designed a div element that initially displays only 180 characters, hiding the rest of the content.

When a user clicks on the 'viewmore..' link within this partially hidden div, all the content becomes visible and a 'showless...' link appears to revert back to the original state.

This final HTML structure utilizes JavaScript to control the hide/show functionality:

The 'shortcontent' div shows 180 characters, while the hidden 'allcontent' div holds the remaining text. The 'morelink' hyperlink toggles the visibility of the 'allcontent' div.

var html = '<div class="shortcontent" id="shortcontent">' + c +
                '</div><div class="allcontent" id="allcontent">' + content +
                             //view more hyperlink
                '</div><span><a href="javascript:void(0);" class="morelink">' + config.moreText + '</a></span>';

            $this.html(html);
            $this.find(".allcontent").hide(); 
            $('.shortcontent p:last', $this).css('margin-bottom', 0);

I'm struggling to accurately measure the height of the 'allcontent' div after the user clicks the 'view more...' link. The current code returns 364px instead of the expected 1850px.

It seems like the height calculation is happening before the click operation is fully executed.

How can I ensure that the 'allcontent' container is completely expanded before retrieving its height in the click event below?

$(document).on( 'click', 'a', function () {            
         var explore = $('.allcontent').outerHeight( true );
         //How do I wait for the click operation to complete here?
});

To help illustrate my issue, I've created a fiddle:

https://jsfiddle.net/sonashetty/nca7grfp/3/

javascriptjqueryhtmlcss

Answer №1

This solution is sourced directly from this reference and appears to be an effective workaround:

var selectedElement = $('selector');
var storedStyles = selectedElement.css(['top', 'overflow', 'height']);
selectedElement.css({
  top : 0,
  height : 0,
  overflow : 'scroll'
});
var trueHeight = selectedElement.prop('scrollHeight');
selectedElement.css('top', storedStyles);

By utilizing this code, the variable trueHeight will hold the accurate height of the element before reverting it back to its original CSS styling.

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

When scrolling, the fixed menu bar at the top of the page is making the content below jump

I am attempting to create a fixed submenu that sticks to the top of the page when scrolling, but I am encountering some issues. The current code I have is as follows: $(window).scroll(function () { if ($(window).scrollTop() > 175) { $('#loca ...

javascriptjqueryhtmlcss

Does the ThreeJS Bloom Example provide the desired outcome when copied line by line?

Comparing the results of my bloom filter with an online example reveals some discrepancies. Online Example: https://i.sstatic.net/l7hOtm.png My Output: https://i.sstatic.net/vc7ytm.png Although I have copied the example code exactly, my output does no ...

javascriptreactjsthree.jsreact-three-fiber

The issue of req.file being consistently undefined in Node.js multer

I am having issues trying to upload a file using multer because the req.file is always undefined and the destination folder remains empty: Server: var express = require('express'); var multer = require('multer') var app = express(); ...

javascriptnode.jsmulter

Is it possible for me to disregard Highcharts Error #15 until the feature is functioning properly?

Recently, I encountered a challenge while working on a highchart that involves both columnRange and column components. Initially, there were some difficulties in structuring the data properly, but with perseverance, I was able to achieve the desired outc ...

javascripthighcharts

Exploring the HTMLUnknownElement using jQuery.find() and an XML file

Trying to load an XML document (specifically, an RSS feed) through an Ajax request to parse and incorporate information into my webpage. Surprisingly, the code functions properly in Firefox, Opera, Chrome, and Safari but encounters issues with IE7. Upon i ...

jqueryxmlajaxinternet-explorer

Why won't the Laravel Livewire click function work after the PJAX container refresh?

I am currently using the pjax library in my application, and I recently integrated Livewire. However, I am facing difficulties in making them work together. Specifically, my issue is as follows: In my application, I have a grid displaying products with an ...

javascriptajaxlaravellaravel-livewirepjax

Transform data into JSON format using AJAX in CodeIgniter

I am having trouble with converting json code in CodeIgniter for pagination. I am using ajax to control the data conversion to json and sending it to the view. Can someone please explain how to do this? In the controller, instead of using a foreach loop, ...

phpjqueryajaxjsoncodeigniter

Extension for Chrome

My goal is to develop a Chrome extension that, when a specific button in the extension is clicked, will highlight the current tab. However, I'm encountering some challenges. Currently, I have document.getElementById("button").addEventListen ...

javascripthtmlgoogle-chrome-extension

How can you prevent the blur event from triggering in jQuery when the next element to receive focus is of a specific type?

I am currently developing a unique form UI where I am working on creating a custom select box replacement. The custom select control consists of a hidden select input within a div, along with anchor elements inside a span that mimic the options of the sele ...

javascriptjqueryevent-handling

The Ajax POST functionality is not functioning properly

When using jQuery ajax post, I am attempting to send my entire page html back to the server. Here is my code: $(document).ready(function () { var pcontent = document.body.innerHTML; var url = new URI().addQuery("pcontent", pcontent); $. ...

asp.netajaxjquery

How can I transfer data to a different component in Angular 11 that is not directly related?

Within the home component, there is a line that reads ...<app-root [message]="hii"> which opens the app-root component. The app-root component has an @input and {{message}} in the HTML is functioning properly. However, instead of opening t ...

javascriptangulartypescript

Utilizing Angular2 to access NPM package (Googleapis)

I am currently developing an Angular2 application that utilizes Webpack for the build process. I want to implement a Google oauth login feature in my application, so I have added the googleapi package from npm. However, I am facing difficulties when trying ...

javascriptgoogle-apinpmangular

The poolSize for Mongoose 4.8.1 seems to be capped at 2 and will not increase further

I'm experiencing an issue where the MongoDB poolSize for connects does not exceed 2, no matter what value I set it to. Running on NodeJS v7.4.0 Using Express v4.14.1 With Mongoose v4.8.1 Here's a snippet of the code: let database_uri = ' ...

javascriptnode.jsexpressmongooseconnection-pooling

jQuery does not have the capability to automatically calculate Value Added Tax on form submissions

I have included this section in my form to calculate the value added tax (VAT): <div class="col-md-4"> <div class="form-check"> <input type="radio" id="vat_on" name="vat" value=&q ...

javascriptjqueryajax

Unable to send an array through ajax call

Looking to transfer data to a PHP script so that the data can be included in the session. The debug console logs show the following: the quant array is accurate and typeof is an object, the JSON.stringified data is of type string, and finally, success f ...

javascriptphparraysajaxsession

Displaying a real-time clock synchronized with the server using Javascript and

I am facing an issue with server time. I want a timer on my website that counts every second, but I need it to be based on the server time rather than the client's time. However, my current script only works with client time: <script> setInter ...

javascriptphpjquery

Assign a unique HTML attribute to a child element within a Material-UI component

Currently, I am trying to include the custom HTML5 attribute "data-metrics" in the span element within the ListItemText Material UI component. However, I am facing some difficulty achieving this as per the specifications outlined in the Component API Docum ...

javascripthtmlreactjsmaterial-ui

Setting the modal option to false in a Messi pop-up dialog box

After attempting to close the Messi pop-up with "$('.messi').remove();" I encountered an issue where the modal set in the pop-up persisted even after its removal, hindering any changes to the web page. Is there a manual way to set modal:false? ...

jquerypopup

Tips for modifying a state without triggering a re-render with the useState hook

I have a unique function onCondChange that triggers whenever the user modifies the value in the TextField. const onCondChange = (conds) => { updateState({ ...state, a: { ...state.a, conds }, b: ++state.b, }) } In this scenar ...

javascriptreactjsreact-hooksrender

Unable to retrieve information using the post method in Express framework

After creating a basic code to fetch data from the client, I am facing an issue where req.body.firstname is showing as undefined. Here is the code snippet: const express = require('express'); const app = express(); const body ...

javascriptnode.jsexpresspost