Error javascript: No se puede mover el foco (IE)Tema Solucionado

[Dr0gNan]

Buenas, como he comentado en anteriores ocasiones estoy haciendo un foro de cero, estoy implementando dos estilos visuales (SEO y X-Treme). El primero ya esta implementado y funciona todo correctamente.

En la implementacion del segundo me he encontrado con algun problema. He añadido un panel flotante en la parte superior de la pagina con un bloque de logueo, otro de registro y otro de Facebook Connect.

Me pasa lo siguiente... una vez implementada el panel flotante, al ir a la pagina de login me da un error javascript, solo en el nuevo estilo y con el navegador IE8:

Código: Seleccionar todo

Línea: 711
Error: No se puede mover el foco hacia el control porque el control es invisible, no está habilitado o es de un tipo que no acepta al foco.

He probado a comentar la llamada al panel flotante para que no se muestre si es IE pero me sale el contenido de la misma desperdigado por la pagina. He usado estas clausulas:

Código: Seleccionar todo

<!--[if !IE]>-->

<![endif]-->

Pongo el contenido del panel que es un HTML normal:

Código: Seleccionar todo

<!--
	Copyright 2009 Jeremie Tisseau
	"Sliding Login Panel with jQuery 1.3.2" is distributed under the GNU General Public License version 3:
	http://www.gnu.org/licenses/gpl-3.0.html
-->

<!-- stylesheets -->
<link rel="stylesheet" href="css/slide.css" type="text/css" media="screen" />
	
<!-- PNG FIX for IE6 --><!-- http://24ways.org/2007/supersleight-transparent-png-in-ie6 -->
<!--[if lte IE 6]>
	<script type="text/javascript" src="js/pngfix/supersleight-min.js"></script>
<![endif]-->
	 
<!-- jQuery - the core -->
<script src="js/jquery.js" type="text/javascript"></script>
<!-- Sliding effect -->
<script src="js/slide.js" type="text/javascript"></script>

<!-- Panel -->
<div id="toppanel">
	<div id="panel">
		<div class="content clearfix">
			<div class="left">
				<h1>{L_BAR_WELCOME_TO}</h1>
				<h1>{L_BAR_DE_ALK}</h1>
				<h2>{L_BAR_FOLLOW_OPTIONS}</h2>		
				<p class="grey">{L_BAR_INFO}</p>
			</div>
			<div class="left">
    			<!-- Login Form -->
    			<form action="{S_LOGIN_ACTION}" method="post">
    				<div class="gensmall" colspan="2" align="center"><span class="error">{LOGIN_ERROR}</span></div>
    				<h1>{L_BAR_USER}</h1>
    				<label class="grey" for="log">{L_USERNAME}:</label>
    				<input class="post" type="text" name="username" size="25" tabindex="1" />
    				<label class="grey" for="pwd">{L_PASSWORD}</label>
    				<input class="post" type="password" name="password" size="25" tabindex="2" /><br>
					<!-- IF U_SEND_PASSWORD --><a class="gensmall" href="{U_SEND_PASSWORD}">{L_FORGOT_PASS}</a><!-- ENDIF -->
					<div class="clear"></div><br>
    				<input type="checkbox" class="radio" name="autologin" tabindex="3" /> <span class="gensmall">{L_LOG_ME_IN}</span>
    				<div class="clear"></div>
    				<input type="submit" class="bt_login" name="login" value="Login" tabindex="5" />
    				
    				{S_LOGIN_REDIRECT}
    				{S_FORM_TOKEN}
    			</form>
			</div>
			<div class="left right">			
				<!-- Register Form -->
				<form action="{U_REGISTER}" method="post">
					<h1>{L_BAR_NOUSER}</h1>				
					<a href="{U_REGISTER}"><input type="submit" name="submit" value="{L_REGISTER}" class="bt_register" /></a>
					<div class="clear"></div><br>
					<!--[if !IE]>-->
					<h1>{L_BAR_CONNECT_FACEBOOK}</h1>
					{SVMODS_FACEBOOK_LOGIN_BUTTON}
					<![endif]-->
				</form>
			</div>
		</div>
	</div> <!-- /login -->
	<!-- The tab on top -->	
	<div class="tab">
		<ul class="login">
			<li class="left">&nbsp;</li>
			<li>{L_BAR_HI_ANONYMOUS}</li>
			<li class="sep">|</li>
			<li id="toggle">
				<a id="open" class="open" href="#">{L_BAR_CONNECT}</a>
				<a id="close" style="display: none;" class="close" href="#">{L_BAR_CLOSEPANEL}</a>			
			</li>
			<li class="right">&nbsp;</li>
		</ul> 
	</div> <!-- / top -->
</div> <!--panel -->

Y la llamada a dicho HTML realizada desde "overall_header.html":

Código: Seleccionar todo

<!-- IF not S_USER_LOGGED_IN -->
	<!-- INCLUDE panel.html -->
<!-- ENDIF -->

Además de esto las imagenes de "Conectate a Facebook" no se muestran en este estilo con IE, con Firefox si y con el otro tema (SEO) tambien (en los 2 navegadores) pero bueno, eso he desistido y las he ocultado.

Edito: El enlace del error es este: http://elbardealktodostemen.net/foro5/u ... mode=login (con IE)

Un abrazo y gracias anticipadas.

[leviatan21]

El problema es doble, por un lado en la página de loqueo tienes doble loqueo : Dos campos de nombre de usuario, dos campos de clave etc.

Uno es el propio de phpbb y el otro de la caja de loqueo superior, al duplicar los datos, tendrás problemas para que se identifiquen los usuarios, creo (de esto no estoy seguro) que cuando envias el formulario, phpbb toma el primero de los campos y si el usuario utiliza el formulario propio del tema, no habrá datos y no se podrá identificar nunca..
Aclaro que no estoy seguro.

En cuanto al error en IE sobre el foro, es cierto, y el responsable es este trozo de código

Código: Seleccionar todo

<script type="text/javascript"> 
// <![CDATA[
	(function()
	{
		var elements = document.getElementsByName("username");
		for (var i = 0; i < elements.length; ++i)
		{
			if (elements[i].tagName.toLowerCase() == 'input')
			{
				elements[i].focus();
				break;
			}
		}
	})();
// ]]
</script>

Lo que hace es indicarle que busque el campo username del formulario y le coloque el cursor.
El primer campo username del documento es el de la caja de loqueo superior que está cerrada (oculta), y por eso el error, no se le puede dar foco a un campo oculto.

Todo se resolvería desactivando la caja superior si es que estás en la página de logueo propia del estilo y phpbb.

[Dr0gNan]

Muchas gracias Alorse

Sobre el error JS la verdad es que es muy raro ya que con el otro estilo que he instalado (SEO) no pasa esto y tiene el login en el panel flotante y en la pagina de Login. Realizas los mismos pasos pero no da error aun estando oculto el panel.


He pensado en el hecho de comparar el HTML del estilo que va bien (SEO) con el que va mal (X-Treme) y he aqui mi sorpresa:

Código: Seleccionar todo

<script type="text/javascript">
// <![CDATA[
	(function()
	{
		var elements = document.getElementsByName("{USERNAME_CREDENTIAL}");
		for (var i = 0; i < elements.length; ++i)
		{
			if (elements[i].tagName.toLowerCase() == 'input')
			{
				elements[i].focus();
				break;
			}
		}
	})();
// ]]
</script>

SEO no tiene este codigo, me lo he cargado y me imagino que ya no tendre el problema del foco, la verdad es que esta bien que se ponga el foco en el cuadro de texto de usuario pero bueno, me conformo con no tener errores.

Ahora me queda lo de las imagenes del Facebook pero eso con mas calma...


Gracias, un abrazo.

[Dr0gNan]

Buenas de nuevo, finalmente he hecho un apaño mejor que el quitar el codigo javascript:

Código: Seleccionar todo

<script type="text/javascript">
// <![CDATA[
	(function()
	{
		var elements = document.getElementsByName("{USERNAME_CREDENTIAL}");
		for (var i = 0; i < elements.length; ++i)
		{
			if (elements[i].tagName.toLowerCase() == 'input')
			{
				elements[i].focus();
				break;
			}
		}
	})();
// ]]
</script>

Basicamente, este codigo recoge los elementos que tienen de nombre {USERNAME_CREDENTIAL} para despues colocar el foco (La barra horizontal que parpadea).

He cambiado ese codigo en la iteración de i, inicializandola a 1 en vez de a 0, de esta manera cogerá la segunda caja de texto (la del formulario de logueo) y al estar esta visible no dara errror.

Facil y practico, asi no perdemos el foco.

Un abrazo.