Tracking the Height of Hidden Elements During Page Resizing

I am currently attempting to determine the height of a hidden element after the page has been resized. More details can be found at this link:

The script is able to successfully log the height upon page load, but when the page is resized, it goes back to 0. I require this element's height to address a bug related to slidedown movement.

At the moment, the script I am using is as follows:

jQuery(document).ready(function(){


        doResize();
        jQuery(window).on('resize', doResize);      

        $("#one").hide();
        $("#two").hide();
        $("#three").hide();
        $("#four").hide();
        $(".orangetoggle").hide();
 });

  function doResize() {
        var orangeheight = $('.orangetoggle').actual('height');
        console.log(orangeheight);
  }

An example of the bug can be seen live, where upon resizing, the log shows 0. However, upon clicking the + / - buttons, it successfully logs the height.

Thank you.

javascriptjquerycss

Answer №1

When dealing with hidden elements, it's important to note that you can't determine the height of an element that is not visible. One approach is to temporarily display the element, retrieve its height, and then hide it again. Another option is to position the element off-screen so that it remains hidden from the user.

One way to handle this situation is demonstrated below:

function calculateHeight() {
    var hiddenElementHeight = $('.hiddenelement').show().actual('height');
    $('.hiddenelement').hide()
    console.log(hiddenElementHeight);
}

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

Guide on using react-highlight-words to emphasize various keywords using different color schemes

I am currently working on implementing a search feature for my React project. At the moment, I am only required to enter a single keyword and search for it within the text. Once found, I need to extract and display the sentences containing this keyword sep ...

javascriptreactjsfull-text-searchhighlight

Expanding the size of a buffer array dynamically in JavaScript while adding items

Within the source table are several records stored. Upon clicking each record in the source table, the AddSelectedItem(sValue) function is triggered, adding those specific records to the destination table. The desired outcome is for the array to dynamica ...

javascripthtml

What is the best way to trigger a jQuery function only after the previous execution has completed?

As I set out to create a full-width image carousel/gallery for my portfolio independently, an initial idea that crossed my mind was simply shifting the entire image block gallery_wrapper to either the left or right by applying a positive or negative margin ...

jqueryfunctionslideshowslideimage-gallery

sending an array from Javascript to PHP

Utilizing JavaScript, I have successfully converted data from a file into an array. Now, my goal is to utilize input from a form to search through this array using PHP and present the results in a table. Despite browsing various solutions for similar probl ...

javascriptphparraysajax

Tips for merging two classes in CSS

Within my code, I have two classes named classA and classB. I am looking to have classB inherit the style of classA while still only using classB. .classA{ width:100px;} .classB{ height:100px;} <div class="classB"></div> ...

htmlcss

When incorporating SQL statements into JavaScript code, it fails to function properly if the NVARCHAR attribute contains a line break

I am currently utilizing a PHP app generator (Scriptcase if that is relevant), while developing a webpage that involves a mix of vanilla JavaScript and SQL queries. After encountering an issue, I have finally identified the root cause. The problem arises ...

javascriptphpsqlssms

offspring of offspring in jquery animation remains stationary

I'm experiencing an issue with a jquery animation on containers that are set to 100% width and height. Specifically, the children elements that have position absolute move with the container, but when a child of a child has two instances of position a ...

javascriptjqueryhtmlcss

Ways to pause for the completion of multiple HTTP promises and display a modal exclusively when all promises result in failure

There are two separate HTTP calls on a page that need to be handled independently. vm.$onInit = function() { .... .... //Retrieve all items during initialization ds.getAllItems().then(function(result){ vm.items = result; },funct ...

javascriptangularjshttppromise

Establishing the Header for CORS AJAX Request

I am attempting to initiate an AJAX call from one server to a JSON endpoint on another server. I have come across suggestions regarding setting the CORS header, but I am unsure about the specific steps required. The issue arises when making a request from ...

jqueryajaxcors

Trouble with Two Divs Layout

My website layout includes links on the left side of the page within a floating div, with content on the right side in another floating div. However, I'm facing an issue where the content moves below the links when the page is resized. I attempted to ...

csshtml

The benefits of installing gulp plugins locally versus globally

Being a newcomer to Gulp, I have a query: should I install gulp plugins (like gulp-sass or gulp-imagemin) locally or globally? Most online examples suggest installing them locally using the --save-dev option. This method saves the modules in the local node ...

javascriptnode.jspluginsnpmgulp

Aligning a row with space between columns

I am looking to display 6 divs on my website with a margin between them for aesthetics. In order to maintain the design when resizing the site, I had to specify widths for the columns. However, I am struggling to center all the cols effectively, despite tr ...

jqueryhtmlcsstwitter-bootstrapwrapper

Steps to load data using ajax-php with specific parameters

I have a situation where I need to trigger a JavaScript function when a link is clicked. <input type='hidden' id='name'> <a href='#' onclick='getUsers(1)'>Click here</a> function getUsers(id){ $( ...

javascriptphpjqueryajax

Move the contents of a div to the right side

One of the issues I am facing is with aligning replies to comments correctly in my comment section. The replies are not aligning properly with the parent comment and it's causing a display problem. Link to JSFiddle for reference Here is the CSS code ...

htmlcsstwitter-bootstrap

Establish a JavaScript hyperlink to assign a value to a shared rendering parameter

In my attempt to create a JavaScript link that, when clicked, assigns a value to a public render parameter in WebSphere Portal, I'm encountering unexpected code instead of the intended value. Here is how I am constructing the link using JavaScript: ...

javascriptwebsphere-portal

JavaScript - Capture user input and store it in a cookie when the input field is changed

Any help with my issue would be greatly appreciated. I'm currently working on saving the value of a form input type="text" to a cookie when the input has changed. It seems like I'm close to getting it right, but unfortunately, it's not worki ...

javascriptjquerycookies

What is the best way to display a child div without impacting the position of other elements within the same parent container?

As I work with a div html tag within a login form, encountering an error inside this form has presented a challenging issue. The error div sits at the top of its parent div, and ideally, upon activation, should remain within the form div without disrupting ...

javascripthtmlcss

I am looking to dynamically add and remove an active link on my sidebar using JavaScript

Looking to create a dynamic website with interactive features like adding and removing active links upon clicking, and smooth transitioning between sections using JavaScript. Feel free to skip over the SVG code. HTML source code <div class="s ...

javascripthtmlbootstrap-5sidebar

How can I efficiently locate identical sequences of cells in two or more arrays?

Unique Example 1 We can explore an interesting scenario by considering two arrays: ('m','o','o','n','s','t','a','r','d') ('s','t','a', ...

javascriptarraysalgorithmpattern-matching

Troubleshooting responsive navigation bar in VueJs: Why are elements not appearing when ToggleButton is clicked?

I'm developing a VueJs single page application and I'm struggling to implement a responsive NavBar. No matter what I try, it just doesn't seem to work as expected. I've experimented with several solutions, and the closest I have come t ...

javascripthtmlcssvue.jsdom