jquery - según - ocultar div mobile

Ocultar div si la pantalla es más pequeña que un cierto ancho

Question

Quiero ocultar un div flotante si la pantalla del usuario es <1024px ya que se superpondrá con el área de contenido de mi blog. Encontré este jQuery en la red, pero no estoy seguro de cómo usarlo.

$(document).ready(function() {

if ((screen.width>1024)) {
    // if screen size is 1025px wide or larger
    $(".yourClass").css(''display'', ''none''); // you can also use $(".yourClass").hide();
}
elseif ((screen.width<=1024))  {
    // if screen size width is less than 1024px
    $(".yourClass").css(''display'', ''block''); // here you can also use show();
}
});

Si el nombre de mi clase de div flotante es sharecontent, ¿debo reemplazar el script anterior como se muestra a continuación? Si es así, no está funcionando.

$(document).ready(function() {

if ((screen.width>1024)) {
    // if screen size is 1025px wide or larger
    $(".sharecontent").css(''display'', ''none''); // you can also use $(".yourClass").hide();
}
elseif ((screen.width<=1024))  {
    // if screen size width is less than 1024px
    $(".sharecontent").css(''display'', ''block''); // here you can also use show();
}
});

También intenté reemplazar screen.width con window.width pero aún no he tenido éxito :(

Answer 1

El problema con su código parece ser la sentencia elseif que debería ser else if (Observe el espacio).

Reescribí y simplemente le puse el código a esto:

$(document).ready(function () {

    if (screen.width < 1024) {
        $(".yourClass").hide();
    }
    else {

        $(".yourClass").show();
    }

});

Answer 2

El problema que tenía era mis consultas de css media y mi declaración IF en conflicto con Jquery. Ambos se ajustaron a 700px, pero uno pensaría que fue 700px antes que el otro.

Para solucionar esto, creé una Div vacía en la parte superior de mi HTML (fuera de mi contenedor principal)

<div id="max-width"></div>

En css configuro este div para mostrar ninguno

 #max-width {
        display: none;
    }

En mi JS creó una función.

var hasSwitched = function () {
    var maxWidth = parseInt($(''#max-width'').css(''max-width''), 10);
    return !isNaN(maxWidth);
};

Así que en mi declaración IF, en lugar de decir si (ha cambiado <700) el siguiente código, hice lo siguiente

if (!hasSwitched()) { Your code

}

else{ your code

}

Al hacer esto, CSS le dice a Jquery cuando llega a 700px. Entonces, css y jquery están sincronizados ... en lugar de tener un par de píxeles de diferencia. Dale una oportunidad a esto, definitivamente no te decepcionará.

Para hacer que esta misma lógica funcione para IE8, utilicé el complemento Respond.js (que también funciona definitivamente). Te permite usar consultas de medios para IE8. Lo único que no se admitió fue el ancho de la ventana gráfica y la altura de la ventana gráfica ... de ahí mi razón para intentar que mis css y JS trabajen juntos. Espero que esto les ayude chicos

Answer 3

Si su lógica no se redondea de manera incorrecta en ese ejemplo, la tiene oculta cuando la pantalla es más grande que 1024. Invierta los casos, convierta el none en un block y viceversa.

Answer 4

Tengo la misma situación que la tuya; que si el ancho de la pantalla es menor que el ancho especificado, debería ocultar el div. Este es el código jquery que usé que funcionó para mí.

$(window).resize(function() {

  if ($(this).width() < 1024) {

    $(''.divIWantedToHide'').hide();

  } else {

    $(''.divIWantedToHide'').show();

    }

});

Answer 5

Utilizar consultas de medios . Tu código CSS sería:

@media screen and (max-width: 1024px) {
    .yourClass {
        display: none !important;
    }
}