How to manipulate coordinates of a html page freely

Question

How to manipulate coordinates of a html page freely

Navigation

#1 by (2 votes)

1

How can I get the coordinates of a page HTML and from these coordinates set a target / delimit (red square) dynamically (where I only change positions)

In this context it would be NOT to use the measures of a DIV , but to have the freedom to manipulate wherever I want.

Example:

Set a target at these coordinates:

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

In the example below I get by the dimensions of DIV , but would like to pass the coordinates of this target in a 'free' way

<!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><scripttype="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.stack.imgur.com/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>

javascript html jquery

asked by anonymous 01.11.2018 / 14:56

1 answer

Leave Input next to Label [duplicate] Add subitems between groups with linq

score 2 · Accepted Answer

Oops! I do not know if I understood the question well, but in your case I created the function changeSquare and called it inside the 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><scripttype="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.stack.imgur.com/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>

This way you treat via jquery by applying a css, just call the function changeSquare(200,200,200,200) for example, I think it seems very simple and self explanatory.