Centralize dynamically created div on top of another div

Question

Centralize dynamically created div on top of another div

Navigation

#1 by (2 votes)
#2 by (0 votes)

2

How to center the div #windows that is created dynamically with width / height varying, on the div #main-content being that it needs to stay the way it is, not creating it within the div #main-content

<div id="page-wrap">
<div id="main-content">
    <!-- centralizar a div#windows aqui dentro -->
</div>
</div>

<div id="windows"></div>

<style>
#page-wrap {
    position: relative !important;
    margin-top: 0px; 
    margin-left: 170px; 
    width: 768px; 
    height: 593px;
    border-radius: 3px;
    border: 1px solid #8e8e97;
    background-color: rgb(247, 247, 247);
}
#main-content {
    position: absolute;
    width: 100%;
    height: 100%;
    background: yellow;
}
#windows {
    background: red;
    width: 708;
    height: 538;
}
</style>

Demo - JSFiddle

javascript jquery css

asked by anonymous 03.08.2015 / 14:12

2 answers

0

While I made the following solution, Kadu posted his. as it uses only pure JavaScript, I decided to post anyway.

And other care must be taken, as the position of #window is calculated in relation to # main-content, so it should be recalculated whenever the window is resized, so I had to do the manipulation also in window.onresize .

var pageWrap = document.getElementById("page-wrap");
var mainContent = document.getElementById("main-content");

var txtWidth = document.getElementById("txtWidth");
var txtHeight = document.getElementById("txtHeight");
var txtColor = document.getElementById("txtColor");

var btAdd = document.getElementById("btAdd");
var criarWindow = function () {
    var myWindow = document.getElementById("window");    
    if (!myWindow) {        
        myWindow = document.createElement("div");
        myWindow.id = "window";
        document.body.appendChild(myWindow);
    }
    
    myWindow.style.width = txtWidth.value + "px";
    myWindow.style.height = txtHeight.value + "px";
    myWindow.style.position = "absolute";
    
    var left = pageWrap.offsetLeft + mainContent.offsetLeft + ((mainContent.offsetWidth - myWindow.offsetWidth) / 2);
    var top = pageWrap.offsetTop + mainContent.offsetTop + ((mainContent.offsetHeight - myWindow.offsetHeight) / 2);
    
    myWindow.style.backgroundColor = txtColor.value;
    myWindow.style.absolure = txtColor.value;    
    myWindow.style.top = top + "px";
    myWindow.style.left = left + "px";
    
    console.log(myWindow, top, left);
};
btAdd.onclick = criarWindow;
window.onresize = criarWindow;

#page-wrap {
    position: fixed;
    top: 0px;    
    right: 0px;    
    bottom: 0px;
    left: 0px;
    padding: 0px;
    margin: 0px;
    background-color: whitesmoke;
}

#param-window {
    width: 480px;
    left: 0px;
    right: 0px;
    margin: 0px auto;    
}

#main-content {
    background-color: white;
    position: absolute;
    margin: 0px auto;
    left: 0px;
    right: 0px;
    width: 480px;
    height: 360px;
    box-shadow: 0px 0px 10px black;
}

.row {
    box-sizing: border-box;
    clear: both;
    width: 100%;   
    height: 30px;
}

.columns {
    float: left;
    height: 30px;
}

.columns label {
    float: right;
}

.columns label:after {
    content: ':';
    margin-right: 5px;
}

.columns input {
    width: 85%;
}

.column-3 {
    width: 25%;
}

.column-9 {
    width: 75%;
}

<div id="page-wrap">
    <div id="param-window">
        <div class="row">
            <div class="columns column-3">
                <label for="txtWidth" >Width</label>
            </div>
            <div class="columns column-9">
                <input id="txtWidth" type="number" value="360" />
            </div>
        </div>
        <div class="row">
            <div class="columns column-3">
                <label for="txtHeight" >Height</label>
            </div>
            <div class="columns column-9">
                <input id="txtHeight" type="number" value="240" />
            </div>
        </div>
        <div class="row">
            <div class="columns column-3">
                <label for="txtColor" >Color</label>
            </div>
            <div class="columns column-9">
                <input id="txtColor" type="color" value="#FF0000" />
            </div>
        </div>
        <div class="row">
            <div class="columns column-3">
                
            </div>
            <div class="columns column-9">
                <button id="btAdd">Criar</button>
            </div>
        </div>
    </div>
	<div id="main-content">
	    <!--
            Alinhar aqui no centro a div#windows
        -->
	</div>
</div>

03.08.2015 / 15:07

Using the value of a datapicker in another How to move a file to another folder in Sublime text?

score 2 · Accepted Answer

As already mentioned in the comments, just calculate offset :

var $mc = $('#main-content'); // Seleciona o elemento div#main-content
var $wd = $('#windows');      // Seleciona o elemento div#windows

// Calcula o offset da esquerda
// posição esquerda + metade da largura do content - metade da largura do windows
var left = $mc.offset().left + ($mc.width() / 2) - ($wd.width() / 2);
// Calcula o offset do topo
// posição topo + metade da altura do content - metade da altura do windows
var top  = $mc.offset().top + ($mc.height() / 2) - ($wd.height() / 2);

// Atribui posições
$('#windows').css({'left': left, 'top': top});

For the element to be positioned correctly, it must be at the "root" of the document, ie the child of body and its position must be absolute , similar to this:

#windows { /* windows deve ser filho do body */
    position: absolute; /* <-- Importante */
    background: red;
    width: 708px;
    height: 538px;
}

Demo:

//<div id="windows"></div>

jQuery(document).ready(function($){

$(document.body).append( $('<div />').attr('id', 'windows') );

  var $mc = $('#main-content');
  var $wd = $('#windows');

  var left = $mc.offset().left + ($mc.width() / 2) - ($wd.width() / 2);
  var top  = $mc.offset().top + ($mc.height() / 2) - ($wd.height() / 2);


  $('#windows').css({'left': left, 'top': top});

});

#page-wrap {
    position: relative !important;
    margin-top: 0px; 
    margin-left: 170px; 
    width: 768px; 
    height: 593px;
    border-radius: 3px;
    border: 1px solid #8e8e97;
    background-color: rgb(247, 247, 247);
    
}
#main-content {
    position: absolute;
    width: 100%;
    height: 100%;
    background: yellow;
}
#windows {
    position: absolute;
    background: red;
    width: 708px;
    height: 538px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><divid="page-wrap">
	<div id="main-content">
	    <!--
            Alinhar aqui no centro a div#windows
        -->
	</div>
</div>