dmgman
Curioso
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
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!
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>
