Sending a variable to the resize() function in jQuery

Currently, I am working with two specific divs in my project: "#sidebar-wrapper" and ".j1". The height of ".j1" is dynamic as it changes based on its content. My objective is to set this height value to the "#sidebar-wrapper" element.

I have attempted to accomplish this task by using the following code:

var currentHeight = 0;
$(window).load(function() {
 // Determine the natural height of the page and store it in a variable.

  currentHeight = $('.j1').outerHeight();

  console.log("Setting current height on load = " + currentHeight);

 $("#sidebar-wrapper").resize(currentHeight);  
});

However, I am unsure about the correct method to use in order to set the height of "#sidebar-wrapper".

javascriptjqueryhtmlcss

Answer №1

To ensure that you are able to properly access and modify attributes, consider using the following code snippet. This is especially useful if the element you are targeting with $("#sidebar-wrapper") does not currently exist:

 document.addEventListener('DOMContentLoaded', function() {

           var currentHeight = $('.j1').outerHeight();    
           console.log("Setting current height on load: " + currentHeight);    
           $("#sidebar-wrapper").css('height', currentHeight);
           console.log($("#sidebar-wrapper").height());

        }, false);

Answer №2

Have you attempted adjusting the CSS property height for #sidebar-wrapper?

Check out this JsFiddle example

$("#sidebar-wrapper").css("height", currentHeight);

The .resize method appears to be triggered by changes in window size. You can learn more about the resize event here.

$( window ).resize(function() {
  $( "#log" ).append( "<div>Handler for .resize() called.</div>" );
});

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

Having troubles with delayed state changes due to setState being used within useEffect

I have been working on a slider effect using React Hooks and Redux, and here is the code I am using: const Barchart = ({chartData}) => { let newArray = [] let len = chartData.length const [XArray,setXArray]=useState([chartData]) const [ ...

javascriptreactjsreduxreact-hooks

Pictures are not showing up in the gallery after they have been saved

if (action.equals("saveToGallery")) { JSONObject obj = args.getJSONObject(0); String imageSource = obj.has("imageSrc") ? obj.getString("imageSrc") : null; String imageName = obj.has(" ...

javascriptandroidjson

ColdFusion encounters an HTML form error, presenting the message: "There is an undefined element in the FORM."

I'm attempting to submit an HTML form that contains checkboxes for each day of the week. Whenever a checkbox is checked, I assign a value of 1 to it. To handle unchecked checkboxes, I set a default value of 0 using a CFPARAM tag in the form action pag ...

htmlformscoldfusioncoldfusion-8

What is the best way to generate a tilted slant with text positioned next to it?

.image { min-height: 100vh; } .bg-image { background-image: url('https://picsum.photos/1440/900'); background-size: cover; background-position: center; } <!--About Us --> <div class="container-fluid"> <div class="row no- ...

htmlcsstwitter-bootstrapuser-interface

Encountering an issue that states that jQuery must be included before Bootstrap's JavaScript is causing an

I encountered the following exception: bootstrap.js:240 Uncaught TypeError: Bootstrap's JavaScript requires jQuery. Make sure to include jQuery before Bootstrap's JavaScript at Object.jQueryDetection (bootstrap.js:240) at bootstrap.js:255 a ...

jqueryangulartwitter-bootstrap

Struggling to implement a Datepicker in the date column of a table created using HTML and JavaScript

I am encountering an issue while creating a table in html and javascript. I am unable to use a Datepicker in the date column when inserting a new row, even though it works fine when using in normal html code. Below is the javascript function: //Script fo ...

javascriptphpjqueryhtmlcss

AngularJS is receiving an array of null inputs

I have a form where data from my DB is displayed through WebApi. One of the controls will contain an array of values. There is a scenario where the user can edit and save it using the PUT function. Controller : $scope.Put= function () { $scope.i ...

javascripthtmlangularjsasp.net-web-api

Deploying a node application and a Java JAR to Heroku

Currently in the process of developing a node.js app, with plans to host it on Heroku. The only complication is that the app depends on a jar file that needs to be executed. Can Heroku support running Java for this purpose? ...

javascriptjavanode.jsherokujar

JavaScript: Controlling the ability to enter text based on the chosen option from a drop-down menu

After struggling to make my code work, I decided to create a piece of JavaScript to disable a text input when "Cash" payment is selected from the dropdown menu. On the contrary, I aimed to enable the text input if "Credit Card" payment was chosen. Unfortun ...

javascriptjqueryhtml

Arrange the divs vertically by utilizing flexbox styling

My goal is to use flexbox to vertically align three div blocks. Even though I can successfully align them horizontally, I am facing issues with vertical alignment. What could be the mistake in my approach? .banner { padding- ...

htmlcssflexbox

Guide to encoding data using a multidimensional array in JSON format

I have an array that looks like this: array { [0] => {"ID":"343","name":"John","money":"3000"} [1] => {"ID":"344","name":"Erik","money":"2000"} [2] => {"ID":"346","name":"Ronny","money":"3300"} } My goal is to transfer this data from ...

javascriptphpjqueryarraysjson

How can I dynamically update HTML content in React upon receiving an AJAX response?

Hi there, I'm new to using React and I have a requirement where I need to make an AJAX GET request to the server when a user clicks on a button. Based on the received response, I need to prepare HTML and display it. I tried implementing this with the ...

javascriptajaxreactjsaxios

What is the best way to handle code versioning using Django, Angular2, and Webpack?

Currently, I am utilizing Django in conjunction with Angular 2 and Webpack. Within Django, I have set up a URL to display my application at http://example.com/user/beta. Initially, my index.html file is rendered, which contains my Angular 2 components. Wit ...

javascriptangularjsdjangoangularwebpack

I am having trouble getting Vue.js to function properly within HTML when using Django. Can someone please lend me a

The code run Here is the HTML document: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Register</title> <!--javascript extensions--> <script src=' ...

javascripthtmldjangovue.js

Finding tool for locating object names in JSON

JSON data: [ { "destination": "Hawaii", "Country": "U.S.A", "description": "...and so forth", "images": { "image": [ "hawaii1.jpg", "hawaii2.jpg", ...

javascripthtmlarraysjsondom

The imported `theme` as `theme` was not visible in the file './theme'. The only possible export in the file is `default`

Encountering an error while attempting to export the theme from the index.js file. Below is the snippet of code present in the index.js file. import { createTheme } from "@mui/material"; import shadows from "./shadows"; import typograph ...

javascriptreactjsmaterial-uithemes

Change the way a button interacts with a different element

Currently, I am utilizing SlickSlider from http://kenwheeler.github.io/slick/ and attempting to integrate the Next and Prev buttons with other elements (specifically spans within another container). I have attempted the following: $('button.next&apo ...

javascriptjqueryhtmlsliderslick.js

Verify the MAC address as the user types

I need to verify a form field for MAC Addresses and have implemented the following code that does the job. $('body').on('keyup', '#macAddess', function(e){ var e = $(this).val(); var r = /([a-f0-9]{2})([a-f0-9]{2})/i, ...

javascriptjqueryregex

Personalized validation messages with jQuery

I am currently working on a contact form using jQuery, but I am facing challenges in displaying my custom validation messages. Instead of showing the message I specified, it only displays a small popup with the generic message: "Please fill in the form". I ...

jqueryajaxhtmljquery-validate

When using the v-for directive to display all elements of an array, only the information of the clicked array should be listed when using the

I am facing an issue with my array of locations. There are 2 divs in play - one containing the list of locations and the other displaying additional info when a location is clicked. The problem arises when I click on a specific location, let's say Sc ...

javascripthtmlvue.js