Guide on centering an unfamiliar element in the viewport using HTML, CSS, and JavaScript

Question

Guide on centering an unfamiliar element in the viewport using HTML, CSS, and JavaScript

In the process of developing my VueJS project, I have successfully implemented a series of cards on the page. However, I am now facing a challenge - when a user selects one of these cards, I want it to move to the center of the screen while maintaining its original position in the list.

I know that by changing the position property from 'unset' to 'relative', I can give the card movement functionality using properties like 'left' and 'top'. But, I need a solution that will automatically center the selected card regardless of its initial position on the screen.

Is there anyone out there who knows how to achieve this using JavaScript?

My intuition tells me that it should be possible to retrieve the current location of the node and then move it to the center of the screen, but I'm not certain about the exact steps needed to make this happen...

For better understanding, here is an image showcasing the situation: CardsProject

UPDATE: As a temporary solution, I have decided to set an absolute position for the card. This method, however, eliminates any CSS transition effect from the card's original position to the center of the screen, causing the card to temporarily lose its place within the deck.

Image before click: click here for image

Image after click: click here for image

javascript html css dom

Answer 1

Answer №1

After tirelessly searching the depths of the internet and debugging my code, I finally stumbled upon the solution.

The key revelation: Avoid using 'relative' positioning!

Instead, a better alternative is to maintain the element's original position while allowing it to move freely with CSS properties like top or left, achieved through the magic of position:sticky;!

By utilizing this approach in conjunction with JavaScript's coordinates documentation, specifically getBoundingClientRect(),

    .getBoundingClientRect()

...I successfully cracked the enigma. The function I devised to calculate a vector between the current object and the center of the screen can be accessed below, yielding X and Y vectors in an array format.

  function calcCenterMove(element){

    /*
    Variables such as X and Y represent the current position of the element (top left corner).
    Width and Height denote the dimensions of the element.
    CX and CY indicate the X and Y coordinates of the screen's center.
    */

    var x       = element.getBoundingClientRect().x;
    var y       = element.getBoundingClientRect().y;
    var width   = element.getBoundingClientRect().width;
    var height  = element.getBoundingClientRect().height;
    var cx      = window.innerWidth / 2;
    var cy      = window.innerHeight / 2;
    var xVector = cx-(width/2)-x;
    var yVector = cy-(height/2)-y;
    return [xVector, yVector];
  }
  var xAxisMove = calcCenterMove(element)[0];
  var yAxisMove = calcCenterMove(element)[1];
  element.style =   "transform: translate("+xAxisMove+"px,"+yAxisMove+"px);";

To elevate the element visually above others, I assigned a z-index value and incorporated a dimming overlay on the screen to restrict user interactions elsewhere.

Issues may surface when resizing the browser window, which warrants separate attention; one potential avenue involves employing an event listener to recalibrate the element's center based on screen adjustments using the same cx and cy parameters outlined earlier (or possibly the entire function).

Nonetheless, the sought-after resolution has been attained, open for utilization by those who may find it beneficial!

For visual aides, refer to the images below:

Initial State

Final Position

Best wishes!

Answer 2

After tirelessly searching the depths of the internet and debugging my code, I finally stumbled upon the solution.

The key revelation: Avoid using 'relative' positioning!

Instead, a better alternative is to maintain the element's original position while allowing it to move freely with CSS properties like top or left, achieved through the magic of position:sticky;!

By utilizing this approach in conjunction with JavaScript's coordinates documentation, specifically getBoundingClientRect(),

    .getBoundingClientRect()

...I successfully cracked the enigma. The function I devised to calculate a vector between the current object and the center of the screen can be accessed below, yielding X and Y vectors in an array format.

  function calcCenterMove(element){

    /*
    Variables such as X and Y represent the current position of the element (top left corner).
    Width and Height denote the dimensions of the element.
    CX and CY indicate the X and Y coordinates of the screen's center.
    */

    var x       = element.getBoundingClientRect().x;
    var y       = element.getBoundingClientRect().y;
    var width   = element.getBoundingClientRect().width;
    var height  = element.getBoundingClientRect().height;
    var cx      = window.innerWidth / 2;
    var cy      = window.innerHeight / 2;
    var xVector = cx-(width/2)-x;
    var yVector = cy-(height/2)-y;
    return [xVector, yVector];
  }
  var xAxisMove = calcCenterMove(element)[0];
  var yAxisMove = calcCenterMove(element)[1];
  element.style =   "transform: translate("+xAxisMove+"px,"+yAxisMove+"px);";

To elevate the element visually above others, I assigned a z-index value and incorporated a dimming overlay on the screen to restrict user interactions elsewhere.

Issues may surface when resizing the browser window, which warrants separate attention; one potential avenue involves employing an event listener to recalibrate the element's center based on screen adjustments using the same cx and cy parameters outlined earlier (or possibly the entire function).

Nonetheless, the sought-after resolution has been attained, open for utilization by those who may find it beneficial!

For visual aides, refer to the images below:

Initial State

Final Position

Best wishes!

Guide on centering an unfamiliar element in the viewport using HTML, CSS, and JavaScript

Answer №1

Similar questions

What is the best way to update a deeply nested array of objects?

Is it a bug that using addClass or toggleClass with JQuery inside a click method does not seem to be functioning properly?

How can I identify when a CSS transition on a particular element has ended if there are several transitions occurring simultaneously?

Identify any fresh elements incorporated into the DOM following an AJAX call

My divs seem to overlap in strange, unpredictable ways depending on the zoom level - it's an odd phenomenon that occurs

Navigating Modal Pop-ups in Django

Obtain asynchronous result from updating state in React

"Exploring the process of retrieving data from a request in Node.js with the help of the Express

Choosing dynamically created components:Making a choice among elements that are generated

Python Automation with Selenium Web Scraping

Encountered a header error while attempting to proceed with the

Following my ajax submission, the functionality of my bootstrap drop-down menu seems to have been compromised

Utilizing Jquery to interchange two values and update styling

Error: The strategy for authentication is not recognized as "login" - Express and Passport

SmartEdit functions properly when spartacus is running using yarn start --ssl, but does not work without SSL enabled

Simple steps for Mocking an API call (Get Todos) using ComponentDidMount in React with Typescript, Jest, and Enzyme

Tips for validating date input in a TextBox using JQuery on an ASP.NET platform:

The TypeScriptLab.ts file is generating an error message at line 23, character 28, where it is expecting a comma

The issue of Next.JS fetch not caching data within the same request

Exploring AngularJS ng-repeat features for custom attribute settings