What is the best way to align the absolute div within a relative div, which is nested inside an absolute flexContainer?

Just to clarify, I am using an positioned flex container for a grid layout. Inside this flex container, there is a positioned element with the class .tileWrapper that expands to fill the space after the animated .tile.

When I click on the tile ( positioned), it flips along the Y axis and changes its size.

I want the flipped .tile to be centered on the screen. And when clicked again, the centering effect should be cancelled. Not sure if this is achievable. Let me know if it's not possible.

HTML MARKUP:

<body>
    <!-- HTML markup goes here -->
</body>

CSS:

* {
    margin: 0;
    padding: 0;
}
/* CSS styling rules */
<!-- More CSS code here -->

FIDDLE

javascriptjqueryhtmlcsscss-position

Answer №1

It appears that you are aiming to have the pop-up positioned centrally on the page. If this is the case, here are the modifications you need to make in your CSS.

.flipped{
  width: 500px;
  height: 300px;
  opacity: 0.9;
  z-index: 10;
  border: 5px solid rgba(255, 255, 255, 0.4);
  -webkit-transform: perspective(700) rotateY(-180deg);
  transform: perspective(700) rotateY(-180deg);
  -webkit-transition: 0.5s;
  transition: 0.5s;
  position: fixed;
  left: 50%;
  margin-left: -250px;
  top: 50%;
  margin-top: -150px;
}

The positioning with left 50% and negative margin is effective due to the specified dimensions of the div, as is the case for the top margin. This configuration ensures the pop-up is centered within the window.

Link to JSFiddle

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

Employing jq to transfer the value of a child property to the parent dictionary

My TopoJSON file contains multiple geometries, structured as follows: { "type": "Topology", "objects": { "delegaciones": { "geometries": [ { "properties": { "name": "Tlalpan", "municip": "012", ...

javascriptjsonjq

Retrieving JSON data from a PHP file through a standalone JavaScript script

I am in need of creating a JavaScript file that will assign values to two variables within a PHP file. The PHP file should then construct a JSON structure and display some data. My goal is to have a form written in JavaScript with two input fields that wi ...

phpjavascriptjsonexternal

Guide for using the submit syntax in the jQuery Validate plugin version 1.14

I have set up a basic contact form in HTML with a jq 1.14 validator and jq 1.11.3. The form uses AJAX to submit data to a PHP script. Everything is functioning correctly, but I've encountered some strange behavior that I'm hoping to resolve. Here ...

jqueryajaxjquery-validate

Having trouble connecting to the http json service in AngularJS

I recently started learning angularjs and I'm facing an issue with my code. There seems to be a flaw in the code and I'm uncertain about it. From a java perspective, the httpController has a nested function defined inside. Below is the code sn ...

javascriptangularjs

How to position text in the center of an image and ensure it is responsive?

I am currently in the process of trying to center the text "WHAT" over the image in col-2. <div class="row"> <div class="col-2"> <div class="stackParent"> <img class="stack-Img" ...

javascripthtmlcssbootstrap-5

Flexbox design that adapts responsively to display 3 items per row, shifting to 2 items and finally

I have a segment with six elements. For desktop, I would like to display 3 items per row; for medium devices, 2 items per row; and for mobile devices, only 1 item per row. <div class="flex-container"> <div>1</div> <div>2</d ...

htmlcssflexbox

Using AJAX and React to handle RESTful requests

Hello there, I am attempting to utilize a web service in React but am encountering issues with the AJAX function. I'm unsure if my code is working as expected. Here is a snippet of my code: prox= {"email":email, "password": password}; //tag comment $ ...

javascriptjqueryajaxreactjs

Ensuring accurate Joomla language on Ajax external file

I am currently working on a customized code within a Joomla-based website that utilizes jQuery Ajax. One challenge I have encountered is incorporating Joomla language variables due to the multilanguage nature of the site. Unfortunately, it appears that th ...

jqueryajaxjoomla

Is there a way for me to recreate the appearance of the outline and labeling found in Material-UI's outlined textfield?

Can anyone help me figure out how to hide the border behind the title text in an outlined textfield from Material-UI that I am trying to imitate? In the image below, you can see "Due Date/Time" taken from Material-UI library where the title hides the bord ...

cssreactjsmaterial-ui

Error encountered in the JavaScript code for the voting up and down system

I have been attempting to implement a script for voting up and down using ajax and jquery from a tutorial. The issue (I believe) is that the tutorial uses jquery-2.1.1, but I am using jquery-1.10.1. This is the HTML section: <div id="links-'.$row[ ...

javascriptjqueryhtmlajax

A guide to displaying a JSON object in a Jade template and iterating through the data

When I pass a JSON string to a jade file for rendering, I am facing an issue where I can only print the entire string and not its individual elements. How can I print specific elements or iterate through the JSON string? app.js: var http = require(&ap ...

javascriptjsonnode.jsexpresspug

"Adding dots" in a slideshow using HTML, CSS, and JS

I'm currently working on a slideshow that includes navigation dots at the bottom. Although the slideshow is functioning properly, I am encountering an issue where only one dot appears instead of the intended three in a row. Despite my research and att ...

javascripthtmlcssslideshow

Delegating events after removing a class

I have a button element with the 'next' data attribute <button data-button='next' class="disabled">next</button> When I remove the disabled class to activate it, the click event doesn't trigger as expected $("[dat ...

javascriptjqueryeventsevent-delegation

Retrieve all HTML elements, including their closing tags, from a file with Java, without relying on external libraries such as Jsoup

Recently, I've been working on a piece of code that reads an HTML file, extracts all the opening HTML tags, and displays them. However, I have been thinking about how to also include the closing tags in the output. At the moment, the code prints: < ...

javahtmlregexfile-io

Leverage the power of jQuery datetime picker in an ASP.NET content page with a repeater control

Can anyone help me with adding a javascript tag to a content page of my asp.net application? The script is working fine with html tags, but it's not functioning properly within the content. Here is the code snippet that displays a datetime picker: &l ...

javascriptc#jquerysqlasp.net

Is the jQuery Autocomplete Filter malfunctioning?

Currently, I am attempting to implement the jQueryUI autocomplete feature, which will retrieve available tags from a backend source. Below is the code I am using: HTML CODE <div class="span4 pull-right"> Search : <input type="text" id="sear ...

jquerypythondjangojquery-uijquery-autocomplete

Tips for sorting data by date in Angular 4

Seeking guidance on how to filter records in a table based on the date column. The current filtering code is generating an error message: ERROR TypeError: Cannot read property 'indexOf' of null temp = [{ "firstName":"Ravi", "date":"2019-04-0 ...

javascriptangular

Photos failing to load in the image slider

Although it may seem intimidating, a large portion of the code is repetitive. Experiment by clicking on the red buttons. <body> <ul id="carousel" class="carousel"> <button id="moveSlideLeft" class="moveSlide moveSlideLeft"></button& ...

javascripthtmlcsscarousel

Guide to resolving this issue with displaying a bootstrap modal on the screen

Attempting to create a Bootstrap popup window by clicking the UPDATE link, but encountering errors with the provided code. How can this be resolved? $(function() { $.get("/Home/GetData", {}, function(data) { ...

jqueryajaxpopup

Can you explain the purpose of ExpiresAbsolute?

In the process of converting an ancient and poorly written ASP page to ASP.NET, I stumbled upon this particular line in the "head" section: <meta http-equiv="ExpiresAbsolute" content="0" /> Despite searching on Google, I couldn't find any mean ...

htmlasp-classic