Extract the height of children from the height of their parent

Hey there! I recently discovered a fantastic plugin that helped me achieve equal heights for all the divs on my website. If you're interested, you can check out the plugin here.

$('.item-container').responsiveEqualHeightGrid();

However, I've run into a little hiccup. I'm trying to get the child divs inside the parent div to be taken into consideration for the height calculation as well.

For instance, I'd like all the "add to cart" buttons at the bottom to align at the same height in the first two columns. The highest height should be the determinant, with the child div being the one to push the button down. Any suggestions or solutions would be greatly appreciated!

Here's an image for reference: https://i.sstatic.net/ZQQVf.jpg

Thanks in advance!

javascriptjqueryhtmlcss

Answer №1

Within the function named responsiveEqualHeightGrid

Include code to modify the height of the bottom child div as shown below:

responsiveEqualHeightGrid(){
    var itemContainerHeight = calculateHeightOfItemContainer(); //method to calculate item-container responsive height
    var imageHeight = $('.item-container img').outerHeight;
    var calculateBottomContainerHeight = itemContainerHeight - imageHeight;

    $('.item-container .bottomContainerWithAddButton').height(calculateBottomContainerHeight);
}

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

Tips for extracting data from JSON values

My JSON Data Display let foodData = [{ meal_com_id: "1", name_company: "PeryCap", image: "https://shopgo.in/upload/1545849409-1518284057-Untitled-nn1.png", status: "1", description: "sdvaebfvhjaebfber itnwiuore tg5ykrgt wiretgi34 tgi3rgt ...

javascriptjson

What is the best way to retrieve the request object within a Mongoose pre hook?

Is there a way to have the merchantID in documents automatically set to the logged-in user found in req.user when saving them? product.model.js: const ProductSchema = new Schema({ merchantId: { type: ObjectId, ref: "Merchant", requ ...

javascriptnode.jsmongodbexpressmongoose

Comparison of button text alignment: stacking vs inline placement

I currently have a button on my webpage labeled "Learn More." Unfortunately, the text on the button is not lining up as it should. Instead of flowing in a line, the text seems to be stacking on top of each other. The HTML code for the button is included ...

htmlcsstwitter-bootstrap

Flow error: Unable to access the value of this.props.width as the property width is not defined in T

In my React Native project, I am utilizing Flow for type checking. For more information, visit: I currently have two files named SvgRenderer.js and Cartoon.js where: Cartoon extends SvgRenderer Below is the source code for both of these files: SvgRend ...

javascripttypescriptreact-nativejsxflowtype

Unable to shift to the side while in full flexibility mode

I ran into an issue with my code, shown in the image below. I am trying to position 1 on the left and 2 on the right, but something seems off. Can you spot the problem? <div className="mt-5 mx-5 py-3 shadow bg-white"> &l ...

htmlcssreactjsbootstrap-5

Using .push() with JSON leads to overwriting existing arrays instead of appending new arrays to my JSON variable

I am currently working on incorporating various user input variables into a JSON array. Each element in the array contains multiple variables that are entered by the user. var Items = { id: `${ID}`, datestart: `${datestart} ...

javascriptjqueryarraysjsondatabase

Accessing form objects in Typescript with AngularJS

I am currently working with AngularJS and Typescript. I have encountered an issue while trying to access the form object. Here is the HTML snippet: <form name="myForm" novalidate> <label>First Name</label> <input type="text" ...

javascriptangularjstypescript

Invoking a JavaScript function within a different JavaScript function

Is there a way to ensure that the JavaScript function works properly even when using a text editor? var editor = $('#CKEditor1').ckeditorGet(); editor.on("instanceReady", function () { this.document.on("keydown", function (event) { ...

javascriptjqueryaudio

Retrieve the HTML structure from an AJAX response

I'm working on an Ajax call in my code: callAjaxController: function(){ var url = Routing.generate('ajax_price'); $.ajax({ type: "GET", url: url, cache: false, success: funct ...

javascriptjqueryajax

Stack three DIVs vertically on the entire screen with a fixed page margin, ensuring no need for a scroll bar

I need help creating a layout with 3 DIVs stacked vertically, each taking up one third of the screen without causing a scroll-bar to appear. I also want an 8px margin around all three of them. Here's an image for reference... example image Ultimatel ...

htmlcssfrontendweb-deployment

What is the best way to align a center column of a precise width that is responsive to different screen

As much as I hate to ask for help with a "how do I do this" question, I'm at my wit's end trying to figure it out on my own. I'm working on a page layout that requires a center column of exactly 960px width to be horizontally centered on th ...

csshtmllayouttwitter-bootstrap-3

Having trouble accessing object properties fetched via API, receiving the error message "TypeError: Cannot read property '' of undefined" in Next.js with JavaScript

Encountering a unique issue specific to NextJs. Fetching data from an API using a custom hook and receiving an array of objects as the result. Successfully logging the entire result (array of objects). const myMovieGenreObjects = useFetchNavBarCategories( ...

javascriptreactjsarraysapinext.js

Creating a stylish zebra pattern using JCrop on the cropping window

Lately, while using jquery jcrop, I've noticed a peculiar design appearing on the cropping window. The details of this pattern are unclear to me. What could be the reason behind the zebra-like pattern visible on the cropping window? Is there any spec ...

javascriptjqueryjcrop

Express template failing to connect with scripts, css, and images

When using Express, I encounter difficulty in getting the css, js, and images to link up correctly when running the index.html file. The images are not showing up and the css and js files are not linking properly. <link rel="stylesheet" type="text/css" ...

javascripthtmlcssexpress

How to dynamically reset an ng-form in Angular

After reviewing the following resources: Reset Form in AngularJS and Angular clear subform data and reset validation, I am attempting to develop a flexible form reset/clear function that would resemble the code snippet below: $scope.clearSection = functio ...

javascriptangularjs

Can you analyze the elements of a td with an onclick event?

[EXAMPLE][1] In this scenario, I am interested in examining the td elements upon clicking a specific button, however, it is important that the button itself is not included when counting the elements within the table. HTML Code: <table id="inspect"> ...

jqueryhtml-table

How can a fixed size block and a responsive block be aligned next to each other?

I am looking to create a centered table that is 900px wide with one row and two cells. The right cell should always be 200px wide, while the left cell should fill up the remaining space. However, I am facing an issue where the right cell jumps below the le ...

htmlcss

Retrieving crucial information from mySQL using jQuery

I have the following jQuery function: $.ajax({ type: "POST", url: "db.php", data: "word="+ tmpWord, success: function(){ //get the word here somehow ^_^ } }); Here is a snippet from db.php: $word = ...

phpjquerymysqlajax

Understanding Namespacing in Vuex with Vue.js

Trying to organize modules' getters, mutations, and actions with namespacing can be a bit challenging. I came across this document, but it didn't provide clear enough information for me. // types.js // Constants for namespacing getters, actio ...

javascriptvue.jsvuex

IE does not support hover effects

Having trouble with a hover effect that works in Chrome but not in MSIE. Are there any alternatives or fixes to make it work in MSIE? The hover/rollover effects I've tried all seem to have this issue in IE. normalize.css demo.css set2.css font- ...

javascripthtmlcss