Make the minimum height of one div equal to the height of another div

My query is somewhat similar to this discussion: Implementing a dynamic min-height on a div using JavaScript but with a slight twist.

I am working on a dropdown menu within a WordPress site, integrated with RoyalSlider. The height of the slider div adjusts based on the size of the browser window.

However, I seem to be encountering some unexpected results. I have implemented the code provided as the top answer in the referenced thread and made the necessary adjustments to fit my specific setup:

$("#menu-main-menu > li.menu-parent-item > ul.sub-menu").css("min-height", function(){ 
    return $("#new-royalslider-1").height();
});

As per my understanding, this snippet should set the minimum height of the ul.sub-menu to match the height of the RoyalSlider div.

Nevertheless, it consistently returns a value of 400px, regardless of the actual browser dimensions. Am I overlooking something here?

javascriptjquerycsswordpress

Answer №1

Utilize jQuery's outerHeight() method to obtain the current computed height of your slider, and execute it during page load and when the browser window is resized:

function adjustSliderHeight(){
    $("#menu-main-menu > li.menu-parent-item > ul.sub-menu").css("min-height",
        $("#new-royalslider-1").outerHeight()
    );
}

// Call the function on page load and window resize
$(window).load(adjustSliderHeight).resize(adjustSliderHeight);

See JS Fiddle Demo

Note: To reduce the height by 40px, simply use ....outerHeight()-40. View Js Fiddle Demo

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

problem with custom scroll bars on Chrome and Internet Explorer

Below is the URL for the designated folder The vertical scroll bar is functioning properly across all browsers on my personal computer, however, it appears to be malfunctioning on Chrome and IE of a select few other devices. I conducted a test on a machi ...

jquerycssjquery-uigoogle-chromeoperating-system

The Datatable fails to render the JSON data

Currently, I am dynamically binding a DataTable from a JSON URL and also generating headers dynamically. However, I am facing some issues in passing the JSON data to aaData in the DataTable. Can you please take a look at my code snippet below and provide m ...

javascriptjqueryhtmldatatable

What is the best way to call upon a necessary module from various files?

When working with Node.js, I am using Socket.io in my main.js file like this: const io = require('socket.io')(http); Additionally, I have a separate "sub" file called api.js where I delegate some of my business logic. To include this file, I us ...

javascriptnode.jssocket.io

How to use ajax to add multiple products to the cart in WooCommerce using a single add-to-cart button?

My goal is to utilize ajax in order to add multiple, distinct products to the cart with a single click of a button. The AddToCart-Button is located in SHOP before pagination. Whenever I try to add multiple products to the cart at once, the Ajax request is ...

jqueryajaxwordpresswoocommerce

Utilize the power of modern Javascript to extract and display data from a JSON file by mapping an array and adding it

I've been attempting to construct a table from a JSON file by utilizing the map method in React. I've experimented with two approaches - one using map and the other using a for loop - but so far, I haven't been successful in getting the desi ...

javascriptarraysreactjsjsonecmascript-6

CSS: Specify child element to have a full width of 100%, but appear only 50% wide

Looking at this page, it seems that the header photo is not displaying full width. #wrap { width: 990px; } #content-wrap { display: flex; } .image-header { display: block; width: 100%; } .image-header img { width: 100%; height: auto; } .cont ...

cssflexbox

Change the position of a div by clicking on different content menu buttons to make it go up

I have implemented move up and move down buttons in my context menu for multiple div drops. However, I am facing an issue with moving the div down after clicking the move down button. Here is the code snippet that I am currently using: $(".propertyClass" ...

javascriptjqueryhtml

Javascript function that sets the opacity to 0

Hello everyone, I'm new to SO and seeking some guidance on improving my post! I have a function that sets the opacity of an element to 0 in order to clear it. While this works fine, it becomes burdensome when dealing with multiple elements that requi ...

javascripthtmlfunction

AngularJS experiencing issues with deleting function implementation

Here is my JavaScript code: camListApp.controller("Hello", function($scope, $http, $uibModal){ $scope.del=function(data){ var result=confirm('are you sure?'); if(result==true){ var index=getSelectedIndex(data); ...

javascriptangularjsspringmongodb

Is there an alternative method to retrieve the client's user agent if getStaticProps and getServerSideProps cannot be used together?

I am currently facing a challenge with the website I'm working on as it lacks a responsive design. This means that the view I display is dependent on the user agent of the client. In order to achieve this, I have been using getServerSideProps to deter ...

javascriptnext.js

Issue with loading HTML file correctly in Django

I have been attempting to integrate my Django app with an admin dashboard from a repository on GitHub. After successfully logging in, the app redirects to the dashboard, but only the HTML part loads and none of the fancy features are visible on the dashboa ...

javascriptpythonhtmlcssdjango

React is unable to locate an import statement for Material UI components

I am facing an issue while incorporating material UI components into my React project. The error message I receive is related to an invalid import. Snippet from My Component File import React from 'react' import './middle.css' import Mi ...

javascripthtmlreactjsmaterial-ui

Attempting to flip the flow of marquee loop in javascript

I am currently modifying this code to create a left-to-right marquee instead of the original right-to-left one. However, after successfully changing the direction, the text no longer loops as it did originally. I'm stuck and can't seem to figure ...

javascriptjquerymarquee

What's the best method for efficiently hiding/showing a large number of DOM elements?

Imagine you have a maximum of 100 elements that remain consistent in type and format, but their content changes. These elements are connected to an input field and will update as the user types. What would be the most efficient approach for maximizing per ...

javascriptjqueryhtmldom

Error encountered in Intellij for Typescript interface: SyntaxError - Unexpected identifier

I am currently testing a basic interface with the following code: interface TestInterface { id: number; text: string; } const testInterfaceImplementation: TestInterface = { id: 1, text: 'sample text' }; console.log(testInterface ...

javascripttypescriptintellij-ideasyntaxinterface

Issue with AJAX request on Internet Explorer versions 8 and 9

This script is functioning properly in Internet Explorer 10 and above, as well as Chrome and other browsers. However, it encounters issues specifically with IE8 and IE9. <table id="table" border="1"> <tbody style="display: table-row-group"&g ...

javascriptjqueryajaxcross-browsercross-domain

Center-align columns that are fewer in number than can fit in a row

Just starting out with Bootstrap My HTML structure looks like this: <div class="row"> <div class="col-lg-3"> First Column </div> <div class="col-lg-3"> Second Column </div> </div> Currently, there are ...

htmlcsstwitter-bootstrap-3

What is the best approach for clipping borders in a react-native application?

Take a look at the image showcasing what I aim to achieve with the green button in the layout: Do you see the border above view B? My goal is to have a curved border around the bottom bar. To accomplish this, I've structured views as follows - imp ...

cssreactjsreact-native

Issues with Bootstrap Container on Smartphones

Currently tackling the responsive design aspect of my website, however, I've encountered a bug specifically with mobile devices. Interestingly, testing it on my desktop browser proves smooth sailing, but when attempting on my iPhone, I faced some chal ...

htmlcsstwitter-bootstrapmobile

Investigating the issue of jQuery autocomplete combobox line items breaking in all versions of Internet Explorer. Let's dive into this matter

Having an autocomplete combobox within a div that expands into a dialog box presents visual issues in Internet Explorer. The line items are tightly packed together and the text is not fully visible. To replicate this error, you can obtain the source code d ...

jqueryhtmlcombobox