Foros del Web » Programando para Internet » Jquery »

JQuery: Problema con sincronizacion de funciones slideUp, slideDown

 Estas en el tema de JQuery: Problema con sincronizacion de funciones slideUp, slideDown en el foro de Jquery en Foros del Web. Ya perdi la cabeza tratando de solucionar el siguiente problema:l Hice un cuadro con titulos a los cuales se les puede mostrar y ocultar el ...
  #1 (permalink)  
Antiguo 31/12/2009, 13:00
de-troit
Invitado
  
Mensajes: n/a
Puntos:
De acuerdo JQuery: Problema con sincronizacion de funciones slideUp, slideDown
Ya perdi la cabeza tratando de solucionar el siguiente problema:l

Hice un cuadro con titulos a los cuales se les puede mostrar y ocultar el contenido, pero tengo un problema... De partida todos los cuadros estan cerrados menos el primero... que debe aparecer abierto... pero la primera vez que se le hace click a los cuadros sale un slideUp en vez de un slideDown... pero despues se arregla... es solo la primera vez la que me trae problemas... les dejo la pagina para ver si me pueden ayudar... TAMBIEN QUIERO DECIRLES que hice una especie de "lazo" por medio del link... en el cual por ejemplo, si ingreso la direccion: http://mipagina.com/jquerySlide.html#servicios al meterse a esa direccion el cuadro servicios se expande... lo mismo si coloco al final del link #equipo...

Vean la pagina, pruebenla y se daran cuenta del problema... vean el codigo de fuente...
Muchas gracias y espero que me puedan ayudar.

http://diegoulloa.homelinux.com/jquery/mostrar-ocultar.html

CODIGO:
Código HTML:
<html>
<head>
<script src = "JQuery.js" type = "text/javascript"></script>

<style type = "text/css">
a:link {
	color		: #CCCCCC;
	text-decoration	: none;
}

a:hover {
	color		: white;
}

a:visited {
	color		: #CCCCCC;
	text-decoration	: none;
}

a:visited:hover {
	color		: white;
	text-decoration	: none;
}

.visibleDiv {
	width		: auto;
	height		: auto;
	background	: black;
	font-family	: Verdana;
	font-size	: 12px;
	color		: white;
	text-align	: center;
	padding		: 15px;
}

.title {
	font-family	: Verdana;
	font-size	: 16px;
	font-weight	: bold;
	color		: white;
	background	: #222222;
	width		: auto;
	height		: auto;
}

.hiddenDiv {
	overflow	: hidden;
	width		: 0;
	height		: 0;
}
</style>

<script language = "JavaScript" type = "text/javascript">
//METODOS:
function itemsToggle(divID) {
	divIDf = new String(divID + ":first");
    $(document.body).ready(function () {
      if ($(divIDf).is(":hidden")) {
	$(divID).removeClass("hiddenDiv");
	$(divID).addClass("visibleDiv");
        $(divID).slideDown("slow");
      } else {
	$(divID).removeClass("hiddenDiv");
	$(divID).addClass("visibleDiv");
        $(divID).slideUp("slow");
      }
    });
}

function linkAction(id) { //check
	$(document).ready(function() {
		$(id).removeClass("hiddenDiv");
		$(id).addClass("visibleDiv");
		$(id).slideDown("slow");
	});
}

function getLinkID() { //check
        var dir = location.href;
	var idSymbolPos = dir.indexOf("#");
	var idLarge = dir.length;
	var ID = dir.substring(idSymbolPos, idLarge);

	return ID;
}

//_______________________________________________________________________________________

var idException = getLinkID();

if(location.href.indexOf("#") != -1) {
	linkAction(idException);
	count++;
}
</script>
</head>

<body>
<div name = "meta" class = "title">
<a href = "#" onClick = "JavaScript: itemsToggle('#meta');">1. META COMO EMPRESA</a>
</div> <!-- /titulo -->

<div id = "meta" class = "visibleDiv">
Texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
Texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto

</div> <!-- /cuadro -->

<div name = "servicios" class = "title">
<a href = "#" onClick = "JavaScript: itemsToggle('#servicios');">2. SERVICIOS</a>
</div> <!-- /titulo -->
<div id = "servicios" class = "hiddenDiv">
Texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
Texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
</div> <!-- /cuadro -->

<div name = "testimonio" class = "title">
<a href = "#" onClick = "JavaScript: itemsToggle('#testimonios');">3. TESTIMONIOS</a>

</div> <!-- /titulo -->
<div id = "testimonios" class = "hiddenDiv">
Texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
Texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
</div> <!-- /cuadro -->

<div name = "equipo" class = "title">
<a href = "#" onClick = "JavaScript: itemsToggle('#equipo');">4. EQUIPO</a>
</div> <!-- /titulo -->
<div id = "equipo" class = "hiddenDiv">
Texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
Texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
</div> <!-- /cuadro -->
</body>

</html>
  #2 (permalink)  
Antiguo 31/12/2009, 13:41
 
Fecha de Ingreso: diciembre-2009
Mensajes: 72
Antigüedad: 15 años
Puntos: 0
Respuesta: JQuery: Problema con sincronizacion de funciones slideUp, slideDown
mmm...haber si te he entendido al principio TODO excepto el primero debe estar oculto?

si es asi....yo haria la estructura asi....

Código HTML:
<body>
<div id="empresa">
	empresa.....
</div>
<div id="empresadescripcion">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="servicios">
	servicios.....
</div>
<div id="serviciosdescripcion">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="testimonios">
	testimonios.....
</div>
<div id="testimoniosdescripcion">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="equipo">
	equipo.....
</div>
<div id="equipodescripcion">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>

Código: 
<script>
	$(function(){
		var $descripciones = $(".titulo");
		for(i=0;i<$descripciones.lenght;i++){
			var titulo = $descripciones[i].attr("id");
			$("#"+(titulo)+"descripcion").hide('fast');
		}
		$("#empresadescripcion").show('fast');
	
		$(".titulo").click(function(){
			var titulo = $(this).attr("id");
			for(i=0;i<$descripciones.lenght;i++){
				if($descripciones[i].attr("id") != titulo){
					var titulo = $descripciones[i].attr("id");
					$("#"+(titulo)+"descripcion").hide('fast');
				}
				$("#"+(titulo)+"descripcion").slideDown('slow');
			}
		});
	});
</script>
  #3 (permalink)  
Antiguo 31/12/2009, 13:42
Avatar de JavierB
Colaborador
  
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 10 meses
Puntos: 772
Hola de-troit

Muevo tu tema al foro de Frameworks desde Javascript.

Saludos,
  #4 (permalink)  
Antiguo 02/01/2010, 12:43
de-troit
Invitado
  
Mensajes: n/a
Puntos:
Respuesta: JQuery: Problema con sincronizacion de funciones slideUp, slideDown
Muchas gracias!
Problema solucionado =)
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 22:21.