Cómo identificar el CSS que bloquea una función de JS

dmgman Seguir

Curioso
Verificación en dos pasos desactivada
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
4 Oct 2018
Mensajes
5
Buenas Forobetas, mi consulta es como identificar "que parte del css" me esta bloqueando una funcion de JS.

La funcion de JS es la siguiente: Edit fiddle - JSFiddle

y el CSS que me genera problema es este : [CSS] @charset "UTF-8";#preload,#preloadedImages,.hide{position:absolute;left:-9999px; - Pastebin.com

¿Como me di cuenta que es el CSS? Al principio pense que era el Jquery, y fui eliminando todo lo agregado 1 por 1... ya que en la consola no me aparecia ningun error. Y decidi empezar a eliminar las hojas de estilo y si... me encontre con que el CSS me estaba bloqueando la funcion del JS, como? no tengo idea y que parte era mucho menos.

Cabe destacar que las ID y CLASS que uso de la funcion mencionada anterior son las siguientes:

borra,caja,boletin las cuales no son mencionadas en el CSS.

Desde ya muchas gracias!

HTML:
<!DOCTYPE html>
<html lang="es" >
<head >
    <meta charset="utf-8">
    <title>PRUEBA</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
    <link rel="stylesheet" href="css/css.css"> <!-- ACA ESTA CARGADA LA CSS -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <style>
#contenedor {
  height: 1900px;
}
h2{
  margin:0;
}
#caja {
  padding: 10px;
  background-color: #eee;
  position: fixed;
  top: 200px;
  right: 0;
  border: solid 1px red;
  transform: translateX(100%);
  transition: all .5s ease;
}

#caja.entra {
  transform: translateX(0);
}
  </style>
</head>



<body> 
<div id="contenedor">
  <button id="borra">
    borra localStorage
  </button>
  <div id="caja">
  <h2>
  Boletín
  </h2>
    <form id="boletin" action="#" method="get">
      <input type="email" name="" id="" required>
      <input type="submit" value="Enviar" id="envia">
    </form>
 </div>
</div>
 
<script>
$(function() {
  if (localStorage.getItem("email")) {
    $("#caja").removeClass("entra");
  } else {
    $(window).scroll(function() {
      if (!localStorage.getItem("email"))
        var scroll = $(window).scrollTop();
      if (scroll >= 50) {
        $("#caja").addClass("entra");
      } else {
        $("#caja").removeClass("entra");
      }
    });
    }

  $("#boletin").submit(function(event) {
    localStorage.setItem("email", "true");
    if (localStorage.getItem("email")) {
      $("#caja").removeClass("entra");
    }
  });
  $("#borra")
  localStorage.removeItem('email');
});

</script>
    
</body>
</html>
 

edalex

Beta
Programador
Verificación en dos pasos desactivada
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
16 May 2017
Mensajes
51
Quitale la posición fixed a caja
 

¡Regístrate y comienza a ganar!

Beneficios

  • Gana dinero por participar
  • Gana dinero por recomendarnos
  • Descubre ofertas de empleo diariamente
  • Negocios seguros
  • ¡Información premium y más!

Acceder

¿Ya tienes una cuenta? Accede aquí

Arriba