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

What sets the Event and EventHandler apart from each other in terms of functionality?

I am posting this question to gain clarity on the fundamental distinctions and practical applications of the Event versus EvenHandler. ...

Dispatch keystrokes to a designated text field if they are not taken in by any other input

Is there a way to achieve the functionality seen in apps like Discord, where users can type into the message box even when it's not in focus? I am interested in implementing this feature only if no other input field on the page is currently focused. ...

Expanding columns to reach the full height of the page

Struggling to create three columns within the colmask and threecol div classes, excluding the header and footer. Any suggestions? Check out the website at I've attempted setting the body and html tags to 100% height. I've also experimented with ...

Displaying elements of array in Pug template is a key task for

As a newcomer to the Jade/Pug template engine used in Express, I am faced with a challenge. I need to display the name property of each object within an associative array that is passed as a parameter to my pug template from an express route module. I hav ...

Utilize the $setValidity function within ng-repeat to validate input fields

I am facing an issue with my form that is being repeated in an ng-repeat. Below is a snippet of the form. I need to implement custom validation using $setValidity in the controller. However, I am struggling to access input names by index in the controlle ...

Adjust the form input box height to a different size

Is there a way to adjust the height of the form input box so that the text is positioned close to the top and bottom borders of the box? I attempted to modify the CSS but was unsuccessful. Any suggestions for a Bootstrap CSS solution would be greatly appre ...

Troubleshooting a glitch with passing a variable to a PHP script using AJAX

Explanation of the page functionality: When the quiz php page loads, a user can create a score using a function in quiz.js. This score is then stored in a variable score within quiz.js Once the score is generated, the user must click a button to move on ...

The random number generator in TypeScript not functioning as expected

I have a simple question that I can't seem to find the answer to because I struggle with math. I have a formula for generating a random number. numRandomed: any; constructor(public navCtrl: NavController, public navParams: NavParams) { } p ...

React has been reported to display a Minified React error even in its development mode

Currently, I am utilizing browserify and babel for transpiling and bundling my script. However, a challenge arises when React 16 is incorporated as it presents the following error message: Uncaught Error: Minified React error #200; for more details, kin ...

Arranging checkboxes in harmony with accompanying text using HTML and CSS

Here is the layout I have created using react JS. Below is the code snippet used to generate each checkbox: const CheckBoxItem = ({ Label, item, paramField, change }) => { return ( <div className="Search-Input-CheckBox-Item" ...

Is there a way to dynamically update the text in an HTML element with a randomly generated value using JavaScript?

Currently, I am working on a coding project where I am attempting to create a flip box that reveals the name of a superhero from an array when clicked by a user. The code pen link provided showcases my progress so far: https://codepen.io/zakero/pen/YmGmwK. ...

What could be causing the styled-component's flex value to not update?

I have a sidebar and main content on my website layout. The main content occupies most of the screen space, while the sidebar should only take up a small portion. Both elements are within a flexbox container, with the sidebar and main content as child divs ...

A method in JavaScript to fetch a single variable using the GET request

Although I am new to writing JavaScript, I am currently working on an iOS application that will make use of JavaScriptCore's framework to interpret a piece of javascript code in order to obtain a specific variable. My goal is to establish a GET reques ...

Can JQuery be used to identify the CSS styles applied to selected elements?

Highlight the text by selecting it and clicking a button. If the text is already highlighted, clicking the button should make the selected text return to normal. Can this be achieved using jQuery and a single button? Is it possible to identify the CSS st ...

Tips on automatically centering an image within a div as it is resized

I'm currently working on a website that showcases cards featuring Discord users. Each card includes an avatar image within a div element, and when the user hovers over it, the image expands. However, I've noticed that as it expands, it shifts to ...

Show User-Specific Information Using DataTable

After conducting extensive research, I have been unable to find a suitable example to reference. My goal is to customize my DataTable so that it only displays data relevant to the currently logged-in user (admin accounts will have access to all data). I am ...

Adapting JavaScript functions from IE to work on Firefox and Chrome: A comprehensive guide

I have encountered an issue with a function that retrieves the selected text range within a contenteditable div. While it works perfectly fine in Internet Explorer, it doesn't seem to work in Firefox and Chrome. Could someone kindly provide guidance ...

How can I align 2 images side by side at the top and 1 beside them at the

I'm attempting to recreate an image using Bootstrap to minimize the need for additional CSS. The image I'm trying to replicate can be viewed https://i.sstatic.net/gBaVo.png. I've been struggling with the code and haven't been able to ge ...

Utilizing ExpressJS to save uploaded files using the FileReader object from the front-end

Despite researching multiple posts on this topic, I am still unable to successfully upload a file after numerous adjustments. My React form includes a PDF file upload component which looks like this: <Input onChange={(e) => this.handleFileUpload(e) ...

The value of the variable is failing to be included in the Ajax request being sent to the server via jQuery

I'm encountering an issue with my contact form where I can't seem to retrieve the $_POST values via ajax for saving to a text file. It seems like there might be a problem with my javascript code. Check out the jQuery code snippet below: functio ...