Asier Asier - 26 days ago 6
CSS Question

In html5 app, register.html appears under index.html - Not hidden

I have an app which must changes between 2 html pages when I push over the link/buttons tagged by

<a>
. I have two pages, register.html and index.html. In index, when you push over "Registro" button the app must go to register.html. However, the
register.html
page appears under
index.html
(scrollable). In addition "loading" word appears:
Like this:
Capture

The code of
index.html
is the next:

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-2.0.2.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<script src="js/jquery.imagefit-0.2.js"></script>
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>KirolAPP</title>
</head>
<body>
<div data-role="page" id="indexPage">
<div data-role="header" align="center">
<img src="img/kirolLogo.png">
<br>
</div>
<div data-role="content" align="center">
<form id="formInicio">

<output style="color: #d17b12;">Nombre</output><br>
<input type="text" id="idNombre" style="border:1;" placeholder="Usuario"><br>
<output style="color: #d17b12;">Clave</output><br>
<input type="password" id="idClave" style="border:1; color: orange;" placeholder="Clave">
<br><br>
<div style="text-align:center;">
<a href="" id="botonAcceso" class="boton" onclick="compruebaLogin()" style="color: yellow;border: 1">Entrar</a>
</div>
</form>
</div>
<br>

<div data-role="footer" align="center" >
<div style="text-align:center;">
<a href="registro.html" id="boton2Registro" class="botonPagina" data-transition="turn" onclick="transitionReg()" style="color: yellow;">Registrarse</a>
</div>
</div>

</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/functions_v1.js"></script>

</body>
</html>


And the code of
register.html
is:

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-2.0.2.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<meta http-equiv="Content-Security-Policy"
content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport"
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<!-- <link rel="stylesheet" type="text/css" href="css/index.css"> -->
<title>KirolAPP</title>
</head>
<body>
<div data-role="page" id="registerPage">
<div data-role="header" align="center">
<img src="img/kirolLogo.png"> <br>
</div>
<div data-role="content" align="center" id="registerContent">
<form id="formRegistro">
<!-- <output style="color: #d17b12;">Nombre</output> -->
<br> <input type="text" id="idNombreReg" style="border: 1;"
placeholder="Nombre"><br>
<!-- <output style="color: #d17b12;">Primer apellido</output> -->
<input type="text" id="idNombreReg" style="border: 1;"
placeholder="1ÂșApellido"><br>
<!-- <output style="color: #d17b12;">Segundo Apellido</output> -->
<input type="text" id="idNombreReg" style="border: 1;"
placeholder="2ÂșApellido"><br>
<!-- <output style="color: #d17b12;">Clave</output><br> -->
<input type="password" id="idClaveReg" style="border: 1; color: orange;"
placeholder="Clave"><br>
<input
type="password" id="idClaveRegRep" style="border: 1; color: orange;"
placeholder="Confirmar clave"><br>
<!-- <output style="color: #d17b12;">Email</output><br> -->
<input type="email" id="idEmail" style="border: 1;"
placeholder="Email"><br>
<div data-role="footer" align="center">
<div style="text-align: center;">
<a id="botonRegistro" target="_system"
class="ui-btn ui-btn-inline ui-corner-all" onclick="checkPass"
style="color: yellow;">Registrarse</a>
</div>
</div>
</form>
</div>
<br>



</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/functions_v1.js"></script>
<script type="text/javascript" src="js/objects_v1.js"></script>

</body>
</html>


The functions that must show and hide are in
functions_v1.js
:

function transitionReg(){
$("#indexPage").hide();
}
function transitionLog(){
$("#registerPage").hide();
}
function checkPass(){
var pass1 = $("#idClaveReg").val;
var pass2 = $("#idClaveRegRep").val;

if (pass1==pass2 && pass1!=""){
alert("Las claves coinciden.");
usuario.nombre = $("#idNombreReg").val;
usuario.apellido1 = $("#id")
usuario.email = $("idEmail").val;
transitionLog();
}else{
alert("Las claves no coinciden.");
$("#idClaveReg").css("background-color","#f94a4a");
$("#idClaveRegRep").css("background-color","#f94a4a");
}
}


Thanks a lot.

Edit with response for loading: I had not added the plugin jquery1.4.5.css.

Answer

Your indexPage id is assigned to a void div. The issue is probably that you are hiding a void div.

Try to move the id id="indexPage" into the

<div class="app"> 

tag.

Or close your tag after the class="app" div, not before.

EDIT : Ok it seems that you are calling the hide function without parenthesis, so it tries to access to an attribute.

Just add "()" after every function in your js file.