jQuery UI's .position() function fails to account for the height of a target element that has been modified using jQuery

Hey there, experts!

I have a question regarding my HTML code:

<div class="full-height">
    <h1>Lorem</h1>
</div>

Currently, I am using jQuery to set the height of div.full-height dynamically like this:

$(document).ready(function() {
    function setHeight() {
        viewportHeight = $(window).height();
        $('.full-height').height(viewportHeight);
    };
    setHeight();

    $(window).resize(function() {
        setHeight();
    });
});

Now, I want to center the position of the h1 within div.full-height using jQuery UI like so:

$('.full-height > h1').position({
    my: 'center center',
    at: 'center center',
    of: '.full-height'
});

The issue I'm facing is that it only works correctly when I set a fixed height property in CSS.

When div.full-height has a full height but the h2 inside it remains stuck at the top because jQuery UI's .position() method doesn't recognize that div.full-height has 100% height.

Any suggestions on how I can resolve this?

Thanks,

Ralph

javascriptjqueryhtmlcssjquery-ui

Answer №1

Hello experts

That was a speedy resolution! :-)

I successfully tackled the issue by incorporating the jQuery UI function within the resizing function, shown below:

$(document).ready(function() {
    function adjustHeight() {
        viewportHeight = $(window).height();
        $('.full-height').height(viewportHeight);
        $('.full-height > h1').position({
            my: 'center center',
            at: 'center center',
            of: '.full-height'
        });
    };
    adjustHeight();

    $(window).resize(function() {
        adjustHeight();
    });
});

Many thanks!

Best regards

Ralph

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

PHP form submission upon conditions being satisfied

I am not utilizing Javascript as it is disabled in my current environment. Here is the code that I would like you to review. I am attempting to use PHP to replicate the functionality of Javascript or jQuery's simple : document.form2.submit() <div ...

phpjavascripthtmlformssubmit

Streamlined method for handling child elements within the DOM

I am striving to achieve a randomized shine effect on specific text using CSS animation. I currently have a functioning code, but I am interested in learning if there is a more efficient or straightforward solution. HTML: <span class="foo"> < ...

javascriptjquerycssperformance

Label Overlapping Issue in React Select

Utilizing react-select version ^5.1.0, I am encountering an issue where the word "select" overlaps with the options when scrolling. An image has been attached for better clarification. How can I eliminate the occurrence of the select word overlapping my op ...

javascriptreactjs

Using yargs to pass parameters/arguments to a Node script through an npm script

Is it feasible to retrieve a key from yargs when utilizing as an npm script argument? A user inputs in the OSX terminal: npm run scaffold --name=blah which triggers in package.json: "scaffold" : "node ./scaffold/index.js -- " This leads to const yar ...

javascriptnpmyargs

Switching the menu based on screen size successfully functions for the div element, however, it does not

Currently, I am working on creating a responsive menu. The structure of my menu is set up as follows: HTML: <ul id="top-menu"> <li class="active"> <a href="#">HOME</a> </li> <li> <a href="#div2">ABOUT</ ...

htmlcssmedia

Classifying the HTML Dropdown

Hello everyone, I am curious to know if there is a way to group HTML dropdown list options based on their first letters. For example, if I generate a dropdown list dynamically from a database using a v-for loop in Vue.js, is it possible for th ...

htmlvue.js

graphic map and paintbrush

I've implemented an image map using shape circles, but now I'm looking for a way to draw visible circles or icons on the map. Is there a solution for this issue? Currently, I have used a canvas overlay on the image to draw on it This method wo ...

javascriptcanvasimagemap

Validating Form Inputs using JQuery and Bootstrap 4 to Enhance User Experience

I came across a helpful post about using Bootstrap with jQuery Validation Plugin, but it's specifically for Bootstrap 3, not Bootstrap 4. I've been trying to integrate JQuery Validate with Bootstrap 4, but I'm struggling to make the label a ...

javascriptjquerytwitter-bootstrapbootstrap-4jquery-validate

Populating a read-only field with information from a database upon selecting an option

My goal is to select a name from an option field and then display the user's ID in a non-editable field. Essentially, when I choose a username, I want to automatically show their user ID. Below is the PHP and HTML code I currently have: <form id=" ...

phphtmlsql

The anchor is ineffective (directs to the # but stays in place)

Every attempt I've made to find a solution online has failed. When I hover over the link, it directs me to the correct URL, but the page doesn't move. I'm using an up-to-date version of Chrome. Below is the code snippet: Edit: It seems tha ...

htmlcssanchor

Encountering the error message: "Function arguments could not be parsed ()=>"

Here is the code I have written: projectDependencies.forEach((val)=> { container.register(val[0],function () { return require(val[1]); }); }); When I execute the command nodemon server.js, I encounter the following error: Error: c ...

javascriptnode.jsexpressecmascript-6

Ways to ensure that my webpage showcases the most recent transactions

I have a piece of code that retrieves information from a server and displays it on my page. It works perfectly fine on the first try. However, if I navigate to another page, update some transactions, and return to the original page, it only shows the initi ...

jqueryajaxjquery-mobile

How can nested arrays be utilized in Angular 2 reactive forms?

After successfully using a tutorial to create reactive forms in Angular 2, I encountered a new challenge. The tutorial helped me set up an 'Organisation' form with an array of 'Contact' groups, but now I am struggling to add an array wi ...

javascriptangulartypescript

What is the CSS code to modify the color of an SVG ::marker?

I am looking to change the color of an SVG li::marker based on the font color. I attempted using fill="currentColor" but it did not work as expected. Any suggestions on how to resolve this? li::marker { content: url("data:image/svg+xml,% ...

csssvg

Ways to assign identical values to each element within an array

Currently, I am working on a JavaScript project and encountered a response from one of my arrays. The structure of the array is as follows: Original Array Structure: [ { test_name: 'comp 1 test 1', program_id: 1, }, { test_name: &ap ...

javascriptarraysjsonnode.js

Troubleshooting: Node.js not receiving data from HTML form

I am currently facing an issue with my HTML form and Node.js server. Despite implementing a form that is supposed to send data to the server, no information is being transferred. The form successfully makes a request, but it fails to send any form data alo ...

javascripthtmlnode.jsexpress

The elimination function in JavaScript

I've been browsing the Mozilla Developers website, focusing on the concept of the delete operator. In the final section about "Deleting array elements," there are two similar scripts presented, with the only difference being how they modify the array. ...

javascriptarrays

Sending Ajax data with an extra parameter

I've encountered an issue with a jquery script that I'm using to send serialized form data along with a modified variable. Despite trying various methods, the additional variable isn't being posted. One approach that seemed promising was ut ...

jqueryajax

Maximizing the potential of PJAX with Express and EJS: A guide

Hey there, question coming from a newbie in the world of coding. I've been struggling to make pjax work for quite some time now without any success. The closest I've come is seeing some activity in the terminal, but when I click on the link, it ...

javascriptexpresspjax

Is it possible for a conditional type in TypeScript to be based on its own value?

Is it possible to use this type in TypeScript? type Person = { who: string; } type Person = Person.who === "me" ? Person & Me : Person; ...

javascripttypescript