Ajax - Nueva "capa"

w0ld3N #1 Ago '09

Hola a todos,

Quería preguntaros si sabíais cómo puedo hacer para crear una nueva capa en ajax. Supongo que conocéis muy bien e incluso mejor que yo la nueva forma de ver los videos de youtube dentro de Tuenti (ventana inferior con reproductor).

Pues eso, me gustaría crear una nueva "capa" por llamarlo así parecida a la de tuenti. Mis motivos son sencillos: estoy haciendo una página web para una radio online y necesito que, cuando los usuarios pulsen en "abrir el reproductor", la página ejecute una función que cree un nuevo objeto con el reproductor.. así los oyentes mientras escuchan la radio pueden navegar y visitar las distintas secciones de la web.

Resumiendo: crear una función que me cree una capa de contenido y que no pase lo mismo que con mootols, que cuando pulsas fuera de la "ventana" se cierra. Yo quiero que la web no se deshabilite y pueda navegar por ella con el reproductor "encima".

Un saludo y gracias por parte a leer.

PD: Perdona mi ignorancia, soy novato.

Q

quelaheliao #2 Ago '09

Te recomiendo que uses algun framework para tratar con javascript, jquery, mootools etc... usar javascript para cosas avanzadas es una pérdida de tiempo y un dolor de cabeza.

Y más sabiendo lo incompatibles que son los navegadores con tantas cosas.

http://www.jquery.com

Y la documentación (en inglés, pero bastante clara):
http://www.jquery.com/docs/

Si usas jquery para crear la capa sería algo como:
$("#capacontenedora" ).append('<div id="nuevacapa"></div>' );

w0ld3N #3 Ago '09

Muchas gracias por la respuesta. Intentaré ver todos los ejemplos que pueda para poder usar jquery para lo que necesito.

Supongo que tengo que llamar a la función "append( content ) " para crear el nuevo objeto que meteré en la capa que seleccione. El problema lo veo más a "como crear una capa nueva mediante dom que sea flotante y ahi meter el contenido mediante append".

Me podrias dar algun ejemplo o escribir algo sencillo de cómo puedo crear un boton y cuando pulse ejecute la funcion y cree una capa con el texto "hola" ?

Un saludo y gracias por molestarte

Q

quelaheliao #4 Ago '09

Puedes poner la capa nueva donde quieras, pero tiene que estar en algun sitio, puedes ponerla dentro de el mismo body si quieres...

$("body" ).append("<div id="lacapaflotante" > el contenido (un swf con el video por ejemplo)</div>" );

En vez de append puedes usar prepend, con uno lo pondrías al principio y con otro al final, pero al fin y al cabo si vas a hacer que la capa sea flotante con css no importa demasiado, sólo para hacer que el xhtml esté bien estructurado... pero el usuario no debería notarlo (a no ser que su navegador no soporte css)...

Para hacer la capa flotantee, algo así:

#lacapaflotante{
position:absolute;
top:150px;
left:50%;
width:500px;
height:500px;
margin-left:-250px;
}

Usuarios habituales