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!
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>