Buenas, estoy haciendo una página web nueva desde 0 y he visto aqui:
http://team-wizards.es/index.php?site=members
el Slider que al clikear en la imagen, se despliega y se ve la foto de los miembos y tal.
sabeis alguna web donde pueda leer un tutorial de eso, ya que he googleado y todas sale "Menu desplegable JavaScript"
gracias!
Como dije ayer, nos hace falta una categoria how to y un hilo recopilatorio, ya que nadie usa el buscado para estas cosillas XDD
Ahi explican varias formas de hacerlo
buf, la verdad que no me entero de mucho
he estado indagando mas y necesito algo de este tipo, en lo que salen parrafos de texto y con este codigo oculta o esconde uno
$("div.contentToChange p.firstparagraph:hidden").slideDown("slow");
$("div.contentToChange p.firstparagraph:visible").slideUp("slow");
lo que no sé es donde meterlo.
si quereis verlo está aqui
http://docs.jquery.com/Tutorials:Live_Examples_of_jQuery
Por cierto se puede hacer el desplegable de
http://team-wizards.es/index.php?site=members
con tablas? es decir con trs y tds?
gracias!
#4 lo más fácil es usar:
$("#IdDelElementoQueQuieresDesplegar").slideToggle();
esta función, despliega o pliega, según si ya está plegado o no, solo tienes que saber cuando llamarla, por ejemplo:
$("#IdDelElementoQueAlPasarPorEncimaDesplegaraElElementoAnterior").hover(
function(){
$("#IdDelElementoQueQuieresDesplegar").slideToggle();
//También podias hacer aquí .slideDown
},
function(){
$("#IdDelElementoQueQuieresDesplegar").slideToggle();
//Y aquí slideUp
});
jQuery señores.
J QUEEEERYYYYYYYYYYYY!
Hagan el favor de ir al site, y empezar a leer la API.
Descubriran un mundo de fantasía y lujúria y empezaran a masturbarse hasta que... a no. Esto no. xD
Bueno ya lo he conseguido, usando este código:
<script type="text/javascript">
$(document).ready(function(){
$(".boton").click(function(){
$("#desplegable").slideToggle("slow");
});
$("#desplegable").css({ display: 'none', });
});
</script>
tengo que poner muchas veces el codigo con diferentes variables, pero bueno me funciona a la prefección.
El problema que tengo ahora es que los bordes, al desplegar se me quedan cortos y no queda borde en donde hay desplegado, sabeis alguna solucion?
mil gracias!
#9 depende, el borde lo tiene el objeto que se despliega o su 'padre' ? si es así, el borde debería crecer con el elemento, en el segundo caso solo con una excepcion y es que el elemento desplegable estuviese en position absolute o en float
el borde debe crecer con el elemento, y con position aboluste no va, se queda el desplegable parado y solo se despliega texto.. que rayada :S
#11 es que me he explicado mal xD, en position absolute NO TIENE QUE IR, ya que no empuja al elemento contenedor, tienes que hacerlo con position relative o strict y sin ningún tipo de floats.
Si dices el código html, veremos antes el problema.
mira este es mi código, no es muy limpio ya que estoy empezando xD
<tr>
<td>
<div class="jquery" align="center">
<a href="##boton3" class="boton3"><img src="images/PRUEBASLICER.jpg" /></img></a>
<div id="desplegable3">
<h2 class="text4" align="left">Producto 4</h2>
<p>Se supone que esto es el texto que se debe mostrar y ocultar y demás Se supone que esto es el texto que se debe mostrar y ocultar y demásSe supone que esto es el texto que se debe mostrar y ocultar y demás Se supone que esto es el texto que se debe mostrar y ocultar y demás Se supone que esto es el texto que se debe mostrar y ocultar y demás.. <a href="#">Ver más</a></p>
</div>
</div> </td>
</tr>
eso es para un desplegable, lo que no te entiendo es, el position relative o static, lo pongo en css al div="desplegable3" y a todos los demas que van antes que el (desplegable1, desplegable2, desplegable) o lo pongo en css en donde declaro:
table.border{
border-left:2px solid #c5c5c5;
}
gracias!!!!
vale, aqui va:
esto es lo que tengo en el head para el desplegable3:
<script type="text/javascript">
$(document).ready(function(){
$(".boton3").click(function(){
$("#desplegable3").slideToggle("slow");
});
$("#desplegable3").css({ display: 'none', });
});
</script>y luego en el body el codigo que he puesto arriba:
<tr>
<td>
<div class="jquery" align="center">
<a href="##boton3" class="boton3"><img src="images/PRUEBASLICER.jpg" /></img></a>
<div id="desplegable3">
<h2 class="text4" align="left">Producto 4</h2>
<p>Se supone que esto es el texto que se debe mostrar y ocultar y demás Se supone que esto es el texto que se debe mostrar y ocultar y demásSe supone que esto es el texto que se debe mostrar y ocultar y demás Se supone que esto es el texto que se debe mostrar y ocultar y demás Se supone que esto es el texto que se debe mostrar y ocultar y demás.. <a href="#">Ver más</a></p>
</div>
</div>
</td>
</tr>
para que funcione tienes que bajarte el jquery yo tengo el jquery-1.4.2.min.js
gracias y a ver si me podeis decir lo de los bordes!
PD: Putos smileys.