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

CSS3 transition not functioning as expected

.then function not functioning properly in Axios DELETE request in a React project

Using jQuery to remove the 'active class' when the mouse is not hovering

Retrieve the link's "href" attribute and its text if they match the specified text

Looking to recreate this style of table using HTML and CSS?

Execute Validation Function on Every TextField and Radio Button

Commitment of service within AngularJS controller using the "as" syntax

Why aren't the divs appearing on the page?

What's the best way to arrange my containers for optimal placement?

Checkbox Event Restricts Access to a Single Class Variable

Running of code in <script> tag

Using ReactJS to search for and replace strings within an array

"Exploring the Dynamic Display of Ajax with HTML5 Canvas

Step-by-step guide on positioning an image to show at the bottom of a div

Could data be transmitted from the server to the client without appearing in network traffic?

Issues with cascading style sheet navigation designs

The Formik Material UI Localization Provider is not functioning properly when paired with the Luxon Adapter for formatting dates in

Identifying the presence of a mouse inside an element using jQuery

Tips for integrating the AJAX response into a Sumo Select dropdown menu

Displaying selected checkbox values in a URL with parameters using PHP and JavaScript