dos dudas con JQUERY

walrus86 · #1 (**permalink**) 07/08/2010, 12:51

hola como andan? estoy empezando a incursionar en jquery y tengo dos preguntas a ver si me pueden sacar la duda.

1- Si existe un efecto igual que el show para una capa div por ejemplo, pero que en vez de que aparezca el elemento desde la esquina superior izquierda hasta la esquina inferior derecha, que aparezca solamente de izquierda a derecha (espero que me hayan entendido que es lo que quise decir jeje)

2- Y esta es la duda mas importante. Trabajando en php paso una lista de contactos que puede ser de tamaño variable, y cuando paso el mouse sobre cualquiera de los nombres de contactos me apareceria una capa div con las opciones de ese contacto. Lo que no se es como referenciar a ese elemento en el script, por ejemplo se me habia ocurrido preguntando por una clase de css.
Por ejemplo, si paso el mouse por cualquier div de clase "contacto" que me aparezca otro div a su derecha.

Alguien sabe como se resuelve esto? disculpen mi ignorancia pero soy nuevo con jquerys jeje

desde ya muchas gracias

mayid · #2 (**permalink**) 07/08/2010, 18:37

1- quizas usando .animate()
2- Con un evento mouseover y la referencia $(this)

Cita:

$("div.claseTal").mouseover(function(){

id = $(this).attr("id");
alert ( id );

});

walrus86 · #3 (**permalink**) 09/08/2010, 05:32

ah buenisimo, ese codigo anda perfectamente y me tira el id de cada div de esa clase, pero ahora mi problema seria asignar dinamicamente el id a cada div, como para poder ver que menu desplegar.

Para esto intenté con un ejemplo muy simple pero no funciona:
for ($i = 0; $i <= 2; $i++) {
echo "<div class=\"nombre\" id=\"",$i,"\"><p><a href=\"#\" class=\"boton\">texto del boton</a></p></div>";
}

No se si esto tendria que preguntar en la seccion de php pero lo pregunto igual por las dudas jeje

muchas gracias

walrus86 · #4 (**permalink**) 09/08/2010, 08:48

ya está solucionado ese problema!!!

ahora que tengo los ids dinamicos, voy a tener para cada uno, un div que contiene a otros dos mas, de la siguiente manera:

Cita:

<div class="contenedor">
<div id="titulo1">blablabla</div><div id="cuerpo1">mas bla bla bla</div>
</div>

<div class="contenedor">
<div id="titulo2">blablabla</div><div id="cuerpo2">mas bla bla bla</div>
</div>

<div class="contenedor">
<div id="titulo3">blablabla</div><div id="cuerpo3">mas bla bla bla</div>
</div>
.......

Ahora bien, yo cuando paso el mouse sobre un determinado titulo necesito hacer un efecto sobre el cuerpo que le corresponde. El efecto es el mismo sobre todos los divs (simplemente un hide y un show). Pero no se muy bien como armar esta función. Les agradeceria mucho si me pueden ayudar con esta jeje

muchas gracias

Dany_s · #5 (**permalink**) 09/08/2010, 17:05

en vez de id use clases, accedo hasta el contenedor y de ahi busco el cuerpo, si tu estructura no va a cambiar podes usar next desde el título pero yo siempre lo hago de esta forma asi puedo cambiar sin drama

Código Javascript:

Ver original<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
$(function(){
    $('.titulo').click( function (){
        $(this).closest('.contenedor').find('.cuerpo').toggle();
    });
});
</script>
  <style>
  .cuerpo{display:none}
  </style>
</head>
<body>
 
    <div class="contenedor">
        <div class="titulo" id="titulo1">Título 1</div><div class="cuerpo" id="cuerpo1">Cuerpo 1 mas bla bla bla</div>
    </div>
 
    <div class="contenedor">
        <div class="titulo" id="titulo2">Título 2</div><div class="cuerpo" id="cuerpo2">Cuerpo 2 mas bla bla bla</div>
    </div>
 
    <div class="contenedor">
        <div class="titulo" id="titulo3">Título 2</div><div class="cuerpo" id="cuerpo3">Cuerpo 3 mas bla bla bla</div>
    </div>
 
</body>
</html>

walrus86 · #6 (**permalink**) 09/08/2010, 21:16

uhh buenisimo dany!!! justo lo que necesitaba, ahora aprovecho y les hago otra pregunta que no me sale lo que estoy queriendo hacer (QUE MOLESTO SOY JAJA)

junto unos contactos favoritos de una consulta y armo todos mis divs (segun como me indicó dany), quedando algo asi.

Cita:

<?php
if (count($favoritos) != 0){
foreach ($favoritos as $fav){
echo "<div class='contenedor1'><div class='titulo' id='".$fav->id_favorito."'>".$fav->nombre_fav."</div><div class='cuerpo' id='cuerpo".$fav->id_favorito."'>Este es el favorito con id numero ".$fav->id_favorito."</div></div>";
}
}
?>

los divs "titulo y cuerpo" estan ambos con float:left asi que me quedan uno al lado del otro.

Ahora lo que quiero hacer es que el cuerpo en primer lugar se encuentre invisible, y al hacer clic en el div titulo, aparezca el cuerpo de izquierda a derecha (mostrando unas acciones que se pueden realizar con ese contacto). Pero la animacion no me esta saliendo.

asi es como tengo hasta ahora:

Cita:

$(function(){ $(this).closest('.contenedor1').find('.cuerpo').an imate({width:"1px"},0,function(){$(this).closest(' .contenedor1').find('.cuerpo').animate({visibility :visible},0,function(){$(this).closest('.contenedo r1').find('.cuerpo').animate({width:"390px"},500,f unction(){});});});
});
});

Explicacion: en primer lugar el visibility de la clase cuerpo está en hidden. Al hacer clic en titulo, hago la longitud del cuerpo igual a width=1px. Luego lo hago visible con visibility: visible; y por ultimo hago que la longitud se vaya a 390px; para que aparezca de izquierda a derecha desde los 1px hasta los 390px.

Esto me sale absolutamente cualquier cosa, si alguien sabe en que le estoy errando buenisimo, o si me pueden decir alguna manera mas facil de hacer esto mejor, porque se me hace que me estoy complicando muchisimo :s

De nuevo muchas gracias por sus respuestas y por la paciencia ante un noob en jquerys jeje

Dany_s · #7 (**permalink**) 10/08/2010, 05:27

no se muy bien lo que queres lograr pero aca te paso algo

Código HTML:

Ver original<head>
<title>Prueba</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
$( function (){
 
  $(".titulo").toggle(function(){
      $(this).closest('.contenedor').find('.cuerpo').animate({
        width: "200px",
      }, 1500 );
  }, function(){
      $(this).closest('.contenedor').find('.cuerpo').animate({
        width: "0px"
      }, 1500 );
  });
 
});
 
</script>
<style>
    .titulo, .cuerpo {float:left}
    .cuerpo{overflow:hidden; width:0px; height:200px; background:red}
    .clear{clear:both}
</style>
</head>
<body>
    <div class="contenedor">
        <div class="titulo">Titulo 1</div>
        <div class="cuerpo">asd</div>
    </div>
    <div class="clear"></div>
     <div class="contenedor">
        <div class="titulo">Titulo 2</div>
        <div class="cuerpo">asd 2</div>
    </div>
</body>
</html>

walrus86 · #8 (**permalink**) 10/08/2010, 11:46

gracias dany otra vez por responder, pero creo que no me expliqué bien. Ahi utilizaste el div cuerpo para hacer que se desplace el titulo 2, yo lo que necesito en primer lugar es que el cuerpo tenga informacion pero se encuentre invisible, y al ahcer clic en el titulo, vaya apareciendo ese cuerpo de izquierda a derecha. Les mando un pequeño bosquejo para que se entienda mejor.

walrus86 · #9 (**permalink**) 10/08/2010, 12:09

ahi ya logré mas o menos lo que queria hacer, ahora solo me falta una funcion, que no se como hacerla, les copio mi codigo, y ejecutenlo si pueden para ver lo que hace.

Cita:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>EJEMPLO</title>

<script type="text/javascript" src="http://localhost/prueba/system/application/javascript/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
$( function (){

$(".titulo").click(function(){
$(this).closest('.contenedor').find('.cuerpo').ani mate({
width: "396px"
}, 1500 );
});

$(".cuerpo").mouseout(function(){
$(this).animate({
width: "0px"
}, 1500, function(){
$(this).css({display:"none"});
} );
});

});
</script>
<style>
.titulo {margin: 0; padding: 0; background-color: yellow; width: 300px; float: left; height: 60px;}
.cuerpo {margin: 0; padding: 2px; background-color: navy; color: red; width: 0px; float: left; display: none; height: 60px;}
.contenedor {padding: 0; background-color: yellow; width: 700px; display: table; height: 60px;}
</style>
</head>

<body>
<div class="contenedor">
<div class="titulo">Titulo 1</div>
<div class="cuerpo">asdasdasdasd</div>
</div>

<div class="contenedor">
<div class="titulo">Titulo 2</div>
<div class="cuerpo">aasddddddddddd</div>
</div>

<div class="contenedor">
<div class="titulo">Titulo 3</div>
<div class="cuerpo">aasdddddddasdsd</div>
</div>
</body>
</html>

fijense que cuando hacen clic en un titulo se despliega un menú a su derecha, y cuando saco el mouse de ese menu ahi recien desaparece el menu. Lo que yo quiero hacer es en vez de usar un mouseout en el div cuerpo (menu) que se este mostrando, es que cuando haga clic en algun otro titulo se despliegue hacia la derecha su menu y se esconda al mismo tiempo el otro menu que ya estaba abierto.

A alguien se le ocurre alguna manera de hacer esto?

muchas gracias, y disculpen por editar tantas veces el post, es que voy probando todo el dia pero me trabo por ahi

Dany_s · #10 (**permalink**) 10/08/2010, 16:48

en el mismo click tenés que buscar el div.cuerpo que está visible y ocultarlo, o mejor, guarda una referencia del objeto que mostras y en el mismo click del título ocultala antes, si no existe la referencia no haces nada y si existe es que hay uno abierto

Código HTML:

Ver original<head>
<title>EJEMPLO</title>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
$( function (){
 
    $(".titulo").click(function(){
 
        if (typeof last != 'undefined'){
            last.animate({
                width: "0px"
                }, 1500, function(){
                    $(this).css({display:"none"});
            });
        }
 
        last = $(this).closest('.contenedor').find('.cuerpo').animate({
            width: "396px"
        }, 1500 );
 
    });
});
</script>
<style>
.titulo {margin: 0; padding: 0; background-color: yellow; width: 300px; float: left; height: 60px;}
.cuerpo {margin: 0; padding: 2px; background-color: navy; color: red; width: 0px; float: left; display: none; height: 60px;}
.contenedor {padding: 0; background-color: yellow; width: 700px; display: table; height: 60px;}
</style>
</head>
 
<body>
<div class="contenedor">
<div class="titulo">Titulo 1</div>
<div class="cuerpo">asdasdasdasd</div>
</div>
 
<div class="contenedor">
<div class="titulo">Titulo 2</div>
<div class="cuerpo">aasddddddddddd</div>
</div>
 
<div class="contenedor">
<div class="titulo">Titulo 3</div>
<div class="cuerpo">aasdddddddasdsd</div>
</div>
</body>
</html>

walrus86 · #11 (**permalink**) 11/08/2010, 12:42

perfecto dany!! es justo lo que necesitaba!! muchisimas gracias por todo! ahroa a ponerle un poco de css y php a esto :D

salu2

walrus86 · #12 (**permalink**) 11/08/2010, 18:59

Código:

$(document).ready(function(){

    $(".titulo").click(function(){

        if (typeof last != 'undefined'){
            if (last != $(this).closest('.contenedor').find('.cuerpo')){
                last.animate({width: "0px"}, 500, function(){
                    $(this).css({display:"none"});
                });
                last = $(this).closest('.contenedor').find('.cuerpo').animate({width: "396px"}, 500);
            }
        }
        else{
            last = $(this).closest('.contenedor').find('.cuerpo').animate({width: "396px"}, 500);
        }
    });
});

walrus86 · #13 (**permalink**) 13/08/2010, 05:41

uhh editaqndo el codigo borre lo que queria decir! el codigo que me pasaste dany esta perfecto, lo unico que le faltaria seria que cuando haga clic en un titulo que ya este seleccionado con su cuerpo mostrandose, no pase nada en vez de esconderse y mostrarse otra vez. Ahi modifique un poco tu codigo pero igual no me funciona, me das una ultima mano con esto??

mil gracias

Código:

$(document).ready(function(){

    $(".titulo").click(function(){

        if (typeof last != 'undefined'){
            if (last != $(this).closest('.contenedor').find('.cuerpo')){
                last.animate({width: "0px"}, 500, function(){
                    $(this).css({display:"none"});
                });
                last = $(this).closest('.contenedor').find('.cuerpo').animate({width: "396px"}, 500);
            }
        }
        else{
            last = $(this).closest('.contenedor').find('.cuerpo').animate({width: "396px"}, 500);
        }
    });
});

Dany_s · #14 (**permalink**) 13/08/2010, 15:37

agrego una clase para diferencias el titulo clickeado y guardo una referencia, en este caso 'activo' asi el evento click es para .titulos que no contengan .activo, cuando hago click en un titulo no activo borro la .activo que tengo en la referencia y asigno al nuevo

Código Javascript:

Ver original$( function (){
 
    $(".titulo:not(.activo)").live("click", function(){
 
        if (typeof last != 'undefined'){
            activo.removeClass('activo');
            last.animate({
                width: "0px"
                }, 1500, function(){
                    $(this).css({display:"none"});
            });
        }
 
        last = $(this).addClass('activo').closest('.contenedor').find('.cuerpo').animate({
            width: "396px"
        }, 1500 );
        activo = $(this);
 
    });
 
});

Fijate que al teminar de cerrar el div lo estas ocultando y queda medio cortado el efecto, me imagino que lo haces porque queda un pedacito del div visible, eso es por el padding del cuerpo, podes poner el texto en un parrafo y darle margen asi sacas el padding del cuerpo, y si usabas un rojo y blanco iba a ser mejor :P

walrus86 · #15 (**permalink**) 13/08/2010, 17:19

jaja gracias dany!!! siempre salvandome el pellejo!! si noté que queda medio raro, ya corregi ese pedacito que quedaba ahi, de nuevo muchas gracias por todo

P.D: yo tambien soy gallina, puse esos colores probando nomas y no me di cuenta que me salió medio bostero el diseño jaj