Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

85
Vistas
how to find x and y position in tablet resolution and validate with alert message with user input

Design a triangle on the screen. sides can be changed using CSS. User input- X and Y position to place the triangle on the screen size (1024* 768). Validate the user input(X, Y) and if value is higher than screen size, please show Alert message!(Entered value is out of screen!!)

about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

screen.width is your screen width such as 1400.

screen.height is your screen height such as 900.

Use this:

function changePosition(){
  let x=document.getElementById('x').value;
  let y=document.getElementById('y').value;
  if(x>screen.width || y>screen.height){
    alert('Error: Wrong input!!');
    return false; // stop running code
  }
  let triangle=document.getElementById('triangle');
  triangle.style.left=x+'px';
  triangle.style.top=y+'px';
}
div.triangle{
  position:absolute; /* free to change element position in screen. */
  right:0px;
  top:0px;
  width:100px;
  height:50px;
  border:solid 1px black;
}
<div id="triangle" class="triangle"></div>
<input id="x" placeholder="x" type="number">
<input id="y" placeholder="y" type="number">
<input type="button" onclick="changePosition();" value="change pos">

about 4 years ago · Juan Pablo Isaza Denunciar

0

Firstly, one has to know the difference between screen, window, document, and viewport. Each provide a different width/height. I'll break them down briefly.

  • Screen: The actual physical screen of your device.
    • window.screen.width or window.screen.height: The actual screen size i.e. full screen size of your device's display. Read
  • Window: The whole browser window. Its width/height includes the menubar, bookmarksbar, etc. and viewport.
    • window.outerWidth or window.outerHeight: The size of browser. Read
  • Viewport: It is the rectangle area where things are visible to you i.e part of the webpage you're viewing which is currently visible.
    • window.innerWidth or window.innerHeight: returns width/height (in pixels) including scrollbar and borders. Hence probably the size you need. Read
    • x.clientWidth or x.clientHeight: e.g. document.getElementsByTagName('html')[0].clientWidth will return width/height minus the scrollbar, borders, and margins. Read
  • Document: The whole webpage. Its width/height can exceed the viewport/window i.e. scrolling vertically/horizontally to see the rest of document on viewport.
    • Depreciated (can't use) window.document.width Read

So having read and understood all this, you can decide which one to use.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda