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

Interactive Vue components with dynamic children and sub-children

In my Vue application, I have a component called Address.vue which contains a child component called Contact.vue. One address can contain multiple components What I have accomplished: I have implemented the functionality in the Address.vue component t ...

javascriptvue.jsecmascript-6vuejs2

How to retrieve a value from an Angular form control in an HTML file

I have a button that toggles between map view and list view <ion-content> <ion-segment #viewController (ionChange)="changeViewState($event)"> <ion-segment-button value="map"> <ion-label>Map</ion-label> & ...

javascripthtmlangulartypescriptionic4

Stop receiving notifications for channel events in Stream with the GetStream.io Chat API

I'm having trouble understanding how to stop listening for channel events in JavaScript using the Stream Chat API. According to the documentation: // remove the handler for all "message.new" events on the channel channel.off("message.new", myChanne ...

javascriptangulargetstream-io

"An undefined message will be displayed in AngularJS if there is no content

When the two textboxes are left empty, you will see errors as 'undefined' displayed. These errors disappear once content is entered. The code I have written looks like this: Default.aspx <div ng-app="Welcomecontroller" ng-controller="FullNa ...

javascriptangularjs

Utilize fetch API in React to streamline API responses by filtering out specific fields

I have received an API response with various fields, but I only need to extract the description and placeLocation. results: [{placeId: "BHLLC", placeLocation: "BUFR", locationType: "BUFR",…},…] 0: {placeId: "BHLL ...

javascriptreactjsjson

Ways to Update Image Source with Jquery by Implementing Effects and Looping

I need to update the image source from image1.png to image2.png (using a fade effect) and make it loop continuously. I tried the code below, but unfortunately, it is not looping back to image1.png. This is my current code: setInterval(function(){ $( ...

jquery

Discovering an <a> element with an href attribute containing two specified strings

Here's what I have: $("a[href*='string1' && 'string2']") Unfortunately, this code didn't work for me. I also attempted: $("a:contains('string1' && 'string2')") The second one only return ...

javascriptjqueryhtml

Setting up button value dynamically according to dropdown selection in Angular 2

I'm a beginner in angular 2 and I have a button with a dropdown. When I select an option from the dropdown, I want its value to be displayed on the button. The CSS code for styling the dropdown is provided below: .common_select_box { width: 100%; } ...

htmlcssangular

What are the key principles of designing web and native mobile applications using React.js architecture?

I am intrigued by the idea of incorporating React.js for server-side rendering into my web service. However, I am facing a challenge when trying to transition from my current web service built with Express.js. At present, my web service caters to two platf ...

javascriptweb-applicationsexpressreactjsisomorphic-javascript

Which is the better option for data storage: JSON files or MySQL database?

I am currently developing a project that utilizes the vis.js JavaScript framework to showcase a visual network of various categories. There are approximately 2000 categories available for selection, each with a substantial amount of associated data. I am ...

javascriptmysqljson

Why aren't variables showing up on the right when using writeFileSync in Node.js?

I'm attempting to insert a variable as ${Y} but instead of getting the actual data in Y, my output is showing (how can I write variable ${Y}). Does anyone have a solution for this? const fs = require('fs'); const Y = fs.readFileSync('./ ...

javascriptnode.js

Tips for separating these two words onto two separate lines

I created this box using Angular Material, but I am having trouble breaking the words "1349" and "New Feedback" into two lines. Here's an image included in my design. Any tips on accomplishing this in Angular Material? Thank you! <style> . ...

htmlcssangularjsangular-material

Are you struggling with perplexing TypeScript error messages caused by a hyphen in the package name?

After creating a JavaScript/TypeScript library, my goal is for it to function as: A global variable when called from either JavaScript or TypeScript Accessible via RequireJS when called from either JavaScript or TypeScript Complete unit test coverage Th ...

javascripttypescriptnpmumd

Angularjs - Transferring the $scope object to a controller

While taking Angular's complimentary online course, I came across the following code snippet: app.controller('GalleryController', function(){ this.current = 0; this.setCurrent = function(imageNumber){ this.current = imageNumber || 0 ...

javascriptangularjscontroller

Oops, it seems like there was an issue with NextJS 13 Error. The createContext functionality can only be used in Client Components. To resolve this, simply add the "use client" directive at the

**Issue: The error states that createContext only works in Client Components and suggests adding the "use client" directive at the top of the file to resolve it. Can you explain why this error is occurring? // layout.tsx import Layout from "./componen ...

javascriptreactjstypescriptnext.js

How can we eliminate the modal-open class in Angular when transitioning to a different URL?

Currently, I am facing an issue with a bootstrap modal. There is a button inside the modal which upon clicking should navigate the current component to another component named 'questions'. The problem arises when the new component is loaded, as t ...

javascriptjqueryangularbootstrap-4bootstrap-modal

What is the best way to identify when a page has been refreshed in Reactjs?

Imagine a set of pages with steps: 1, 2, and 3. If a page reloads during the second or third step, it must be directed back to the first step. Is there a way to identify when a page has been reloaded? ...

javascriptreactjs

Tips for combining data from various sources in GraphQL

Need some guidance on setting up GraphQL as a beginner. I am facing challenges in efficiently setting up resolvers for my schema, especially when dealing with fields from different backend APIs. type User { name: String address: String dateOfBirth ...

javascriptgraphql

Is there a possibility of Typescript expressions `A` existing where the concept of truthiness is not the same as when applying `!!A`?

When working with JavaScript, it is important to note that almost all expressions have a "truthiness" value. This means that if you use an expression in a statement that expects a boolean, it will be evaluated as a boolean equivalent. For example: let a = ...

javascripttypescript

What steps are needed to configure ESLint to exclusively analyze .ts files?

I need ESLint to exclusively focus on processing .ts files and not .js files. In order to achieve that, I made a .eslintignore file and included the following lines: *.js **/*.js Nevertheless, it appears that ESLint is disregarding this file. Is there so ...

javascripttypescripteslint