1

Como posso pegar as coordenadas de uma página HTML e partir dessas coordenadas setar um target/delimite(quadrado vermelho) de forma dinâmica (onde eu só altero as posições)

No caso deste contexto seria NÃO usar as medidas de uma DIV, mas sim, ter a liberdade de manipular onde eu quiser.

Exemplo:

Setar um target nessas coordenadas:

bottom: 575 height: 525 left: 8 right: 512 top: 50 width: 504 x: 8 y: 50

no exemplo abaixo eu pego pelas dimensões da DIV, mas gostaria de passar as coordenadas desse target de forma 'livre'

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.square {
    height: 515px;
    width: 494px;
    margin-top: 42px;
}
body{

}
#overlay {
    position: fixed;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2;
    cursor: pointer;
}

</style>
<script type="text/javascript">
window.onload = function() {
   var el = document.getElementById('square');
	var pos = getPosition(el);
	$(el).css("border", "red solid 3px");
	$(el).css("position", "absolute");
	$(el).css("z-index", "999");
	
};


function getPosition(element) {
   var rect = element.getBoundingClientRect();
   return {x:rect.left,y:rect.top};
}
</script>
</head>
<body background="https://i.sstatic.net/sy2ru.png">
<div id="overlay"></div>

<div class="square" id="square">
<!-- <img src="C:\Users\igor.carreiro\Pictures\interface.png"   height="515px" width="494px"> -->
</div>

</body>
</html> 

1 Resposta 1

2

Opa! não sei se entendi bem a pergunta, mas no seu caso criei a função changeSquare e chamei dentro do onload:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.square {
    height: 515px;
    width: 494px;
    margin-top: 42px;
}
body{

}
#overlay {
    position: fixed;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2;
    cursor: pointer;
}

</style>
<script type="text/javascript">
window.onload = function() {
   var el = document.getElementById('square');
	var pos = getPosition(el);
    //CHAME AQUI PARA FUNCIONAR CORRETAMENTE
	changeSquare(200,200,200,200);
	$(el).css("border", "red solid 3px");
	$(el).css("position", "absolute");
	$(el).css("z-index", "999");
	
};

function changeSquare(width, height, x,y){
    	$(".square").css({top: y, left: x,height: height,width: width, position:'absolute'});
}

function getPosition(element) {
   var rect = element.getBoundingClientRect();
   return {x:rect.left,y:rect.top};
}


</script>
</head>
<body background="https://i.sstatic.net/sy2ru.png">
<div id="overlay"></div>

<div class="square" id="square">
<!-- <img src="C:\Users\igor.carreiro\Pictures\interface.png"   height="515px" width="494px"> -->
</div>

</body>
</html> 

Dessa forma tu trata via jquery aplicando um css, só chamar a função changeSquare(200,200,200,200) por exemplo, acho que parece bem simples e auto-explicativo.

1
  • 1
    Caro, não precisa pedir para marcar a resposta. Commented 1/11/2018 às 14:22

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .