1

Mi problema es el siguiente quiero cambiar el right y el left de un css desde un javascript pero desde una resolución 1920 aquí esta mi codigo.

var es_safari = navigator.userAgent.toLowerCase().indexOf('safari') > -1;
var mediaquery = window.matchMedia("(max-media: 1920px)")
if (es_safari) {
  if (mediaquery.matches) {
    document.getElementsByClassName('.box-emergent-right').style.right = "38.100%";
    document.getElementsByClassName('.box-emergent').style.left = "38.100%";
  }
}
.box-emergent {
  left: 20%;
  background: red;
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid green;
}

.box-emergent-right {
  right: 70%;
  background: yellow;
}
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Prueba javascript</title>
  <link rel="stylesheet" href="">

</head>

<body>

  <div class="box-emergent">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea nam explicabo hic animi culpa debitis, odio ipsa excepturi quidem facilis, fugiat, cupiditate provident a porro. Ipsam, totam, obcaecati. Laudantium, quibusdam.</p>
  </div>

  <div class="box-emergent-right">

  </div>


</body>

Primera Imagen de derecha bien renderizada desde chrome.

introducir la descripción de la imagen aquí La Segunda Imagen podran notar que desde ipad no rederiza bien. introducir la descripción de la imagen aquí

1

1 respuesta 1

2

Solución con CSS

Yo te recomiendo que, para evitarte el tener que hacer uso de Javascript, lo hagas directamente desde el CSS a través de los media queries.

Ejemplo:

.box-emergent {
  left: 20%;
  background: red;
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid green;
}

.box-emergent-right {
  right: 70%;
  background: yellow;
}

@media (max-width: 1920px) {
  .box-emergent-right{
      right: 38.100%;
  }
  
  .box-emergent{
    left: 38.100%;
  }
}
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Prueba javascript</title>
  <link rel="stylesheet" href="">

</head>

<body>

  <div class="box-emergent">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea nam explicabo hic animi culpa debitis, odio ipsa excepturi quidem facilis, fugiat, cupiditate provident a porro. Ipsam, totam, obcaecati. Laudantium, quibusdam.</p>
  </div>

  <div class="box-emergent-right">

  </div>


</body>

Solución con Javascript

En caso de que lo quisieras hacer sí o sí desde Javascript he visto varios fallos en tu código:

  • En tu función matchMedia tendrías que usar max-width en vez de max-media.

  • Cuando utilizas la función getElementsByClassName no tienes que ponerle el punto a las clases, por lo que quedaría document.getElementsByClassName('box-emergent').

  • Por último, como la función getElementsByClassName devuelve un array y solamente tienes un elemento de cada, tendrás que hacer referencia a la primera posición (0) del array para recuperar el único elemento que se encuentra con esa clase. En caso contrario te devolverá undefined y te dará un error ya que no puedes cambiar las propiedades a un elemento que no existe.

    En caso de que tuvieras más de un elemento que quisieras cambiar tendrías que realizar un bucle que recorriera todo el array de elementos con la misma clase.

Tu ejemplo corregido:

var es_safari = navigator.userAgent.toLowerCase().indexOf('safari') > -1;
var mediaquery = window.matchMedia("(max-width: 1920px)")
if (es_safari) {
  if (mediaquery.matches) {
    document.getElementsByClassName('box-emergent-right')[0].style.right = "38.100%";
    document.getElementsByClassName('box-emergent')[0].style.left = "38.100%";
  }
}
.box-emergent {
  left: 20%;
  right: auto;
  background: red;
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid green;
}

.box-emergent-right {
  right: 70%;
  background: yellow;
}
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Prueba javascript</title>
  <link rel="stylesheet" href="">

</head>

<body>

  <div class="box-emergent">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea nam explicabo hic animi culpa debitis, odio ipsa excepturi quidem facilis, fugiat, cupiditate provident a porro. Ipsam, totam, obcaecati. Laudantium, quibusdam.</p>
  </div>

  <div class="box-emergent-right">

  </div>


</body>

11
  • ¿Me podrias podrías mostrar como hacer eso?, Es que soy novato en ello y necesito cambiar justamente unas imagenes de un proyecto desde un navegador safari por via javascript.
    – Tysaic
    Commented el 11 sept. 2017 a las 14:47
  • @Tysaic Te he dejado el código corregido en la respuesta, solo que lo he ocultado para no hacerla demasiado larga y que fuera difícil de leer. ¿Cuál es el problema que tienes al implementar los cambios? Commented el 11 sept. 2017 a las 14:48
  • Ese cambio ya lo he hecho el problema son mis navegadores, en chrome la plantilla se ve maravillosamente bien, pero en safari se descuadra completamente la imagen si Deseas te puedo pasar la pagina al privado para que veas como se ve en chrome y la diferencia en safari desde ipadpeek.com
    – Tysaic
    Commented el 11 sept. 2017 a las 14:50
  • @Tysaic ¿Ahora no te está detectando si estás utilizando Safari? Commented el 11 sept. 2017 a las 14:52
  • Si lo detecta el problema es que en chrome la imagen se ve como desea el cliente en cambio en safari se ve la imagen fuera de lugar así de simple.
    – Tysaic
    Commented el 11 sept. 2017 a las 14:54

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.