¿Como cargar un determinado script dependiendo del ancho de la pantalla?

publicado por: Anonymous

Tengo un sitio web el cual esta adaptado para mobiles pero en ciertos puntos de interrupcion o break necesito que se ejecute cierto ´javascript´. Ejemplo:

Necesito que cuando la pantalla sea superior a 992 px se ejecute un evento ´Click´ y si es menor a esa resolucion que no se ejecute nada o solo envie una alerta que indique algo.

Lo que probé fue lo siguiente:

$(document).ready(function () {
    $(window).resize(function () {
        if ($(Window).width() >= 992) {
            alert('Has cambiado el tamaño de la ventana');
            $(".sidenav-trigger").click(function () {
                alert("Handler for .click() called.");
                $("body").toggleClass("menuclose");
            });
        } else {
            alert("no entraste al if");
        }
    });
});

Pero por algún motivo no me funciona… ¿quien me puede ayudar en como poder hacer que se ejecute cierto script dependiendo de la pantalla del dispositivo?

solución

Lo que yo haría sería encapsular tu código en una función a parte la cual sería ejecutada inmediatamente cargue el documento, esto con el fin de no depender únicamente del evento resize() ya que al abrir tu sitio en un móvil éste evento obviamente no se va a ejecutar en primera instancia por que el usuario no está cambiando en ningún momento el tamaño de pantalla.

_x000D_

_x000D_

$(document).ready(function () {_x000D_
    $(window).resize(function () {_x000D_
         cambio();_x000D_
    });_x000D_
    _x000D_
    cambio();_x000D_
    _x000D_
    function cambio(){_x000D_
      if ($(window).width() >= 992) {_x000D_
            alert('Has cambiado el tamaño de la ventana');_x000D_
            $(".sidenav-trigger").click(function () {_x000D_
                alert("Handler for .click() called.");_x000D_
                $("body").toggleClass("menuclose");_x000D_
            });_x000D_
        } else {_x000D_
            alert("no entraste al if");_x000D_
            $(".sidenav-trigger").off();_x000D_
        }_x000D_
    }_x000D_
});

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
_x000D_
<button class="sidenav-trigger">Botón</button>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *