Text centered vertically with jQuery is only loaded after the page is resized

My jQuery script is designed to vertically center text next to an image, but it seems to only work properly after resizing the page.

$(window).load(function () {
    $(function () {
        var adjustHeight = function () {
            $('.vertical-align').height($('.featurette-image').height());
        }
        $(window).on('resize', function () {
            if ($(window).width() > 765) {
                adjustHeight();
            } else {
                $('.vertical-align').height('auto');
            }
        })
    })
});   

Answer №1

Ensure proper functionality upon page load by removing window resize event

$(window).load(function() {
   var adjustHeight = function() {
     $('.vertical-align').height($('.featurette-image').height());
   }
     if ($(window).width() > 765) {
       adjustHeight();
     } else {
       $('.vertical-align').height('auto');
     }
});

Answer №2

It's unclear why the original poster decided to delete their response, but it was accurate. I made adjustments to the code by removing the window resize function.

The revised code is as follows:

$(window).load(function() {
  var changeheight = function() {
    $('.vertical-align').height($('.featurette-image').height());
  }
  if ($(window).width() > 765) {
    changeheight();
  } else {
    $('.vertical-align').height('auto');
  }
});

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

AJAX seems to be struggling to recognize JSON data as JSON format

I am facing an issue with my AJAX call where the data received from the server is not being treated as JSON, despite setting the datatype to json: function RetrieveMateriasFromServer(callback){ var status_aux; //HTTP request for data from the given UR ...

Each time a nested collapse occurs, it triggers its parent collapse

I have come across some similar answers, but they all pertain to accordions, which I am not utilizing in this case. In my code, I have nested collapse items. You can view the code snippet here on CodePen $('#collapseOutter').on('show.bs. ...

Utilizing a numeric array as an associative array in JavaScript

Within a Javascript context, I am tackling an array of objects named users. Accessing users[1].name allows me to retrieve the user's name. I am aiming to utilize the user ID as the index instead of relying on an incrementing counter. For instance, in ...

Implementing inline styles in the HEAD section of a Next.js website

I currently have a blog hosted on Jekyll at , and I'm looking to migrate it to Next.js. My unique approach involves embedding all the styles directly into the HEAD element of each HTML page, without utilizing any external stylesheet files. However, wh ...

Unable to locate additional elements following javascript append utilizing Chrome WebDriver

I have a simple HTML code generated from a C# dotnet core ASP application. I am working on a webdriver test to count the number of input boxes inside the colorList div. Initially, the count is two which is correct, but when I click the button labeled "+", ...

Issue encountered with AJAX multiple image uploader

I'm attempting to create an PHP and JavaScript (jQuery using $.ajax) image uploader. HTML: <form method="post" action="php/inc.upload.php" id="upload-form" enctype="multipart/form-data"> <input type="file" id="file-input" name="file[]" a ...

What are the reasons and methods for storing multiple images within a single image?

Lately, I've observed a trend where websites are consolidating multiple images into one large image, similar to Google's homepage. Although we see many small images on the left side, it is actually just one single image: I am curious about how ...

Address the snack bar problem

In my quest to create a custom snackbar, I have encountered a minor issue with setting and deleting session variables in Node.js. While using global or local variables works well for accessing data on the client side, there is a chance of issues when multi ...

Using JavaScript build-in functions in a Vue template allows for enhanced functionality and

Is there a way to utilize JavaScript built-in functions within a Vue template? {{ eval(item.value.substring(2)) }} I attempted to use the JS function eval() in {{}}, but encountered several errors such as: [Vue warn]: Property or method "eval" i ...

The Socket.io server running on Express is currently not reachable from any external devices

I currently have a basic application using socket.io and expressjs up and running. The application is hosting a simple HTML file, which I can successfully access through my browser. However, when attempting to access it from other devices on my network, th ...

How can I modify the card loading style in Vuetify?

My preference is for the <v-card :loading="loading">... However, I would like to modify the appearance from a linear progress bar to something like an overlay. I am aware that changing colors can be done by binding color instead of using boolean ...

Utilizing async/await in JavaScript within a class structure

I am facing a dilemma in using the new async/await keywords within the connect method of my JavaScript class. module.exports = class { constructor(url) { if(_.isEmpty(url)) { throw `'url' must be set`; } ...

Bokeh is having trouble loading from the CDN

I am currently attempting to embed a plot along with its data by utilizing autoload_static within a straightforward html page that I wish to view locally on my computer. According to the documentation, all I need to do is place the .js file in the specifie ...

Angular - the ngFor directive causing function to be executed repeatedly

I need help with a template: <mat-card *ngFor="let cargo of cargos" class="cont-mat"> ... <mat-checkbox *ngFor="let truck of (retrievingTrucksByUserIdAndRules(cargo.id) | async)" formControlName="truckId" ...

Is it possible to set up VS Code's code completion feature to automatically accept punctuation suggestions?

For all the C# devs transitioning to TypeScript in VS Code, this question is directed at you. I was captivated by the code completion feature in VS C#. To paint a clearer picture, let's say I'm trying to write: console.log('hello') W ...

When implementing variables from input boxes, my SQL query fails to populate any data in the database table

I have been using phpMyAdmin to store test data. As I try to insert data from a form, I encounter an issue where no data gets inserted when using variables in the SQL query. Being new to coding, I am struggling to find a solution to this problem. Additiona ...

React Material Design Cards for Responsive Layouts

Hi there, I am currently navigating my way through Material Design and attempting to ensure that the cards section is responsive by utilizing media queries and flex. However, I have encountered an issue where only a portion of the image is displayed when t ...

Converting Mysqli to PDO for PHP and Ajax Infinite Scroll functionality

Currently, I am in the process of converting my Mysqli code to PDO for an Ajax infinite scroll system that I came across on the internet. My goal is to integrate this into the blog project I am working on to enhance my understanding of PHP. if( isset($_PO ...

Connect to Node-Red websocket server

My server is running node-red with embedded functionality. I am attempting to set up a new websocket listener on the server, but when I run the code provided, the websockets in my node-red application stop functioning properly. const WebSocket = require(& ...

Retrieve the ID of the image element using Jquery from a collection of images within a div container

I'm encountering a simple issue that I can't seem to solve. I am working on a basic slider/gallery with the following functionalities: 1) "If button 1 is clicked, image one will appear." 2) "Clicking on button 2 will make IMAGE 1 slide left and I ...