Foros del web

Un_Tico · 20-nov-2009, 15:27

Hola a todos pues aqui vengo a pedir ayuda con javascript otra vez :P

El problema es este:

Quiero hacer una simple animacion de un menu como en acordeon que se despliegue a la derecha cuando cargue la pagina

para esto hice esto
html

Código HTML:

    <ul>
        <li>uno</li>
        <li>dos</li>
        <li>tres</li>
        <li>cuatro</li>
        <li>cinco</li>
	</ul>

css

Código HTML:

ul{
	display:block;
	overflow:hidden;
	padding:0px;
	margin:0px;
}
ul li{
	list-style-type:none;
	float:left;
	background-color:#666;
	margin-right:10px;
	position:relative;
	top:0px;
	padding:5px 10px;
}

Luego el javascript:

jquery

Código:

jQuery(document).ready(function($){
	var menu_node 		= null;								
	var menu_lenght 	= $("ul").children().length;
	var menu_elements	= $("ul").children();
	var total_widths 	= 0;
	var speed 			= 1000;
	
	for(i=0;i<menu_lenght;i++){
		menu_node 		= menu_elements[i];
		total_widths 	+= $(menu_node).outerWidth();
		total_widths 	+= parseInt($(menu_node).css("margin-left"),10);
		total_widths 	+= parseInt($(menu_node).css("margin-right"),10);
		$(menu_node).css({"left":"-"+total_widths+"px","z-index":i});
	}
	for(i=0;i<menu_lenght;i++){
		menu_node = menu_elements[i];
		$(menu_node).animate({left:"0px"},speed);
	}
});

Pues el problema es con IE8,IE7 el cual manda este error

Cita:

Invalid argument. jquery-1.3.2.js, line 1061 character 4

:S

he seguido el error con el debuger de IE8 y he llegado hasta aqui.

Cita:

1661: elem[ name ] = value;

la variable name viene vacia.

He econtrado que lo que genera el error en mi codigo es esta linea

Código:

$(menu_node).css({"left":"-"+total_widths+"px","z-index":i});

Aqui siguieren una solucion pero no me funciono, si alguien ve como puedo cambiar mi code o arreglar jquery estaria genial

Gracias de antemano y saludos

mayid · 21-nov-2009, 07:46

z-index en jquery se escribe sin guion. Zindex (creo que la Z es mayuscula).

Proba eso.

Un_Tico · 23-nov-2009, 08:30

Gracias por contestar mayid pero ese no es el problema, el problema esta en el atributo left...

Ya lo habia probado solo con el left y es el left donde se genera el error!

mayid · 23-nov-2009, 10:29

Bueno, entonces se me complica:

Cita:

total_widths += $(menu_node).outerWidth();
total_widths += parseInt($(menu_node).css("margin-left"),10);
total_widths += parseInt($(menu_node).css("margin-right"),10);

A esto no lo interpreto. Pero quizas te sirva saber que el plugin Dimensions ya esta incorporado en jquery y puede utilizarse para medir y colocar elementos en base a posiciones de otros:

http://docs.jquery.com/CSS // se llama positions

Un_Tico · 23-nov-2009, 10:50

Gracias por contestar nuevamente,

Te explico esas 3 lineas que Citas calculan el ancho mas el margen que tengan los elementos <li> de la lista asi para despues poder moverlos a el left y dejarlos totalmente ocultos

Ahora bien, si, el metodo position me devuelve la posicion del elemento, yo lo que necesito es un metodo para hacerle set a los left de los <li> de la lista porque es ahi exactamente donde se produce el error el IE, espero me haya explicado bien

Saludos...

Un_Tico · 23-nov-2009, 11:12

UPDATE:

He actualizado mi código para que sea mas legible...

Código:

jQuery.fn.extend({
	AnimateMenu:function(){
		var total_widths 	= 0;
		var speed 			= 1000;
		$(this).children().each(function(){
			total_widths 	+= $(this).outerWidth();
			total_widths 	+= parseInt($(this).css("margin-left"),10);
			total_widths 	+= parseInt($(this).css("margin-right"),10);
			$(this).css({left:"-"+(total_widths)+"px"});
		});
		$(this).children().each(function(){
			$(this).animate({left:"0px"},speed);									 
		});
	}						   
});
jQuery(document).ready(function($){
	$("ul").AnimateMenu();
});

Saludos...

Un_Tico · 23-nov-2009, 14:00

Código:

jQuery.fn.extend({
AnimateMenu:function(){
var total_widths = 0;
var speed = 1000;
$(this).children().each(function(){
total_widths += $(this).outerWidth();
if(!isNaN(parseInt($(this).css("margin-left"))))
total_widths += parseInt($(this).css("margin-left"),10); 
if(!isNaN(parseInt($(this).css("margin-right"))))
total_widths += parseInt($(this).css("margin-right"),10);
$(this).css({left:"-"+(total_widths)+"px"});
});
$(this).children().each(function(){
$(this).animate({left:"0px"},speed); 
});
} 
});

El problema estaba en que los atributos css de margin-left y margin right no estaban definidos, en firefox esto devuelve 0 pero en IE devuelve auto :S

Para evitar esto puse ese par de ifs para evitar que devuelva nah el fvck IE

Era tan simple que no lo pense, y yo ya estaba empezando a poner el traking para un ticket :P

SOLVED

20-nov-2009, 15:27	#1 (permalink)
Un_Tico 176 Mensajes Ubicación: Cartago, Costa Rica	Invalid argument. jquery-1.3.2.js, line 1061 character 4 - jquery error con IE7 y 8 Hola a todos pues aqui vengo a pedir ayuda con javascript otra vez :P El problema es este: Quiero hacer una simple animacion de un menu como en acordeon que se despliegue a la derecha cuando cargue la pagina para esto hice esto html Código HTML: <ul> <li>uno</li> <li>dos</li> <li>tres</li> <li>cuatro</li> <li>cinco</li> </ul> css Código HTML: ul{ display:block; overflow:hidden; padding:0px; margin:0px; } ul li{ list-style-type:none; float:left; background-color:#666; margin-right:10px; position:relative; top:0px; padding:5px 10px; } Luego el javascript: jquery Código: jQuery(document).ready(function($){ var menu_node = null; var menu_lenght = $("ul").children().length; var menu_elements = $("ul").children(); var total_widths = 0; var speed = 1000; for(i=0;i<menu_lenght;i++){ menu_node = menu_elements[i]; total_widths += $(menu_node).outerWidth(); total_widths += parseInt($(menu_node).css("margin-left"),10); total_widths += parseInt($(menu_node).css("margin-right"),10); $(menu_node).css({"left":"-"+total_widths+"px","z-index":i}); } for(i=0;i<menu_lenght;i++){ menu_node = menu_elements[i]; $(menu_node).animate({left:"0px"},speed); } }); Pues el problema es con IE8,IE7 el cual manda este error Cita: Invalid argument. jquery-1.3.2.js, line 1061 character 4 :S he seguido el error con el debuger de IE8 y he llegado hasta aqui. Cita: 1661: elem[ name ] = value; la variable name viene vacia. He econtrado que lo que genera el error en mi codigo es esta linea Código: $(menu_node).css({"left":"-"+total_widths+"px","z-index":i}); Aqui siguieren una solucion pero no me funciono, si alguien ve como puedo cambiar mi code o arreglar jquery estaria genial Gracias de antemano y saludos Última edición por Un_Tico; 20-nov-2009 a las 15:37

21-nov-2009, 07:46	#2 (permalink)
mayid Colaborador 2.854 Mensajes Ubicación: BsAs	Respuesta: Invalid argument. jquery-1.3.2.js, line 1061 character 4 - jquery error c z-index en jquery se escribe sin guion. Zindex (creo que la Z es mayuscula). Proba eso.

23-nov-2009, 08:30	#3 (permalink)
Un_Tico 176 Mensajes Ubicación: Cartago, Costa Rica	Respuesta: Invalid argument. jquery-1.3.2.js, line 1061 character 4 - jquery error c Gracias por contestar mayid pero ese no es el problema, el problema esta en el atributo left... Ya lo habia probado solo con el left y es el left donde se genera el error! Última edición por Un_Tico; 23-nov-2009 a las 10:09

23-nov-2009, 10:29	#4 (permalink)
mayid Colaborador 2.854 Mensajes Ubicación: BsAs	Respuesta: Invalid argument. jquery-1.3.2.js, line 1061 character 4 - jquery error c Bueno, entonces se me complica: Cita: total_widths += $(menu_node).outerWidth(); total_widths += parseInt($(menu_node).css("margin-left"),10); total_widths += parseInt($(menu_node).css("margin-right"),10); A esto no lo interpreto. Pero quizas te sirva saber que el plugin Dimensions ya esta incorporado en jquery y puede utilizarse para medir y colocar elementos en base a posiciones de otros: http://docs.jquery.com/CSS // se llama positions

23-nov-2009, 10:50	#5 (permalink)
Un_Tico 176 Mensajes Ubicación: Cartago, Costa Rica	Respuesta: Invalid argument. jquery-1.3.2.js, line 1061 character 4 - jquery error c Gracias por contestar nuevamente, Te explico esas 3 lineas que Citas calculan el ancho mas el margen que tengan los elementos <li> de la lista asi para despues poder moverlos a el left y dejarlos totalmente ocultos Ahora bien, si, el metodo position me devuelve la posicion del elemento, yo lo que necesito es un metodo para hacerle set a los left de los <li> de la lista porque es ahi exactamente donde se produce el error el IE, espero me haya explicado bien Saludos...

23-nov-2009, 14:00	#7 (permalink)
Un_Tico 176 Mensajes Ubicación: Cartago, Costa Rica	Respuesta: Invalid argument. jquery-1.3.2.js, line 1061 character 4 - jquery error c Código: jQuery.fn.extend({ AnimateMenu:function(){ var total_widths = 0; var speed = 1000; $(this).children().each(function(){ total_widths += $(this).outerWidth(); if(!isNaN(parseInt($(this).css("margin-left")))) total_widths += parseInt($(this).css("margin-left"),10); if(!isNaN(parseInt($(this).css("margin-right")))) total_widths += parseInt($(this).css("margin-right"),10); $(this).css({left:"-"+(total_widths)+"px"}); }); $(this).children().each(function(){ $(this).animate({left:"0px"},speed); }); } }); El problema estaba en que los atributos css de margin-left y margin right no estaban definidos, en firefox esto devuelve 0 pero en IE devuelve auto :S Para evitar esto puse ese par de ifs para evitar que devuelva nah el fvck IE Era tan simple que no lo pense, y yo ya estaba empezando a poner el traking para un ticket :P SOLVED

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Modo lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado