How to manipulate coordinates of an html page freely

Asked

Viewed 304 times

1

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

In the case of this context it would be NAY use the measures of a DIV, but yes, to have the freedom to manipulate where 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 picked up by the dimensions of DIV, but I would like to pass the coordinates of that target freeform'

<!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.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

1 answer

2


Opa! I do not know if I understood the question well, but in your case I created the function changeSquare and called 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>
<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.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>

That way you handle via jquery by applying a css, just call the function changeSquare(200,200,200,200) for example, I think it looks pretty simple and self-explanatory.

  • 1

    Dear, you don’t need to ask to mark the answer.

Browser other questions tagged javascript html jquery

You are not signed in. Login or sign up in order to post.